diff --git a/dist/tailshape.css b/dist/tailshape.css
index 02f1de7..c2d0133 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -679,6 +679,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   grid-column: auto;
 }
 
+.col-span-7 {
+  grid-column: span 7 / span 7;
+}
+
 .float-right {
   float: right;
 }
@@ -1180,6 +1184,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 10rem;
 }
 
+.mt-2\.5 {
+  margin-top: 0.625rem;
+}
+
 .block {
   display: block;
 }
@@ -1308,6 +1316,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 12rem;
 }
 
+.h-44 {
+  height: 11rem;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -1476,6 +1488,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 18rem;
 }
 
+.w-96 {
+  width: 24rem;
+}
+
+.w-3\/5 {
+  width: 60%;
+}
+
+.w-2\/5 {
+  width: 40%;
+}
+
+.w-8\/12 {
+  width: 66.666667%;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1676,6 +1704,25 @@ Ensure the default browser behavior of the `hidden` attribute.
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@-webkit-keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.animate-ping {
+  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+          animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1721,6 +1768,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   grid-template-columns: repeat(8, minmax(0, 1fr));
 }
 
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1781,6 +1832,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .justify-evenly {
   justify-content: space-evenly;
 }
@@ -2121,6 +2176,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-right-radius: 9999px;
 }
 
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -2341,6 +2406,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
+.border-green-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(22 101 52 / var(--tw-border-opacity));
+}
+
+.border-pink-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 231 243 / var(--tw-border-opacity));
+}
+
 .border-b-gray-800 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(31 41 55 / var(--tw-border-opacity));
@@ -2351,6 +2426,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
+.border-l-black {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .border-opacity-50 {
   --tw-border-opacity: 0.5;
 }
@@ -2654,6 +2734,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(17 94 89 / var(--tw-bg-opacity));
 }
 
+.bg-green-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
+}
+
+.bg-pink-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-5 {
   --tw-bg-opacity: 0.05;
 }
@@ -2694,6 +2789,42 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
+.bg-\[url\(https\:\/\/picsum\.photos\/400\/400\?grayscale\)\] {
+  background-image: url(https://picsum.photos/400/400?grayscale);
+}
+
+.bg-\[url\(\)\] {
+  background-image: url();
+}
+
+.bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\'\)\] {
+  background-image: url('https://source.unsplash.com/random/640x480');
+}
+
+.bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\/\'\)\] {
+  background-image: url('https://source.unsplash.com/random/640x480/');
+}
+
+.bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\/tree\'\)\] {
+  background-image: url('https://source.unsplash.com/random/640x480/tree');
+}
+
+.bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\/tech\'\)\] {
+  background-image: url('https://source.unsplash.com/random/640x480/tech');
+}
+
+.bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\/\?tech\'\)\] {
+  background-image: url('https://source.unsplash.com/random/640x480/?tech');
+}
+
+.bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\/\?grayscale\2c tech\'\)\] {
+  background-image: url('https://source.unsplash.com/random/640x480/?grayscale,tech');
+}
+
+.bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\/\?grayscale\'\)\] {
+  background-image: url('https://source.unsplash.com/random/640x480/?grayscale');
+}
+
 .from-purple-100 {
   --tw-gradient-from: #f3e8ff;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(243 232 255 / 0));
@@ -2719,6 +2850,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(59 130 246 / 0));
 }
 
+.from-gray-100 {
+  --tw-gradient-from: #f3f4f6;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(243 244 246 / 0));
+}
+
 .via-red-300 {
   --tw-gradient-stops: var(--tw-gradient-from), #fca5a5, var(--tw-gradient-to, rgb(252 165 165 / 0));
 }
@@ -2747,6 +2883,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-to: #2563eb;
 }
 
+.to-white {
+  --tw-gradient-to: #fff;
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -2822,6 +2962,11 @@ Ensure the default browser behavior of the `hidden` attribute.
      object-position: center;
 }
 
+.object-top {
+  -o-object-position: top;
+     object-position: top;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -3019,6 +3164,31 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 4rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.py-40 {
+  padding-top: 10rem;
+  padding-bottom: 10rem;
+}
+
 .pt-20 {
   padding-top: 5rem;
 }
@@ -3438,6 +3608,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   letter-spacing: 0em;
 }
 
+.tracking-tighter {
+  letter-spacing: -0.05em;
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -3747,6 +3921,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(6 95 70 / var(--tw-text-opacity));
 }
 
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity));
+}
+
+.text-pink-900 {
+  --tw-text-opacity: 1;
+  color: rgb(131 24 67 / var(--tw-text-opacity));
+}
+
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
@@ -3846,6 +4030,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   opacity: 1;
 }
 
+.bg-blend-multiply {
+  background-blend-mode: multiply;
+}
+
+.mix-blend-hard-light {
+  mix-blend-mode: hard-light;
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -3904,6 +4096,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   outline-offset: 2px;
 }
 
+.outline-2 {
+  outline-width: 2px;
+}
+
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3920,11 +4116,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.sepia {
+  --tw-sepia: sepia(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -4069,6 +4275,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-opacity: 0.4;
 }
 
+.hover\:z-10:hover {
+  z-index: 10;
+}
+
 .hover\:translate-x-1:hover {
   --tw-translate-x: 0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4079,6 +4289,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:rounded:hover {
   border-radius: 0.25rem;
 }
@@ -4119,6 +4335,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.hover\:border-gray-800:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
+.hover\:border-gray-400:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .hover\:border-b-blue-300:hover {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -4288,6 +4514,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-purple-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-purple-900:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(88 28 135 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-90:hover {
   --tw-bg-opacity: 0.9;
 }
@@ -4638,6 +4884,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(107 33 168 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-purple-50:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
+}
+
 .focus\:text-white:focus {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -4779,6 +5030,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-offset-color: #e9d5ff;
 }
 
+.active\:top-0\.5:active {
+  top: 0.125rem;
+}
+
+.active\:top-0:active {
+  top: 0px;
+}
+
 .active\:bg-yellow-400:active {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -5141,6 +5400,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(16 185 129 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -5178,6 +5442,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(110 231 183 / 0));
 }
 
+.dark .dark\:from-cyan-600 {
+  --tw-gradient-from: #0891b2;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(8 145 178 / 0));
+}
+
 .dark .dark\:via-emerald-500 {
   --tw-gradient-stops: var(--tw-gradient-from), #10b981, var(--tw-gradient-to, rgb(16 185 129 / 0));
 }
@@ -5202,6 +5471,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-to: #67e8f9;
 }
 
+.dark .dark\:to-gray-300 {
+  --tw-gradient-to: #d1d5db;
+}
+
 .dark .dark\:bg-clip-text {
   -webkit-background-clip: text;
           background-clip: text;
@@ -5451,6 +5724,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(207 250 254 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-yellow-100 {
+  --tw-text-opacity: 1;
+  color: rgb(254 249 195 / var(--tw-text-opacity));
+}
+
 .dark .dark\:placeholder-white::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(255 255 255 / var(--tw-placeholder-opacity));
@@ -5639,6 +5922,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(52 211 153 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:hover\:stroke-cyan-400:hover {
   stroke: #22d3ee;
 }
@@ -5844,6 +6132,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
 }
 
+.dark .dark\:focus\:ring-blue-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:relative {
     position: relative;
@@ -6153,6 +6446,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  }
+
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -6233,6 +6538,26 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 8rem;
   }
 
+  .sm\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .sm\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .sm\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
+  .sm\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
   .sm\:pt-12 {
     padding-top: 3rem;
   }
@@ -6317,6 +6642,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 2rem;
   }
 
+  .sm\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .sm\:leading-none {
     line-height: 1;
   }
@@ -6584,6 +6914,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 3rem;
   }
 
+  .md\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
+  .md\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -6640,6 +6978,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 6rem;
   }
 
+  .md\:h-64 {
+    height: 16rem;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -6736,6 +7078,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 80%;
   }
 
+  .md\:w-48 {
+    width: 12rem;
+  }
+
+  .md\:w-3\/4 {
+    width: 75%;
+  }
+
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -6764,6 +7114,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 72rem;
   }
 
+  .md\:max-w-xl {
+    max-width: 36rem;
+  }
+
   .md\:flex-shrink {
     flex-shrink: 1;
   }
@@ -6933,6 +7287,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     border-width: 0px;
   }
 
+  .md\:border {
+    border-width: 1px;
+  }
+
   .md\:border-b-0 {
     border-bottom-width: 0px;
   }
@@ -7555,6 +7913,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 2.5rem;
   }
 
+  .lg\:ml-48 {
+    margin-left: 12rem;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -7603,6 +7965,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 3rem;
   }
 
+  .lg\:h-auto {
+    height: auto;
+  }
+
   .lg\:w-1\/2 {
     width: 50%;
   }
@@ -7699,6 +8065,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 100vw;
   }
 
+  .lg\:w-2\/4 {
+    width: 50%;
+  }
+
   .lg\:max-w-4xl {
     max-width: 56rem;
   }
@@ -7840,6 +8210,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     gap: 1rem;
   }
 
+  .lg\:gap-0 {
+    gap: 0px;
+  }
+
   .lg\:gap-y-16 {
     row-gap: 4rem;
   }
@@ -7856,6 +8230,12 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .lg\:space-x-12 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(3rem * var(--tw-space-x-reverse));
+    margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .lg\:border-transparent {
     border-color: transparent;
   }
@@ -8145,6 +8525,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.75rem;
   }
 
+  .lg\:text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
+
   .lg\:text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/public/componets/cta/10_cta.html b/public/componets/cta/10_cta.html
new file mode 100644
index 0000000..7bb090d
--- /dev/null
+++ b/public/componets/cta/10_cta.html
@@ -0,0 +1,59 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 10</title>
+    
+</head>
+<body>
+    
+    <!-- start cta 10 -->
+    <section class="section_divider" id="cta_10">
+        CTA 10
+    </section>
+    <section class="py-6 dark:bg-gray-800 dark:text-gray-50">
+        <div class="container mx-auto flex flex-col items-center justify-center p-4 space-y-8 md:p-10 lg:space-y-0 lg:flex-row lg:justify-between">
+            <h1 class="text-3xl font-semibold leading-tight text-center lg:text-left">Nobis a dolores, quia sit ad quasi dolorem in?</h1>
+            <button class="px-8 py-3 text-lg font-semibold rounded dark:bg-violet-400 dark:text-gray-900">Contact</button>
+        </div>
+    </section>
+    <!-- end cta 10 -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/11_cta.html b/public/componets/cta/11_cta.html
new file mode 100644
index 0000000..14870b3
--- /dev/null
+++ b/public/componets/cta/11_cta.html
@@ -0,0 +1,83 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 11</title>
+    
+</head>
+<body>
+    
+    <!-- start cta 11  -->
+    <section class="section_divider" id="cta_11">
+        CTA 11
+    </section>
+    <section class="py-6 dark:bg-gray-800 dark:text-gray-50">
+        <div class="container mx-auto flex flex-col justify-around  p-4 text-center md:p-10 lg:flex-row">
+            <div class="flex flex-col justify-center lg:text-left">
+                <p class="mb-1 text-sm font-medium tracking-widest uppercase dark:text-violet-400">Hic eligendi necessitatibus quod quia</p>
+                <h1 class="py-2 text-3xl font-medium leading-tight title-font">Master Cleanse Reliac Heirloom</h1>
+            </div>
+            <div class="flex flex-col items-center justify-center flex-shrink-0 mt-6 space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 lg:ml-4 lg:mt-0 lg:justify-end">
+                <button class="inline-flex items-center px-6 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current w-7 h-7 dark:text-coolGray-900">
+                        <path d="M 5.4160156 2.328125 L 12.935547 10.158203 C 13.132547 10.363203 13.45925 10.363203 13.65625 10.158203 L 15.179688 8.5742188 C 15.405688 8.3392188 15.354312 7.956875 15.070312 7.796875 C 11.137313 5.571875 6.2620156 2.811125 5.4160156 2.328125 z M 3.140625 2.8476562 C 3.055625 3.0456562 3 3.2629063 3 3.5039062 L 3 20.591797 C 3 20.788797 3.044375 20.970625 3.109375 21.140625 L 11.576172 12.324219 C 11.762172 12.131219 11.762172 11.826813 11.576172 11.632812 L 3.140625 2.8476562 z M 17.443359 9.2578125 C 17.335484 9.2729375 17.233297 9.32375 17.154297 9.40625 L 15.015625 11.632812 C 14.829625 11.825812 14.829625 12.130219 15.015625 12.324219 L 17.134766 14.529297 C 17.292766 14.694297 17.546141 14.729188 17.744141 14.617188 C 19.227141 13.777188 20.226563 13.212891 20.226562 13.212891 C 20.725562 12.909891 21.007 12.443547 21 11.935547 C 20.992 11.439547 20.702609 10.981938 20.224609 10.710938 C 20.163609 10.676937 19.187672 10.124359 17.763672 9.3183594 C 17.664172 9.2623594 17.551234 9.2426875 17.443359 9.2578125 z M 13.296875 13.644531 C 13.165875 13.644531 13.034047 13.696328 12.935547 13.798828 L 5.4746094 21.566406 C 6.7566094 20.837406 11.328781 18.249578 15.050781 16.142578 C 15.334781 15.981578 15.386156 15.599281 15.160156 15.363281 L 13.65625 13.798828 C 13.55775 13.696328 13.427875 13.644531 13.296875 13.644531 z"></path>
+                    </svg>
+                    <span class="flex flex-col items-start ml-4 leading-none">
+                        <span class="mb-1 text-xs">GET IT ON</span>
+                        <span class="font-semibold title-font">Google Play</span>
+                    </span>
+                </button>
+                <button class="inline-flex items-center px-5 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fill-current w-7 h-7 dark:text-coolGray-900">
+                        <path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"></path>
+                    </svg>
+                    <span class="flex flex-col items-start ml-4 leading-none">
+                        <span class="mb-1 text-xs">Download on the</span>
+                        <span class="font-semibold title-font">App Store</span>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </section>
+    
+    <!-- end cta 11  -->
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/12_cta.html b/public/componets/cta/12_cta.html
new file mode 100644
index 0000000..84e4199
--- /dev/null
+++ b/public/componets/cta/12_cta.html
@@ -0,0 +1,66 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 12</title>
+    
+</head>
+<body>
+
+
+    <!-- start cta 12  -->
+    <section class="section_divider" id="cta_12">
+        CTA 12
+    </section>
+    <div class="w-full dark:bg-gray-500 bg-[url('https://source.unsplash.com/random/640x480/?grayscale')] bg-center bg-blend-multiply bg-cover">
+        <div class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:p-10">
+            <h1 class="text-5xl antialiased font-semibold leading-none text-center dark:text-gray-100">Get Our Updates</h1>
+            <p class="pt-2 pb-8 text-xl antialiased text-center dark:text-gray-100">Find out about events and other news</p>
+            <div class="flex flex-row">
+                <input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
+                <button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-gray-900">Subscribe</button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- end cta 12  -->
+
+    
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/13_cta.html b/public/componets/cta/13_cta.html
new file mode 100644
index 0000000..81b13ed
--- /dev/null
+++ b/public/componets/cta/13_cta.html
@@ -0,0 +1,68 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 13</title>
+    
+</head>
+<body>
+    
+    <!-- start cat 13  -->
+    <section class="section_divider" id="cta_13">
+        CTA 13
+    </section>
+    <section class="py-6 dark:bg-coolGray-800 dark:text-coolGray-50">
+        <div class="container mx-auto flex flex-col justify-center p-4 space-y-8 md:p-10 lg:space-y-0 lg:space-x-12 lg:justify-between lg:flex-row">
+            <div class="flex flex-col space-y-4 text-center lg:text-left">
+                <h1 class="text-5xl font-bold leading-none">Stay in the loop</h1>
+                <p class="text-lg">Doloribus consectetur quasi ipsa quo neque culpa blanditiis ducimus recusandae a veritatis optio cumque, in harum ad nam!</p>
+            </div>
+            <div class="flex flex-row items-center self-center justify-center flex-shrink-0 shadow-md lg:justify-end">
+                <div class="flex flex-row">
+                    <input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
+                    <button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-coolGray-900">Subscribe</button>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- end cat 13  -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/14_cta.html b/public/componets/cta/14_cta.html
new file mode 100644
index 0000000..5da1e08
--- /dev/null
+++ b/public/componets/cta/14_cta.html
@@ -0,0 +1,68 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 14</title>
+    
+</head>
+<body>
+    
+    <!-- start cta 14  -->
+    <section class="section_divider" id="cta_14"> 
+        CTA 14
+    </section>
+    
+    <div class="container m-auto px-6 py-40 ">
+    <div class="flex flex-col md:flex-row items-center justify-between relative w-100 h-auto md:h-64 bg-100 shadow-2xl rounded-lg p-8 dark:bg-gray-800">
+        <div class="w-8/12 text-2xl">
+            <img alt="quote" class="float-left mr-1" src="https://assets-global.website-files.com/5b5a66e9f3166b36708705fa/5cf8fb1f994fb7168d0d66fb_quote-intro.svg">
+            <span class="flex dark:text-yellow-100">We are team of developers with houndreds hours spend on coding, we create professional apps, webs.</span>
+        </div>
+        <div class="relative shadow-md font-medium my-5 py-2 px-4 text-white dark:text-gray-800 cursor-pointer bg-yellow-600 hover:bg-yellow-500 rounded text-lg text-center w-48">
+            <span class="absolute h-3 right-0 top-0 animate-ping inline-flex rounded-full bg-yellow-600">
+            </span>
+            Call now
+        </div>
+    </div>
+    </div>
+    
+    <!-- end cta 14  -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/15_cta.html b/public/componets/cta/15_cta.html
new file mode 100644
index 0000000..f527b08
--- /dev/null
+++ b/public/componets/cta/15_cta.html
@@ -0,0 +1,70 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 15</title>
+    
+</head>
+<body>
+    
+
+
+    <!-- start cta 15  -->
+    <section class="section_divider" id="cta_15">
+        CTA 15
+    </section>
+    <div class="w-full bg-indigo-700">
+        <div class="mx-auto py-16 sm:py-20 px-4 sm:px-6 lg:px-8 max-w-2xl text-center">
+          <h2 class="space-y-2 text-3xl sm:text-4xl text-white font-extrabold uppercase">Sign up now to get 10% off</h2>
+          <p class="mt-4 text-lg text-indigo-200 leading-6">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit culpa architecto quam molestiae labore, fugit, ratione dolor neque sunt iste voluptas!
+          </p>
+          <div class="mt-10 flex flex-col sm:flex-row justify-around items-center uppercase font-medium tracking-widest">
+            <a href="#link" class="relative mb-5 sm:mb-0 px-5 py-3 w-48 rounded-md shadow bg-indigo-100 text-indigo-700 transform hover:bg-white active:top-0.5">Signup</a>
+            <a href="#link" class="relative px-5 py-3 w-48 rounded-md shadow bg-indigo-500 text-indigo-100 hover:bg-indigo-600 active:top-0.5">Maybe later</a>
+          </div>
+        </div>
+      </div>
+    
+    <!-- end cta 15  -->
+
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/16_cta.html b/public/componets/cta/16_cta.html
new file mode 100644
index 0000000..15573d2
--- /dev/null
+++ b/public/componets/cta/16_cta.html
@@ -0,0 +1,82 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 16</title>
+    
+</head>
+<body>
+    
+
+
+    <!-- start cta 16  -->
+    <section class="section_divider" id="cta_16">
+        CTA 16
+    </section>
+    <div class="mx-auto w-full max-w-6xl flex flex-col sm:flex-row bg-gray-50">
+
+        <div class="relative py-4 sm:py-10 w-full sm:w-1/2 flex justify-center items-center">
+            <!-- https://fancytailwind.com/static/sport3-ffc61a71c74b9ea62a73e6c6822e290f.jpg -->
+          <img src="https:/source.unsplash.com/random/?grayscale" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-top" />
+          <h2 class="relative text-3xl sm:text-4xl md:text-5xl lg:text-7xl text-white font-bold font-oswald uppercase tracking-tighter  sm:space-y-4" >
+            <span class="block">We don't take</span> 
+            <span class="block"> The summer off.</span> 
+            <span class="block"> We take it on.</span> 
+          </h2>
+        </div>
+  
+        <div class="relative py-4 px-5 w-full sm:w-1/2 flex justify-center items-center">
+          <img src="https://fancytailwind.com/static/sky1-2d513e4b36c6d0802a7cb3392a12eead.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover" />
+          <div class="relative my-auto w-full max-w-sm text-center">
+            <h2 class="mb-5 md:mb-10 sm:text-lg lg:text-xl text-white font-semibold uppercase tracking-wider">Exclusive summer offer</h2>
+            <div class="w-full flex flex-col lg:flex-row justify-center items-center text-xs sm:text-sm font-semibold uppercase space-y-3 lg:space-y-0">
+              <a href="#link" class="py-3 px-6 w-full lg:w-1/2 inline-block bg-black text-white transition-all duration-150 transform hover:scale-105 hover:z-10">Visit a club</a>
+              <a href="#link" class="py-3 px-6 w-full lg:w-1/2 inline-block bg-white text-black transition-all duration-150 transform hover:scale-105 hover:z-10">Member benefits</a>
+            </div>
+          </div>
+        </div>
+  
+      </div>
+    
+    <!-- end cta 16  -->
+
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/17_cta.html b/public/componets/cta/17_cta.html
new file mode 100644
index 0000000..9ff05fa
--- /dev/null
+++ b/public/componets/cta/17_cta.html
@@ -0,0 +1,82 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 17</title>
+    
+</head>
+<body>
+    
+
+
+
+    <!-- start cta 17 -->
+    <section class="section_divider" id="cta_17">
+        CTA 17
+    </section>
+    <section class="flex justify-center">
+        
+        <div class="w-full max-w-3xl grid grid-cols-7 rounded-lg shadow-lg bg-white font-oswald overflow-hidden">
+      
+        <div class="col-span-7 md:col-span-3 relative w-full h-44 md:h-full bg-red-500">
+          <img src="https://fancytailwind.com/static/music1-59ae9969ef29408305c6bfca033d6724.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center filter sepia mix-blend-hard-light" />
+        </div>
+  
+        <div class="col-span-7 md:col-span-4 relative py-5 px-8 w-full h-full flex flex-col items-center justify-center">
+          <span class="text-sm text-gray-300 font-semibold uppercase tracking-wider">Join the squad</span>
+          <h2 class="py-5 uppercase text-center space-y-2">
+            <span class="block text-4xl sm:text-5xl text-gray-900 font-semibold tracking-wide">Get 20% OFF</span>
+            <span class="block text-base sm:text-lg text-gray-700 tracking-wide">Your next order</span>
+          </h2>
+          <div class="py-5 w-full max-w-xs inline-flex flex-col space-y-4 uppercase">
+            <a href="#link" class="py-2 rounded-sm bg-red-500 text-center text-white tracking-wide hover:bg-red-600">Yes, please</a>
+            <a href="#link" class="py-2 rounded-sm bg-gray-200 text-center text-gray-700 tracking-wide hover:bg-gray-300">No, thanks</a>
+          </div>
+          <span class="mt-5 text-xs text-gray-300 font-semibold uppercase tracking-wider">Limited offer, don't miss out!</span>
+        </div>
+  
+        </div>
+
+    </section>
+    
+    <!-- end cta 17 -->
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/1_cta.html b/public/componets/cta/1_cta.html
new file mode 100644
index 0000000..37ea541
--- /dev/null
+++ b/public/componets/cta/1_cta.html
@@ -0,0 +1,61 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 1</title>
+    
+</head>
+<body>
+     <!-- start cta 1  -->
+
+     <section class="section_divider" id="cta_1">
+      CTA 1
+  </section>
+  <section class="flex justify-center  p-2 ">
+      <a href="#" class="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+          <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+          <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+      </a>
+  </section>
+
+  <!-- end cta 1  -->
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/2_cta.html b/public/componets/cta/2_cta.html
new file mode 100644
index 0000000..d5266af
--- /dev/null
+++ b/public/componets/cta/2_cta.html
@@ -0,0 +1,69 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 2</title>
+    
+</head>
+<body>
+    
+
+    <!-- start cta 2  -->
+    <section class="section_divider" id="cta_2">
+      CTA 2
+  </section>
+
+
+  <section class="flex justify-center  p-2 ">
+      <div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
+          <a href="#">
+          <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+          </a>
+          <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+          <a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          Read more
+          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+          </a>
+          </div>
+  
+  </section>
+  <!-- end cta 2  -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/3_cta.html b/public/componets/cta/3_cta.html
new file mode 100644
index 0000000..d2af72e
--- /dev/null
+++ b/public/componets/cta/3_cta.html
@@ -0,0 +1,74 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA </title>
+    
+</head>
+<body>
+    
+
+    <!-- start cta 3  -->
+    <section class="section_divider" id="cta_3">
+      CTA 3
+  </section>
+  <section class="flex justify-center p-2">
+      
+          
+      <div class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
+      <a href="#">
+      <img class="rounded-t-lg" src="https://source.unsplash.com/random/?productivity,work" alt="">
+      </a>
+      <div class="p-5">
+      <a href="#">
+      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      </a>
+      <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+      <a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+      Read more
+      <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </a>
+      </div>
+      </div>
+
+  </section>
+  <!-- end cta 3  -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/4_cta.html b/public/componets/cta/4_cta.html
new file mode 100644
index 0000000..f1972eb
--- /dev/null
+++ b/public/componets/cta/4_cta.html
@@ -0,0 +1,69 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 4</title>
+    
+</head>
+<body>
+    
+
+
+    <!-- start cta 4  -->
+    <section class="section_divider" id="cta_4">
+        CTA 4 
+    </section>
+
+    <section class="flex justify-center p-2">
+        
+        <a href="#" class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
+            <img class="object-cover h-full w-auto rounded-t-lg md:h-full md:w-48  md:rounded-none md:rounded-l-lg border-l-2 border-black" src="https://source.unsplash.com/random/?productivity,work,tree,fun" alt="">
+            <div class="flex flex-col justify-between p-4 leading-normal">
+                <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+            </div>
+        </a>
+
+    </section>
+    
+    
+    <!-- end cta 4  -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/5_cta.html b/public/componets/cta/5_cta.html
new file mode 100644
index 0000000..342e980
--- /dev/null
+++ b/public/componets/cta/5_cta.html
@@ -0,0 +1,80 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 5</title>
+    
+</head>
+<body>
+    
+
+    <!-- start cta 5  -->
+    <section class="section_divider" id="cta_5">
+        CTA 5
+    </section>
+        
+    <section class="flex justify-center p-2">
+            
+        <div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+        <a href="#">
+        <img class="p-8 rounded-t-lg" src="https://source.unsplash.com/random/?product" alt="product image">
+        </a>
+        <div class="px-5 pb-5">
+        <a href="#">
+        <h3 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport</h3>
+        </a>
+        <div class="flex items-center mt-2.5 mb-5">
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">5.0</span>
+        </div>
+        <div class="flex justify-between items-center">
+        <span class="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
+        <a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add to cart</a>
+        </div>
+        </div>
+        </div>
+    </section>
+    <!-- end cta 5  -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/6_cta.html b/public/componets/cta/6_cta.html
new file mode 100644
index 0000000..8e69088
--- /dev/null
+++ b/public/componets/cta/6_cta.html
@@ -0,0 +1,79 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 6</title>
+    
+</head>
+<body>
+    
+
+    <!-- start cta 6 -->
+    <section class="section_divider" id="cta_6">
+        CTA 6
+    </section>
+        <section class="w-full bg-gradient-to-b from-gray-100 to-white dark:bg-gradient-to-b dark:from-cyan-600 dark:to-gray-300">
+            <div class="w-full px-4 py-20 mx-auto text-left md:text-center md:w-3/4 lg:w-2/4">
+              <p class="mb-2 text-base font-semibold text-purple-700">Start your free trial now</p>
+              <h2 class="mb-6 text-3xl font-extrabold tracking-tight md:text-4xl md:mb-6 md:leading-tight">Sign up for a free account to organize your customer feedback.</h2>
+              <div class="mb-0 space-x-0 md:space-x-2">
+                <a class="inline-flex items-center justify-center w-full mb-2 bg-purple-800 p-2 rounded font-bold text-white hover:bg-purple-900 sm:w-auto sm:mb-0" href="#">
+                  Get Started
+                  <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                  </svg>
+                </a>
+                <a class="inline-flex items-center justify-center w-full mb-2 bg-gray-100  hover:bg-gray-300 p-2 rounded font-bold  sm:w-auto sm:mb-0" href="#">
+                  Book a Demo
+                  <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fill-rule="evenodd"
+                      d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          
+        </section>
+    <!-- end cta 6 -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/7_cta.html b/public/componets/cta/7_cta.html
new file mode 100644
index 0000000..3642072
--- /dev/null
+++ b/public/componets/cta/7_cta.html
@@ -0,0 +1,65 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 7</title>
+    
+</head>
+<body>
+    
+    <!-- start cta 7  -->
+    <section class="section_divider" id="cta_7">
+        CTA 7
+    </section>
+    <section class="px-0 py-12 mx-auto max-w-7xl sm:px-4">
+        <div class="text-white bg-green-800 border-green-800 rounded-none card card-body sm:rounded-lg">
+          <div class="flex flex-col items-center justify-between px-1 py-4 lg:flex-row sm:py-3 sm:px-3">
+            <p class="mb-6 text-base font-semibold lg:mb-0">Sleep peacefully knowing that your website is performing at it’s best.</p>
+            <a href="#" class="w-full text-green-800 shadow bg-gray-300 p-2 rounded text-lg sm:w-auto ">Start for free</a>
+          </div>
+        </div>
+      </section>
+      
+    
+    <!-- end cta 7  -->
+
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/8_cta.html b/public/componets/cta/8_cta.html
new file mode 100644
index 0000000..636b2dc
--- /dev/null
+++ b/public/componets/cta/8_cta.html
@@ -0,0 +1,68 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 8</title>
+    
+</head>
+<body>
+    
+    <!-- start cta 8  -->
+    <section class="section_divider">
+        CTA 8
+    </section>
+    <section class="px-0 py-12 mx-auto max-w-7xl sm:px-4">
+        <div class="grid items-center grid-cols-1 gap-10 px-4 overflow-hidden text-pink-900 bg-pink-100 border-pink-100 rounded-none card card-body sm:rounded-lg md:px-10 md:grid-cols-5 lg:gap-0">
+          <div class="col-span-1 md:col-span-3">
+            <h2 class="mb-3 font-serif text-2xl font-normal leading-tight lg:text-3xl">Sleep peacefully knowing that your website is performing at it’s best.</h2>
+            <p class="mb-6 text-sm font-semibold lg:text-base">We deliver a guaranteed number of high-quality new leads every month. Combined with the sales tools to convert them into paying clients.</p>
+            <a href="#" class="w-full text-pink-900 shadow bg-gray-100 p-2 rounded sm:w-auto">Start for free</a>
+          </div>
+          <div class="col-span-1 md:col-span-2">
+            <img src="https://source.unsplash.com/random/640x480/?grayscale,electronics" class="h-full select-none lg:ml-48" alt="Mac App" />
+          </div>
+        </div>
+      </section>
+      
+    
+    <!-- end cta 8  -->
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/9_cta.html b/public/componets/cta/9_cta.html
new file mode 100644
index 0000000..f58f64d
--- /dev/null
+++ b/public/componets/cta/9_cta.html
@@ -0,0 +1,68 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA 9</title>
+    
+</head>
+<body>
+    
+
+    <!-- start cta 9 -->
+    <section class="section_divider" id="cta_9">
+        CTA 9
+    </section>
+    <section class="text-white bg-gray-900">
+        <div class="flex flex-col items-stretch justify-between px-4 py-20 mx-auto max-w-7xl lg:flex-row sm:items-center">
+          <div>
+            <h2 class="mb-1 text-xl font-semibold text-left sm:text-2xl sm:text-center lg:text-left">Built for companies of all sizes</h2>
+            <p class="mb-6 text-lg font-normal text-left text-gray-200 sm:text-xl lg:mb-0 sm:text-center lg:text-left">Start your 14-day free trial or book a personal demo.</p>
+          </div>
+          <div class="flex flex-col mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
+            <a href="#" class="w-full py-2 px-4 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded text-lg sm:w-auto">Start free trial</a>
+            <a href="#" class="w-full py-2 px-4 bg-gray-800 border-2 border-gray-300 text-gray-300 hover:border-gray-400 hover:bg-gray-400 hover:text-gray-800 rounded text-lg sm:w-auto">Book a demo</a>
+          </div>
+        </div>
+      </section>
+      
+    
+    <!-- end cta 9 -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/cta/cta.html b/public/componets/cta/cta.html
new file mode 100644
index 0000000..0a96d50
--- /dev/null
+++ b/public/componets/cta/cta.html
@@ -0,0 +1,443 @@
+<!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">
+
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title> CTA </title>
+    
+</head>
+<body class="bg-gray-300">
+    
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+    
+    <!-- start cta 1  -->
+
+    <section class="section_divider">
+        CTA 1
+    </section>
+    <section class="flex justify-center  p-2 ">
+        <a href="#" class="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+            <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+        </a>
+    </section>
+
+    <!-- end cta 1  -->
+
+
+    <!-- start cta 2  -->
+    <section class="section_divider">
+        CTA 2
+    </section>
+
+
+    <section class="flex justify-center  p-2 ">
+        <div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
+            <a href="#">
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+            </a>
+            <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+            <a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+            Read more
+            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+            </a>
+            </div>
+    
+    </section>
+    <!-- end cta 2  -->
+
+    <!-- start cta 3  -->
+    <section class="section_divider">
+        CTA 3
+    </section>
+    <section class="flex justify-center p-2">
+        
+            
+        <div class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
+        <a href="#">
+        <img class="rounded-t-lg" src="https://source.unsplash.com/random/?productivity,work" alt="">
+        </a>
+        <div class="p-5">
+        <a href="#">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+        </a>
+        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+        <a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+        Read more
+        <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </a>
+        </div>
+        </div>
+
+    </section>
+    <!-- end cta 3  -->
+
+
+    <!-- start cta 4  -->
+    <section class="section_divider">
+        CTA 4 
+    </section>
+
+    <section class="flex justify-center p-2">
+        
+        <a href="#" class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
+            <img class="object-cover h-full w-auto rounded-t-lg md:h-full md:w-48  md:rounded-none md:rounded-l-lg border-l-2 border-black" src="https://source.unsplash.com/random/?productivity,work,tree,fun" alt="">
+            <div class="flex flex-col justify-between p-4 leading-normal">
+                <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+            </div>
+        </a>
+
+    </section>
+    
+    
+    <!-- end cta 4  -->
+
+    <!-- start cta 5  -->
+    <section class="section_divider">
+        CTA 5
+    </section>
+        
+    <section class="flex justify-center p-2">
+            
+        <div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+        <a href="#">
+        <img class="p-8 rounded-t-lg" src="https://source.unsplash.com/random/?product" alt="product image">
+        </a>
+        <div class="px-5 pb-5">
+        <a href="#">
+        <h3 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport</h3>
+        </a>
+        <div class="flex items-center mt-2.5 mb-5">
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+        <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">5.0</span>
+        </div>
+        <div class="flex justify-between items-center">
+        <span class="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
+        <a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add to cart</a>
+        </div>
+        </div>
+        </div>
+    </section>
+    <!-- end cta 5  -->
+
+    <!-- start cta 6 -->
+    <section class="section_divider">
+        CTA 6
+    </section>
+        <section class="w-full bg-gradient-to-b from-gray-100 to-white dark:bg-gradient-to-b dark:from-cyan-600 dark:to-gray-300">
+            <div class="w-full px-4 py-20 mx-auto text-left md:text-center md:w-3/4 lg:w-2/4">
+              <p class="mb-2 text-base font-semibold text-purple-700">Start your free trial now</p>
+              <h2 class="mb-6 text-3xl font-extrabold tracking-tight md:text-4xl md:mb-6 md:leading-tight">Sign up for a free account to organize your customer feedback.</h2>
+              <div class="mb-0 space-x-0 md:space-x-2">
+                <a class="inline-flex items-center justify-center w-full mb-2 bg-purple-800 p-2 rounded font-bold text-white hover:bg-purple-900 sm:w-auto sm:mb-0" href="#">
+                  Get Started
+                  <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                  </svg>
+                </a>
+                <a class="inline-flex items-center justify-center w-full mb-2 bg-gray-100  hover:bg-gray-300 p-2 rounded font-bold  sm:w-auto sm:mb-0" href="#">
+                  Book a Demo
+                  <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fill-rule="evenodd"
+                      d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          
+        </section>
+    <!-- end cta 6 -->
+
+    <!-- start cta 7  -->
+    <section class="section_divider">
+        CTA 7
+    </section>
+    <section class="px-0 py-12 mx-auto max-w-7xl sm:px-4">
+        <div class="text-white bg-green-800 border-green-800 rounded-none card card-body sm:rounded-lg">
+          <div class="flex flex-col items-center justify-between px-1 py-4 lg:flex-row sm:py-3 sm:px-3">
+            <p class="mb-6 text-base font-semibold lg:mb-0">Sleep peacefully knowing that your website is performing at it’s best.</p>
+            <a href="#" class="w-full text-green-800 shadow bg-gray-300 p-2 rounded text-lg sm:w-auto ">Start for free</a>
+          </div>
+        </div>
+      </section>
+      
+    
+    <!-- end cta 7  -->
+
+
+    <!-- start cta 8  -->
+    <section class="section_divider">
+        CTA 8
+    </section>
+    <section class="px-0 py-12 mx-auto max-w-7xl sm:px-4">
+        <div class="grid items-center grid-cols-1 gap-10 px-4 overflow-hidden text-pink-900 bg-pink-100 border-pink-100 rounded-none card card-body sm:rounded-lg md:px-10 md:grid-cols-5 lg:gap-0">
+          <div class="col-span-1 md:col-span-3">
+            <h2 class="mb-3 font-serif text-2xl font-normal leading-tight lg:text-3xl">Sleep peacefully knowing that your website is performing at it’s best.</h2>
+            <p class="mb-6 text-sm font-semibold lg:text-base">We deliver a guaranteed number of high-quality new leads every month. Combined with the sales tools to convert them into paying clients.</p>
+            <a href="#" class="w-full text-pink-900 shadow bg-gray-100 p-2 rounded sm:w-auto">Start for free</a>
+          </div>
+          <div class="col-span-1 md:col-span-2">
+            <img src="https://source.unsplash.com/random/640x480/?grayscale,electronics" class="h-full select-none lg:ml-48" alt="Mac App" />
+          </div>
+        </div>
+      </section>
+      
+    
+    <!-- end cta 8  -->
+
+    <!-- start cta 9 -->
+    <section class="section_divider">
+        CTA 9
+    </section>
+    <section class="text-white bg-gray-900">
+        <div class="flex flex-col items-stretch justify-between px-4 py-20 mx-auto max-w-7xl lg:flex-row sm:items-center">
+          <div>
+            <h2 class="mb-1 text-xl font-semibold text-left sm:text-2xl sm:text-center lg:text-left">Built for companies of all sizes</h2>
+            <p class="mb-6 text-lg font-normal text-left text-gray-200 sm:text-xl lg:mb-0 sm:text-center lg:text-left">Start your 14-day free trial or book a personal demo.</p>
+          </div>
+          <div class="flex flex-col mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
+            <a href="#" class="w-full py-2 px-4 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded text-lg sm:w-auto">Start free trial</a>
+            <a href="#" class="w-full py-2 px-4 bg-gray-800 border-2 border-gray-300 text-gray-300 hover:border-gray-400 hover:bg-gray-400 hover:text-gray-800 rounded text-lg sm:w-auto">Book a demo</a>
+          </div>
+        </div>
+      </section>
+      
+    
+    <!-- end cta 9 -->
+
+    <!-- start cta 10 -->
+    <section class="section_divider">
+        CTA 10
+    </section>
+    <section class="py-6 dark:bg-gray-800 dark:text-gray-50">
+        <div class="container mx-auto flex flex-col items-center justify-center p-4 space-y-8 md:p-10 lg:space-y-0 lg:flex-row lg:justify-between">
+            <h1 class="text-3xl font-semibold leading-tight text-center lg:text-left">Nobis a dolores, quia sit ad quasi dolorem in?</h1>
+            <button class="px-8 py-3 text-lg font-semibold rounded dark:bg-violet-400 dark:text-gray-900">Contact</button>
+        </div>
+    </section>
+    <!-- end cta 10 -->
+
+    <!-- start cta 11  -->
+    <section class="section_divider">
+        CTA 11
+    </section>
+    <section class="py-6 dark:bg-gray-800 dark:text-gray-50">
+        <div class="container mx-auto flex flex-col justify-around  p-4 text-center md:p-10 lg:flex-row">
+            <div class="flex flex-col justify-center lg:text-left">
+                <p class="mb-1 text-sm font-medium tracking-widest uppercase dark:text-violet-400">Hic eligendi necessitatibus quod quia</p>
+                <h1 class="py-2 text-3xl font-medium leading-tight title-font">Master Cleanse Reliac Heirloom</h1>
+            </div>
+            <div class="flex flex-col items-center justify-center flex-shrink-0 mt-6 space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 lg:ml-4 lg:mt-0 lg:justify-end">
+                <button class="inline-flex items-center px-6 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current w-7 h-7 dark:text-coolGray-900">
+                        <path d="M 5.4160156 2.328125 L 12.935547 10.158203 C 13.132547 10.363203 13.45925 10.363203 13.65625 10.158203 L 15.179688 8.5742188 C 15.405688 8.3392188 15.354312 7.956875 15.070312 7.796875 C 11.137313 5.571875 6.2620156 2.811125 5.4160156 2.328125 z M 3.140625 2.8476562 C 3.055625 3.0456562 3 3.2629063 3 3.5039062 L 3 20.591797 C 3 20.788797 3.044375 20.970625 3.109375 21.140625 L 11.576172 12.324219 C 11.762172 12.131219 11.762172 11.826813 11.576172 11.632812 L 3.140625 2.8476562 z M 17.443359 9.2578125 C 17.335484 9.2729375 17.233297 9.32375 17.154297 9.40625 L 15.015625 11.632812 C 14.829625 11.825812 14.829625 12.130219 15.015625 12.324219 L 17.134766 14.529297 C 17.292766 14.694297 17.546141 14.729188 17.744141 14.617188 C 19.227141 13.777188 20.226563 13.212891 20.226562 13.212891 C 20.725562 12.909891 21.007 12.443547 21 11.935547 C 20.992 11.439547 20.702609 10.981938 20.224609 10.710938 C 20.163609 10.676937 19.187672 10.124359 17.763672 9.3183594 C 17.664172 9.2623594 17.551234 9.2426875 17.443359 9.2578125 z M 13.296875 13.644531 C 13.165875 13.644531 13.034047 13.696328 12.935547 13.798828 L 5.4746094 21.566406 C 6.7566094 20.837406 11.328781 18.249578 15.050781 16.142578 C 15.334781 15.981578 15.386156 15.599281 15.160156 15.363281 L 13.65625 13.798828 C 13.55775 13.696328 13.427875 13.644531 13.296875 13.644531 z"></path>
+                    </svg>
+                    <span class="flex flex-col items-start ml-4 leading-none">
+                        <span class="mb-1 text-xs">GET IT ON</span>
+                        <span class="font-semibold title-font">Google Play</span>
+                    </span>
+                </button>
+                <button class="inline-flex items-center px-5 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fill-current w-7 h-7 dark:text-coolGray-900">
+                        <path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"></path>
+                    </svg>
+                    <span class="flex flex-col items-start ml-4 leading-none">
+                        <span class="mb-1 text-xs">Download on the</span>
+                        <span class="font-semibold title-font">App Store</span>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </section>
+    
+    <!-- end cta 11  -->
+
+
+    <!-- start cta 12  -->
+    <section class="section_divider">
+        CTA 12
+    </section>
+    <div class="w-full dark:bg-gray-500 bg-[url('https://source.unsplash.com/random/640x480/?grayscale')] bg-center bg-blend-multiply bg-cover">
+        <div class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:p-10">
+            <h1 class="text-5xl antialiased font-semibold leading-none text-center dark:text-gray-100">Get Our Updates</h1>
+            <p class="pt-2 pb-8 text-xl antialiased text-center dark:text-gray-100">Find out about events and other news</p>
+            <div class="flex flex-row">
+                <input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
+                <button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-gray-900">Subscribe</button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- end cta 12  -->
+
+    <!-- start cat 13  -->
+    <section class="section_divider">
+        CTA 13
+    </section>
+    <section class="py-6 dark:bg-coolGray-800 dark:text-coolGray-50">
+        <div class="container mx-auto flex flex-col justify-center p-4 space-y-8 md:p-10 lg:space-y-0 lg:space-x-12 lg:justify-between lg:flex-row">
+            <div class="flex flex-col space-y-4 text-center lg:text-left">
+                <h1 class="text-5xl font-bold leading-none">Stay in the loop</h1>
+                <p class="text-lg">Doloribus consectetur quasi ipsa quo neque culpa blanditiis ducimus recusandae a veritatis optio cumque, in harum ad nam!</p>
+            </div>
+            <div class="flex flex-row items-center self-center justify-center flex-shrink-0 shadow-md lg:justify-end">
+                <div class="flex flex-row">
+                    <input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
+                    <button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-coolGray-900">Subscribe</button>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- end cat 13  -->
+
+    <!-- start cta 14  -->
+    <section class="section_divider">
+        CTA 14
+    </section>
+    
+    <div class="container m-auto px-6 py-40 ">
+    <div class="flex flex-col md:flex-row items-center justify-between relative w-100 h-auto md:h-64 bg-100 shadow-2xl rounded-lg p-8 dark:bg-gray-800">
+        <div class="w-8/12 text-2xl">
+            <img alt="quote" class="float-left mr-1" src="https://assets-global.website-files.com/5b5a66e9f3166b36708705fa/5cf8fb1f994fb7168d0d66fb_quote-intro.svg">
+            <span class="flex dark:text-yellow-100">We are team of developers with houndreds hours spend on coding, we create professional apps, webs.</span>
+        </div>
+        <div class="relative shadow-md font-medium my-5 py-2 px-4 text-white dark:text-gray-800 cursor-pointer bg-yellow-600 hover:bg-yellow-500 rounded text-lg text-center w-48">
+            <span class="absolute h-3 right-0 top-0 animate-ping inline-flex rounded-full bg-yellow-600">
+            </span>
+            Call now
+        </div>
+    </div>
+    </div>
+    
+    <!-- end cta 14  -->
+
+    <!-- start cta 15  -->
+    <section class="section_divider">
+        CTA 15
+    </section>
+    <div class="w-full bg-indigo-700">
+        <div class="mx-auto py-16 sm:py-20 px-4 sm:px-6 lg:px-8 max-w-2xl text-center">
+          <h2 class="space-y-2 text-3xl sm:text-4xl text-white font-extrabold uppercase">Sign up now to get 10% off</h2>
+          <p class="mt-4 text-lg text-indigo-200 leading-6">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit culpa architecto quam molestiae labore, fugit, ratione dolor neque sunt iste voluptas!
+          </p>
+          <div class="mt-10 flex flex-col sm:flex-row justify-around items-center uppercase font-medium tracking-widest">
+            <a href="#link" class="relative mb-5 sm:mb-0 px-5 py-3 w-48 rounded-md shadow bg-indigo-100 text-indigo-700 transform hover:bg-white active:top-0.5">Signup</a>
+            <a href="#link" class="relative px-5 py-3 w-48 rounded-md shadow bg-indigo-500 text-indigo-100 hover:bg-indigo-600 active:top-0.5">Maybe later</a>
+          </div>
+        </div>
+      </div>
+    
+    <!-- end cta 15  -->
+
+    <!-- start cta 16  -->
+    <section class="section_divider">
+        CTA 16
+    </section>
+    <div class="mx-auto w-full max-w-6xl flex flex-col sm:flex-row bg-gray-50">
+
+        <div class="relative py-4 sm:py-10 w-full sm:w-1/2 flex justify-center items-center">
+            <!-- https://fancytailwind.com/static/sport3-ffc61a71c74b9ea62a73e6c6822e290f.jpg -->
+          <img src="https:/source.unsplash.com/random/?grayscale" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-top" />
+          <h2 class="relative text-3xl sm:text-4xl md:text-5xl lg:text-7xl text-white font-bold font-oswald uppercase tracking-tighter  sm:space-y-4" >
+            <span class="block">We don't take</span> 
+            <span class="block"> The summer off.</span> 
+            <span class="block"> We take it on.</span> 
+          </h2>
+        </div>
+  
+        <div class="relative py-4 px-5 w-full sm:w-1/2 flex justify-center items-center">
+          <img src="https://fancytailwind.com/static/sky1-2d513e4b36c6d0802a7cb3392a12eead.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover" />
+          <div class="relative my-auto w-full max-w-sm text-center">
+            <h2 class="mb-5 md:mb-10 sm:text-lg lg:text-xl text-white font-semibold uppercase tracking-wider">Exclusive summer offer</h2>
+            <div class="w-full flex flex-col lg:flex-row justify-center items-center text-xs sm:text-sm font-semibold uppercase space-y-3 lg:space-y-0">
+              <a href="#link" class="py-3 px-6 w-full lg:w-1/2 inline-block bg-black text-white transition-all duration-150 transform hover:scale-105 hover:z-10">Visit a club</a>
+              <a href="#link" class="py-3 px-6 w-full lg:w-1/2 inline-block bg-white text-black transition-all duration-150 transform hover:scale-105 hover:z-10">Member benefits</a>
+            </div>
+          </div>
+        </div>
+  
+      </div>
+    
+    <!-- end cta 16  -->
+
+
+    <!-- start cta 17 -->
+    <section class="section_divider">
+        CTA 17
+    </section>
+    <section class="flex justify-center">
+        
+        <div class="w-full max-w-3xl grid grid-cols-7 rounded-lg shadow-lg bg-white font-oswald overflow-hidden">
+      
+        <div class="col-span-7 md:col-span-3 relative w-full h-44 md:h-full bg-red-500">
+          <img src="https://fancytailwind.com/static/music1-59ae9969ef29408305c6bfca033d6724.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center filter sepia mix-blend-hard-light" />
+        </div>
+  
+        <div class="col-span-7 md:col-span-4 relative py-5 px-8 w-full h-full flex flex-col items-center justify-center">
+          <span class="text-sm text-gray-300 font-semibold uppercase tracking-wider">Join the squad</span>
+          <h2 class="py-5 uppercase text-center space-y-2">
+            <span class="block text-4xl sm:text-5xl text-gray-900 font-semibold tracking-wide">Get 20% OFF</span>
+            <span class="block text-base sm:text-lg text-gray-700 tracking-wide">Your next order</span>
+          </h2>
+          <div class="py-5 w-full max-w-xs inline-flex flex-col space-y-4 uppercase">
+            <a href="#link" class="py-2 rounded-sm bg-red-500 text-center text-white tracking-wide hover:bg-red-600">Yes, please</a>
+            <a href="#link" class="py-2 rounded-sm bg-gray-200 text-center text-gray-700 tracking-wide hover:bg-gray-300">No, thanks</a>
+          </div>
+          <span class="mt-5 text-xs text-gray-300 font-semibold uppercase tracking-wider">Limited offer, don't miss out!</span>
+        </div>
+  
+        </div>
+
+    </section>
+    
+    <!-- end cta 17 -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/10_header.html b/public/componets/navs_headers/10_header.html
new file mode 100644
index 0000000..33430a1
--- /dev/null
+++ b/public/componets/navs_headers/10_header.html
@@ -0,0 +1,279 @@
+<!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">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title>Header 8</title>
+</head>
+<body>
+    
+    
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+</button>
+
+
+
+
+
+    <!-- header 10 start -->
+    <section class="section_divider">
+        <div>Header 10</div>
+      </section>
+      <header class="z-30 w-full px-2 py-4 bg-white dark:bg-gray-800 sm:px-4">
+        <div class="flex items-center justify-between mx-auto max-w-7xl">
+          <a href="#" title=" Home Page" class="flex items-center">
+            <svg class="w-auto h-6 dark:fill-gray-300 fill-gray-800" 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=""
+              />
+              <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"
+                fill="#9E58E9"
+              />
+              <path
+                d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
+                fill="#7629C8"
+              />
+            </svg>
+            <span class="sr-only">Kutty</span>
+          </a>
+          <div class="relative hidden space-x-1 md:inline-flex" x-data="{ one: false, two: false }">
+            <div class="relative">
+              <button class="flex items-center rounded-full btn btn-sm btn-white" @click="one = true">
+                Features
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="flex-none w-4 h-4 ml-1 -mr-1 transition duration-200 ease-out transform"
+                  :class="{ 'rotate-180': one }"
+                >
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </button>
+              <div
+                class="absolute top-0 z-50 w-screen max-w-md p-2 mx-0 my-12 text-sm text-gray-800 transform bg-white rounded shadow lg:left-1/2 lg:-translate-x-1/2"
+                x-show.transition.in.opacity.out.opacity="one"
+                @click.away="one = false"
+                x-cloak
+              >
+                <div class="grid grid-cols-2 gap-2 mb-2">
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                    <p class="font-semibold">Shared Inbox</p>
+                    Manage conversations at scale
+                  </a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                    <p class="font-semibold">Reporting</p>
+                    Real-time data at your fingertips
+                  </a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                    <p class="font-semibold">Knowledge Base</p>
+                    Instant answers for customers
+                  </a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                    <p class="font-semibold">Live Chat</p>
+                    Make your website more useful
+                  </a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                    <p class="font-semibold">In-app Messaging</p>
+                    Engage people on your website
+                  </a>
+                </div>
+                <a href="#" class="flex items-center justify-center p-3 font-medium transition bg-gray-200 rounded text-primary hover:bg-gray-300">
+                  View all features
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                    class="w-4 h-4 ml-1"
+                  >
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                    <polyline points="12 5 19 12 12 19"></polyline>
+                  </svg>
+                </a>
+              </div>
+            </div>
+            <div class="relative">
+              <button class="flex items-center rounded-full btn btn-sm btn-white" @click="two = true">
+                Blog
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="flex-none w-4 h-4 ml-1 -mr-1 transition duration-200 ease-out transform"
+                  :class="{ 'rotate-180': two }"
+                >
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </button>
+              <div
+                class="absolute top-0 z-50 w-screen max-w-md p-2 mx-0 my-12 text-sm text-gray-800 transform bg-white rounded shadow lg:left-1/2 lg:-translate-x-1/2"
+                x-show.transition.in.opacity.out.opacity="two"
+                @click.away="two = false"
+                x-cloak
+              >
+                <p class="pt-2 pl-3 mb-1 text-xs font-semibold tracking-wide text-gray-500 uppercase">Our popular posts</p>
+                <div class="flex flex-col space-y-1 font-medium text-gray-800">
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary"> Enable suspect commits, unminify JS, and track releases with Vercel and Sentry </a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Asynchronous CSV Exports with Discover</a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary"> Automate Release Management with the Sentry Release GitHub Action </a>
+                  <a href="#" class="flex items-center justify-center p-3 transition bg-gray-200 rounded text-primary hover:bg-gray-300">
+                    View all blog posts
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      aria-hidden="true"
+                      class="w-4 h-4 ml-1"
+                    >
+                      <line x1="5" y1="12" x2="19" y2="12"></line>
+                      <polyline points="12 5 19 12 12 19"></polyline>
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <a href="#" class="rounded-full btn btn-sm btn-white">Pricing</a>
+          </div>
+          <div class="flex items-center space-x-1">
+            <a href="#" class="hidden rounded-full btn btn-sm btn-white md:inline-flex">Sign in</a>
+            <a href="#" class="rounded-full btn btn-sm btn-dark">Sign up</a>
+            <div class="inline-flex md:hidden" x-data="{ open: false }">
+              <button class="flex-none px-2 btn btn-white btn-sm" @click="open = true">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="w-5 h-5"
+                >
+                  <line x1="3" y1="12" x2="21" y2="12"></line>
+                  <line x1="3" y1="6" x2="21" y2="6"></line>
+                  <line x1="3" y1="18" x2="21" y2="18"></line>
+                </svg>
+                <span class="sr-only">Open Menu</span>
+              </button>
+              <div class="absolute top-0 left-0 right-0 z-50 flex flex-col p-2 m-2 space-y-1 bg-white rounded shadow" x-show.transition="open" @click.away="open = false" x-cloak>
+                <button class="self-end flex-none px-2 btn btn-link btn-icon" @click="open = false">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                  <span class="sr-only">Close Menu</span>
+                </button>
+                <div class="grid grid-cols-2 gap-1">
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Pricing</a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Blog</a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Sign in</a>
+                </div>
+                <p class="pt-2 pl-3 text-xs font-semibold tracking-wide text-gray-500 uppercase">Features</p>
+                <div class="grid grid-cols-2 gap-1">
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Shared Inbox</a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Reporting</a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Knowledge Base</a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Live Chat</a>
+                  <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">In-app Messaging</a>
+                </div>
+                <a href="#" class="flex items-center justify-center p-3 font-medium transition bg-gray-200 rounded text-primary hover:bg-gray-300">
+                  View all features
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                    class="w-4 h-4 ml-1"
+                  >
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                    <polyline points="12 5 19 12 12 19"></polyline>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      
+      <!-- Remove the div below -->
+      <div class="py-48 bg-gray-400"></div>
+      
+      
+      <!-- header 10 end -->
+  
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
\ No newline at end of file
diff --git a/public/componets/navs_headers/11_header.html b/public/componets/navs_headers/11_header.html
new file mode 100644
index 0000000..6d83f29
--- /dev/null
+++ b/public/componets/navs_headers/11_header.html
@@ -0,0 +1,76 @@
+<!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">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title>Header 8</title>
+</head>
+<body>
+    
+    
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+</button>
+
+
+
+    <!-- header 11 start -->
+    <section class="section_divider">
+        <div>Header 11</div>
+      </section>
+  
+      <nav class="bg-white shadow dark:bg-gray-800">
+        <div class="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300">
+            <a href="#" class="text-gray-800 transition-colors duration-200 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6">home</a>
+  
+            <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">features</a>
+  
+            <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">pricing</a>
+  
+            <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">blog</a>
+  
+            <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">
+                <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 11.9554V12.0446C1.01066 14.7301 1.98363 17.1885 3.59196 19.0931C4.05715 19.6439 4.57549 20.1485 5.13908 20.5987C5.70631 21.0519 6.31937 21.4501 6.97019 21.7853C7.90271 22.2656 8.91275 22.6165 9.97659 22.8143C10.5914 22.9286 11.2243 22.9918 11.8705 22.9993C11.9136 22.9998 11.9567 23 11.9999 23C15.6894 23 18.9547 21.1836 20.9502 18.3962C21.3681 17.8125 21.7303 17.1861 22.0291 16.525C22.6528 15.1448 22.9999 13.613 22.9999 12C22.9999 8.73978 21.5816 5.81084 19.3283 3.79653C18.8064 3.32998 18.2397 2.91249 17.6355 2.55132C15.9873 1.56615 14.0597 1 11.9999 1C11.888 1 11.7764 1.00167 11.6653 1.00499C9.99846 1.05479 8.42477 1.47541 7.0239 2.18719C6.07085 2.67144 5.19779 3.29045 4.42982 4.01914C3.7166 4.69587 3.09401 5.4672 2.58216 6.31302C2.22108 6.90969 1.91511 7.54343 1.6713 8.20718C1.24184 9.37631 1.00523 10.6386 1 11.9554ZM20.4812 15.0186C20.8171 14.075 20.9999 13.0588 20.9999 12C20.9999 9.54265 20.0151 7.31533 18.4186 5.6912C17.5975 7.05399 16.5148 8.18424 15.2668 9.0469C15.7351 10.2626 15.9886 11.5603 16.0045 12.8778C16.7692 13.0484 17.5274 13.304 18.2669 13.6488C19.0741 14.0252 19.8141 14.487 20.4812 15.0186ZM15.8413 14.8954C16.3752 15.0321 16.904 15.22 17.4217 15.4614C18.222 15.8346 18.9417 16.3105 19.5723 16.8661C18.0688 19.2008 15.5151 20.7953 12.5788 20.9817C13.5517 20.0585 14.3709 18.9405 14.972 17.6514C15.3909 16.7531 15.678 15.8272 15.8413 14.8954ZM13.9964 12.6219C13.9583 11.7382 13.7898 10.8684 13.5013 10.0408C10.6887 11.2998 7.36584 11.3765 4.35382 9.97197C4.01251 9.81281 3.68319 9.63837 3.36632 9.44983C3.12787 10.2584 2.99991 11.1142 2.99991 12C2.99991 13.9462 3.61763 15.748 4.6677 17.2203C6.83038 14.1875 10.3685 12.4987 13.9964 12.6219ZM6.047 18.7502C7.77258 16.059 10.7714 14.5382 13.8585 14.6191C13.723 15.3586 13.4919 16.093 13.1594 16.8062C12.3777 18.4825 11.1453 19.805 9.67385 20.6965C8.31043 20.3328 7.07441 19.6569 6.047 18.7502ZM11.9999 3C13.7846 3 15.4479 3.51946 16.847 4.41543C16.2113 5.54838 15.3593 6.4961 14.368 7.23057C13.3472 5.57072 11.8752 4.16433 10.027 3.21692C10.6619 3.07492 11.3222 3 11.9999 3ZM8.80619 4.84582C10.4462 5.61056 11.7474 6.80659 12.6379 8.23588C10.3464 9.24654 7.64722 9.30095 5.19906 8.15936C4.83384 7.98905 4.48541 7.79735 4.15458 7.58645C4.91365 6.24006 6.00929 5.10867 7.32734 4.30645C7.82672 4.44058 8.32138 4.61975 8.80619 4.84582Z" fill="currentColor" /></svg>
+            </a>
+  
+            <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">
+                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m.75 19h7.092c4.552 0 6.131-6.037 2.107-8.203 2.701-2.354 1.029-6.797-2.595-6.797h-6.604c-.414 0-.75.336-.75.75v13.5c0 .414.336.75.75.75zm.75-13.5h5.854c3.211 0 3.215 4.768 0 4.768h-5.854zm0 6.268h6.342c3.861 0 3.861 5.732 0 5.732h-6.342z"/><path d="m18.374 7.857c-3.259 0-5.755 2.888-5.635 5.159-.247 3.28 2.397 5.984 5.635 5.984 2.012 0 3.888-1.065 4.895-2.781.503-.857-.791-1.613-1.293-.76-.739 1.259-2.12 2.041-3.602 2.041-2.187 0-3.965-1.668-4.125-3.771 1.443.017 4.136-.188 8.987-.033.016 0 .027-.008.042-.008 2-.09-.189-5.831-4.904-5.831zm-3.928 4.298c1.286-3.789 6.718-3.676 7.89.064-4.064.097-6.496-.066-7.89-.064z"/><path d="m21.308 6.464c.993 0 .992-1.5 0-1.5h-5.87c-.993 0-.992 1.5 0 1.5z"/></svg>
+            </a>
+        </div>
+    </nav>
+      
+      <!-- header 11 end -->
+  
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
\ No newline at end of file
diff --git a/public/componets/navs_headers/12_header.html b/public/componets/navs_headers/12_header.html
new file mode 100644
index 0000000..47bff0f
--- /dev/null
+++ b/public/componets/navs_headers/12_header.html
@@ -0,0 +1,96 @@
+<!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">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title>Header 8</title>
+</head>
+<body>
+    
+    
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+</button>
+
+
+
+    <!-- header 12 start -->
+
+    <section class="section_divider">
+      <div>Header 12</div>
+    </section>
+
+    <nav class="bg-white shadow dark:bg-gray-800">
+      <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
+          <div class="flex items-center justify-between">
+              <div>
+                  <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+              </div>
+              
+              <!-- Mobile menu button -->
+              <div class="flex md:hidden">
+                  <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                      <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                          <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                      </svg>
+                  </button>
+              </div>
+          </div>
+
+          <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+          <div class="items-center md:flex">
+              <div class="flex flex-col md:flex-row md:mx-6">
+                  <a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Home</a>
+                  <a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Shop</a>
+                  <a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Contact</a>
+                  <a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">About</a>
+              </div>
+
+              <div class="flex justify-center md:block">
+                  <a class="relative text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
+                      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+
+                      <span class="absolute top-3 left-0 p-1 text-xs text-white bg-blue-500 rounded-full"></span>
+                  </a>
+              </div>
+          </div>
+      </div>
+    </nav>
+
+    <!-- header 12 end -->
+
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
\ No newline at end of file
diff --git a/public/componets/navs_headers/13_header.html b/public/componets/navs_headers/13_header.html
new file mode 100644
index 0000000..fa5171d
--- /dev/null
+++ b/public/componets/navs_headers/13_header.html
@@ -0,0 +1,49 @@
+<!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">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
+    <title>Header 8</title>
+</head>
+<body>
+    
+    
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+</button>
+
+
+
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
\ No newline at end of file
diff --git a/public/componets/navs_headers/1_header.html b/public/componets/navs_headers/1_header.html
index 2e2d88c..1e13500 100644
--- a/public/componets/navs_headers/1_header.html
+++ b/public/componets/navs_headers/1_header.html
@@ -71,25 +71,32 @@
     <!-- header 1 end -->
     
 
+
 <!-- start of script section -->
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");
     let doc_html_el = document.getElementsByTagName('html')[0];
-
+  
     doc_html_el.addEventListener('keyup',(e)=>{
         // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
         if(e.ctrlKey && e.keyCode =='220'){
           doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
-
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
         }
     })
     toogler.addEventListener('click',()=>{
       doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
       console.log(doc_html_el.className);
     })
-</script>
-<!-- end of script section -->
-
-
+  </script>
+  <!-- end of script section -->
+  
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/2_header.html b/public/componets/navs_headers/2_header.html
index 968325d..d9c8c74 100644
--- a/public/componets/navs_headers/2_header.html
+++ b/public/componets/navs_headers/2_header.html
@@ -5,7 +5,7 @@
     <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>
+    <title>footer 2</title>
 </head>
 <body>
     <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
@@ -14,71 +14,77 @@
     
     <!-- header 2 start -->
     <section class="section_divider">
-        <div>Header 2</div>
-    </section>
-    <section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-800 body-font">
-        <div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
-          <a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
-      
-          <nav class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base md:-ml-5 md:py-0 md:absolute">
-            <a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
-              <span class="block">Home</span>
-              <span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
-                <span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform dark:bg-gray-400 bg-gray-900" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
-              </span>
-            </a>
-            <a href="#_" class="relative font-medium leading-6 dark:text-gray-400 dark:hover:text-gray-200 text-gray-600 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
-              <span class="block">Features</span>
-              <span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
-                <span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
-              </span>
-            </a>
-            <a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
-              <span class="block">Pricing</span>
-              <span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
-                <span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
-              </span>
-            </a>
-            <a href="#_" class="relative font-medium leading-6 text-gray-600 transition duration-150 ease-out hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
-              <span class="block">Blog</span>
-              <span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
-                <span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
-              </span>
-            </a>
-          </nav>
-      
-          <div class="relative z-10 inline-flex items-center space-x-3 md:ml-5 lg:justify-end">
-            <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none">
-              Sign in
-            </a>
-            <span class="inline-flex rounded-md shadow-sm">
-              <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                Sign up
-              </a>
+      <div>Header 2</div>
+  </section>
+  <section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-800 body-font">
+      <div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
+        <a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
+    
+        <nav class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base md:-ml-5 md:py-0 md:absolute">
+          <a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
+            <span class="block">Home</span>
+            <span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
+              <span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform dark:bg-gray-400 bg-gray-900" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
             </span>
-          </div>
+          </a>
+          <a href="#_" class="relative font-medium leading-6 dark:text-gray-400 dark:hover:text-gray-200 text-gray-600 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
+            <span class="block">Features</span>
+            <span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
+              <span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
+            </span>
+          </a>
+          <a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
+            <span class="block">Pricing</span>
+            <span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
+              <span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
+            </span>
+          </a>
+          <a href="#_" class="relative font-medium leading-6 text-gray-600 transition duration-150 ease-out hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
+            <span class="block">Blog</span>
+            <span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
+              <span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
+            </span>
+          </a>
+        </nav>
+    
+        <div class="relative z-10 inline-flex items-center space-x-3 md:ml-5 lg:justify-end">
+          <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none">
+            Sign in
+          </a>
+          <span class="inline-flex rounded-md shadow-sm">
+            <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+              Sign up
+            </a>
+          </span>
         </div>
-      </section>
-    
-    <!-- header 2 end -->
-    
-
+      </div>
+    </section>
+  
+  <!-- header 2 end -->
+  
 <!-- start of script section -->
 <script type="text/javascript">
-    let toogler = document.getElementById("dark_mood_toogler");
-    let doc_html_el = document.getElementsByTagName('html')[0];
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
 
-    doc_html_el.addEventListener('keyup',(e)=>{
-        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
-        if(e.ctrlKey && e.keyCode =='220'){
-          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
 
-        }
-    })
-    toogler.addEventListener('click',()=>{
-      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
-      console.log(doc_html_el.className);
-    })
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
 </script>
 <!-- end of script section -->
 
diff --git a/public/componets/navs_headers/3_header.html b/public/componets/navs_headers/3_header.html
index 97f4253..0efbaf8 100644
--- a/public/componets/navs_headers/3_header.html
+++ b/public/componets/navs_headers/3_header.html
@@ -46,21 +46,28 @@
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");
     let doc_html_el = document.getElementsByTagName('html')[0];
-
+  
     doc_html_el.addEventListener('keyup',(e)=>{
         // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
         if(e.ctrlKey && e.keyCode =='220'){
           doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
-
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
         }
     })
     toogler.addEventListener('click',()=>{
       doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
       console.log(doc_html_el.className);
     })
-</script>
-<!-- end of script section -->
-
+  </script>
+  <!-- end of script section -->
+  
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/4_header.html b/public/componets/navs_headers/4_header.html
index 6fa6bc5..11a1056 100644
--- a/public/componets/navs_headers/4_header.html
+++ b/public/componets/navs_headers/4_header.html
@@ -118,5 +118,33 @@
     <!-- header 4 end  -->
 
 
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/5_header.html b/public/componets/navs_headers/5_header.html
index bb900a8..50e92e2 100644
--- a/public/componets/navs_headers/5_header.html
+++ b/public/componets/navs_headers/5_header.html
@@ -26,5 +26,34 @@
 
 
 
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+
+
+
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/6_header.html b/public/componets/navs_headers/6_header.html
index a4150d4..df5fbf7 100644
--- a/public/componets/navs_headers/6_header.html
+++ b/public/componets/navs_headers/6_header.html
@@ -5,48 +5,73 @@
     <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">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
     <title>Header 6</title>
 </head>
 <body>
     
     
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+</button>
     <!-- header 6 start -->
     
     <section class="section_divider">
-        <div>Header 6</div>
-    </section>
-    <header class="z-30 w-full px-2 py-4 bg-white sm:px-4 dark:bg-gray-800">
-        <div class="flex items-center justify-between mx-auto max-w-7xl">
-          <a href="/" title="Kutty Home Page" class="flex items-center">
-            <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=""
-              />
-              <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"
-                fill="#9E58E9"
-              />
-              <path
-                d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
-                fill="#7629C8"
-              />
-            </svg>
-            <span class="sr-only">Kutty</span>
-          </a>
-          <div class="flex items-center space-x-1">
-            <div class="hidden space-x-1 md:inline-flex mr-5">
-              <a href="#f" class=" rounded-lg  font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Features</a>
-              <a href="#fd" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Pricing</a>
-              <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Blog</a>
-              <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Company</a>
-              <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Sign in</a>
-            </div>
-            <a href="#d" class="p-1 rounded ring-2 bg-blue-600 text-white text-sm hover:bg-blue-700">Get Started</a>
-            <div class="inline-flex md:hidden" x-data="{ open: false }">
-              <button class="flex-none px-2 btn btn-link btn-sm" @click="open = true">
+      <div>Header 6</div>
+  </section>
+  <header class="z-30 w-full px-2 py-4 bg-white sm:px-4 dark:bg-gray-800">
+      <div class="flex items-center justify-between mx-auto max-w-7xl">
+        <a href="/" title="Kutty Home Page" class="flex items-center">
+          <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=""
+            />
+            <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"
+              fill="#9E58E9"
+            />
+            <path
+              d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
+              fill="#7629C8"
+            />
+          </svg>
+          <span class="sr-only">Kutty</span>
+        </a>
+        <div class="flex items-center space-x-1">
+          <div class="hidden space-x-1 md:inline-flex mr-5">
+            <a href="#f" class=" rounded-lg  font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Features</a>
+            <a href="#fd" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Pricing</a>
+            <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Blog</a>
+            <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Company</a>
+            <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Sign in</a>
+          </div>
+          <a href="#d" class="p-1 rounded ring-2 bg-blue-600 text-white text-sm hover:bg-blue-700">Get Started</a>
+          <div class="inline-flex md:hidden" x-data="{ open: false }">
+            <button class="flex-none px-2 btn btn-link btn-sm" @click="open = true">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+                class="w-5 h-5"
+              >
+                <line x1="3" y1="12" x2="21" y2="12"></line>
+                <line x1="3" y1="6" x2="21" y2="6"></line>
+                <line x1="3" y1="18" x2="21" y2="18"></line>
+              </svg>
+              <span class="sr-only">Open Menu</span>
+            </button>
+            <div class="absolute top-0 left-0 right-0 z-50 flex flex-col p-2 pb-4 m-2 space-y-3 bg-white rounded shadow" x-show.transition="open" @click.away="open = false" x-cloak>
+              <button class="self-end flex-none px-2 ml-2 btn btn-link btn-icon" @click="open = false">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
@@ -54,47 +79,52 @@
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   aria-hidden="true"
-                  class="w-5 h-5"
                 >
-                  <line x1="3" y1="12" x2="21" y2="12"></line>
-                  <line x1="3" y1="6" x2="21" y2="6"></line>
-                  <line x1="3" y1="18" x2="21" y2="18"></line>
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
                 </svg>
-                <span class="sr-only">Open Menu</span>
+                <span class="sr-only">Close Menu</span>
               </button>
-              <div class="absolute top-0 left-0 right-0 z-50 flex flex-col p-2 pb-4 m-2 space-y-3 bg-white rounded shadow" x-show.transition="open" @click.away="open = false" x-cloak>
-                <button class="self-end flex-none px-2 ml-2 btn btn-link btn-icon" @click="open = false">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    aria-hidden="true"
-                  >
-                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                  </svg>
-                  <span class="sr-only">Close Menu</span>
-                </button>
-                <a href="#" class="w-full font-semibold hover:bg-gray-600">Features</a>
-                <a href="#" class="w-full btn btn-link">Pricing</a>
-                <a href="#" class="w-full btn btn-link">Blog</a>
-                <a href="#" class="w-full btn btn-link">Company</a>
-                <a href="#" class="w-full btn btn-link">Sign in</a>
-              </div>
+              <a href="#" class="w-full font-semibold hover:bg-gray-600">Features</a>
+              <a href="#" class="w-full btn btn-link">Pricing</a>
+              <a href="#" class="w-full btn btn-link">Blog</a>
+              <a href="#" class="w-full btn btn-link">Company</a>
+              <a href="#" class="w-full btn btn-link">Sign in</a>
             </div>
           </div>
         </div>
-      </header>
+      </div>
+    </header>
 
 <!-- header 6 end -->
 
 
+<!-- start of script section -->
+<script type="text/javascript">
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
+
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
+</script>
+<!-- end of script section -->
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/7_header.html b/public/componets/navs_headers/7_header.html
index f354276..67ee9ca 100644
--- a/public/componets/navs_headers/7_header.html
+++ b/public/componets/navs_headers/7_header.html
@@ -5,14 +5,20 @@
     <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">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
     <title>Header 7</title>
 </head>
 <body>
     
     
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+</button>
+
 
     <!-- header 7 start -->
-    <section class="section_divider">
+      <section class="section_divider">
         <div>Header 7</div>
       </section>
       <section class=" dark:bg-gray-800 ">
@@ -40,7 +46,7 @@
             </ul>
             <!-- Mobile menu -->
             <div class="lg:hidden">
-              <button aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline hover:bg-deep-purple-50 focus:bg-deep-purple-50">
+              <button aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline hover:bg-purple-50 focus:bg-purple-50">
                 <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
                   <path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
                   <path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
@@ -100,9 +106,36 @@
         </div>
       </section>
       
-      <!-- header 7 end -->
+    <!-- header 7 end -->
   
 
+<!-- start of script section -->
+<script type="text/javascript">
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
+
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
+</script>
+<!-- end of script section -->
+
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/8_header.html b/public/componets/navs_headers/8_header.html
index 83bd5bc..b850800 100644
--- a/public/componets/navs_headers/8_header.html
+++ b/public/componets/navs_headers/8_header.html
@@ -10,6 +10,12 @@
 <body>
     
     
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+</button>
+
+
+
     <!-- header 8 start -->
     <section class="section_divider">
         <div>Header 8</div>
@@ -106,6 +112,32 @@
       
       <!-- header 8 end -->
   
+<!-- start of script section -->
+<script type="text/javascript">
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
+
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
+</script>
+<!-- end of script section -->
+
       
 
 
diff --git a/public/componets/navs_headers/9_header.html b/public/componets/navs_headers/9_header.html
new file mode 100644
index 0000000..51ea3ef
--- /dev/null
+++ b/public/componets/navs_headers/9_header.html
@@ -0,0 +1,90 @@
+<!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>Header 8</title>
+</head>
+<body>
+    
+    
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+</button>
+
+    <!-- header 9 start -->
+    <section class="section_divider">
+        <div>Header 9</div>
+      </section>
+      <header class="p-4 dark:bg-gray-800 dark:text-gray-100">
+        <div class="container flex justify-between h-16 mx-auto">
+          <ul class="items-stretch hidden space-x-3 lg:flex">
+            <li class="flex">
+              <a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 border-transparent text-indigo-400 border-indigo-400">Link</a>
+            </li>
+            <li class="flex">
+              <a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent">Link</a>
+            </li>
+            <li class="flex">
+              <a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent">Link</a>
+            </li>
+          </ul>
+          <a rel="noopener noreferrer" href="#" aria-label="Back to homepage" class="flex items-center p-2">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-8 h-8 text-black dark:text-indigo-400">
+              <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
+              <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+            </svg>
+          </a>
+          <div class="flex items-center md:space-x-4">
+            <div class="relative">
+              <span class="absolute inset-y-0 left-0 flex items-center pl-2">
+                <button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
+                  <svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-coolGray-100">
+                    <path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
+                  </svg>
+                </button>
+              </span>
+              <input type="search" name="Search" placeholder="Search..." class="w-32 py-2 pl-10 text-sm border rounded-md sm:w-auto focus:outline-none  dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
+            </div>
+            <button type="button" class=" px-6 py-2 font-semibold rounded lg:block bg-indigo-500 dark:bg-indigo-400 dark:text-gray-900">Log in</button>
+          </div>
+          <button title="Open menu" type="button" class="p-4 lg:hidden">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 dark:text-coolGray-100">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+            </svg>
+          </button>
+        </div>
+      </header>
+      
+      <!-- header 9 end -->
+  
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
\ No newline at end of file
diff --git a/public/componets/navs_headers/header.html b/public/componets/navs_headers/header.html
index 55b993f..495c4f5 100644
--- a/public/componets/navs_headers/header.html
+++ b/public/componets/navs_headers/header.html
@@ -5,6 +5,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">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
+    </script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
     <title>Header </title>
 </head>
 <body>
@@ -120,6 +122,8 @@
     
     <!-- header 2 end -->
     
+
+
     <!-- header 3 start -->
     <section class="section_divider">
         <div>Header 3</div>
@@ -1478,20 +1482,27 @@
 
 <!-- start of script section -->
 <script type="text/javascript">
-    let toogler = document.getElementById("dark_mood_toogler");
-    let doc_html_el = document.getElementsByTagName('html')[0];
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
 
-    doc_html_el.addEventListener('keyup',(e)=>{
-        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
-        if(e.ctrlKey && e.keyCode =='220'){
-          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
 
-        }
-    })
-    toogler.addEventListener('click',()=>{
-      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
-      console.log(doc_html_el.className);
-    })
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
 </script>
 <!-- end of script section -->
 
diff --git a/public/componets/pricing/2_pricing.html b/public/componets/pricing/2_pricing.html
index cdb3780..096e240 100644
--- a/public/componets/pricing/2_pricing.html
+++ b/public/componets/pricing/2_pricing.html
@@ -152,8 +152,8 @@
                             </div>
                         </div>
                     </div>
-                    <div class="flex w-64 h-full bg-blue-500 dark:border-l-2  bg-opacity-25 rounded-r md:flex-shrink"
-                        style="background: url('https://picsum.photos/400/400?grayscale');"></div>
+                    <div class="flex w-64 h-full bg-blue-500 dark:border-l-2  bg-opacity-25 rounded-r md:flex-shrink bg-[url(https://picsum.photos/400/400?grayscale)]"
+                       ></div>
                 </div>
                 <div x-show="toggle === 'silver'"
                     class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
diff --git a/public/componets/pricing/pricing.html b/public/componets/pricing/pricing.html
index 72750c2..6e272fa 100644
--- a/public/componets/pricing/pricing.html
+++ b/public/componets/pricing/pricing.html
@@ -250,8 +250,8 @@
                           </div>
                       </div>
                   </div>
-                  <div class="flex w-64 h-full bg-blue-500 dark:border-l-2  bg-opacity-25 rounded-r md:flex-shrink"
-                      style="background: url('https://picsum.photos/400/400?grayscale');"></div>
+                  <div class="flex w-64 h-full bg-blue-500 dark:border-l-2  bg-opacity-25 rounded-r md:flex-shrink bg-[url(https://picsum.photos/400/400?grayscale)]"
+                     ></div>
               </div>
               <div x-show="toggle === 'silver'"
                   class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">