diff --git a/dist/tailshape.css b/dist/tailshape.css
index d540960..a3a557c 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -546,6 +546,13 @@ Ensure the default browser behavior of the `hidden` attribute.
   left: 0px;
 }
 
+.inset-2\/4 {
+  top: 50%;
+  right: 50%;
+  bottom: 50%;
+  left: 50%;
+}
+
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -712,6 +719,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   left: -0.25rem;
 }
 
+.left-60 {
+  left: 15rem;
+}
+
+.top-\[50\%\] {
+  top: 50%;
+}
+
+.top-\[6\%\] {
+  top: 6%;
+}
+
+.top-60 {
+  top: 15rem;
+}
+
+.top-10 {
+  top: 2.5rem;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -740,6 +767,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   z-index: 50;
 }
 
+.z-\[1000\] {
+  z-index: 1000;
+}
+
 .order-1 {
   order: 1;
 }
@@ -961,11 +992,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: 8rem;
 }
 
-.mx-16 {
-  margin-left: 4rem;
-  margin-right: 4rem;
-}
-
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1155,6 +1181,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 0.75rem;
 }
 
+.-mr-0 {
+  margin-right: -0px;
+}
+
 .mt-24 {
   margin-top: 6rem;
 }
@@ -1179,6 +1209,30 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 4rem;
 }
 
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.ml-0 {
+  margin-left: 0px;
+}
+
+.mr-0 {
+  margin-right: 0px;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.-mt-20 {
+  margin-top: -5rem;
+}
+
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
 .-mt-5 {
   margin-top: -1.25rem;
 }
@@ -1195,10 +1249,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 1.5rem;
 }
 
-.-mt-20 {
-  margin-top: -5rem;
-}
-
 .mt-28 {
   margin-top: 7rem;
 }
@@ -1243,8 +1293,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: -16rem;
 }
 
-.ml-0 {
-  margin-left: 0px;
+.-mt-24 {
+  margin-top: -6rem;
+}
+
+.-mr-10 {
+  margin-right: -2.5rem;
 }
 
 .mt-auto {
@@ -1271,10 +1325,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: -0.5rem;
 }
 
-.mr-0 {
-  margin-right: 0px;
-}
-
 .mt-48 {
   margin-top: 12rem;
 }
@@ -1311,10 +1361,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: -1.5rem;
 }
 
-.-mt-1 {
-  margin-top: -0.25rem;
-}
-
 .mr-11 {
   margin-right: 2.75rem;
 }
@@ -1323,10 +1369,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: -4rem;
 }
 
-.-ml-2 {
-  margin-left: -0.5rem;
-}
-
 .mr-auto {
   margin-right: auto;
 }
@@ -1343,10 +1385,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 1.75rem;
 }
 
-.ml-10 {
-  margin-left: 2.5rem;
-}
-
 .ml-20 {
   margin-left: 5rem;
 }
@@ -1355,18 +1393,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: -0.75rem;
 }
 
-.-mt-24 {
-  margin-top: -6rem;
-}
-
-.-mr-10 {
-  margin-right: -2.5rem;
-}
-
-.-mr-0 {
-  margin-right: -0px;
-}
-
 .block {
   display: block;
 }
@@ -1555,12 +1581,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 0.375rem;
 }
 
-.h-max {
-  height: -webkit-max-content;
-  height: -moz-max-content;
-  height: max-content;
-}
-
 .max-h-0 {
   max-height: 0px;
 }
@@ -1573,10 +1593,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-height: 100%;
 }
 
-.max-h-10 {
-  max-height: 2.5rem;
-}
-
 .min-h-screen {
   min-height: 100vh;
 }
@@ -1681,6 +1697,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 5rem;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .w-32 {
   width: 8rem;
 }
@@ -1729,10 +1749,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 20%;
 }
 
-.w-screen {
-  width: 100vw;
-}
-
 .w-80 {
   width: 20rem;
 }
@@ -1811,6 +1827,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 0.375rem;
 }
 
+.w-4\/12 {
+  width: 33.333333%;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -2049,6 +2069,11 @@ 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));
 }
 
+.rotate-90 {
+  --tw-rotate: 90deg;
+  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));
+}
+
 .-rotate-45 {
   --tw-rotate: -45deg;
   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));
@@ -2069,11 +2094,6 @@ 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));
 }
 
-.rotate-90 {
-  --tw-rotate: 90deg;
-  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));
-}
-
 .-skew-x-3 {
   --tw-skew-x: -3deg;
   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));
@@ -2274,6 +2294,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   grid-template-columns: repeat(8, minmax(0, 1fr));
 }
 
+.grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -2302,10 +2330,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   place-content: center;
 }
 
-.place-items-start {
-  place-items: start;
-}
-
 .place-items-center {
   place-items: center;
 }
@@ -2358,6 +2382,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   justify-content: space-evenly;
 }
 
+.justify-items-end {
+  justify-items: end;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
@@ -2568,12 +2596,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.-space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(-0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(-0.5rem * var(--tw-space-y-reverse));
-}
-
 .space-y-reverse > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 1;
 }
@@ -2832,6 +2854,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-width: 2px;
 }
 
+.border-y-0 {
+  border-top-width: 0px;
+  border-bottom-width: 0px;
+}
+
+.border-x-0 {
+  border-left-width: 0px;
+  border-right-width: 0px;
+}
+
 .border-b-0 {
   border-bottom-width: 0px;
 }
@@ -2982,6 +3014,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(96 165 250 / var(--tw-border-opacity));
 }
 
+.border-indigo-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+}
+
+.border-purple-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(168 85 247 / var(--tw-border-opacity));
+}
+
+.border-teal-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(20 184 166 / var(--tw-border-opacity));
+}
+
 .border-gray-800 {
   --tw-border-opacity: 1;
   border-color: rgb(31 41 55 / var(--tw-border-opacity));
@@ -3035,11 +3082,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(45 212 191 / var(--tw-border-opacity));
 }
 
-.border-purple-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
-}
-
 .border-blue-700 {
   --tw-border-opacity: 1;
   border-color: rgb(29 78 216 / var(--tw-border-opacity));
@@ -3064,11 +3106,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(107 33 168 / var(--tw-border-opacity));
 }
 
-.border-indigo-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
-
 .border-purple-200 {
   --tw-border-opacity: 1;
   border-color: rgb(233 213 255 / var(--tw-border-opacity));
@@ -3094,11 +3131,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(110 231 183 / var(--tw-border-opacity));
 }
 
-.border-teal-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 184 166 / var(--tw-border-opacity));
-}
-
 .border-r-gray-200 {
   --tw-border-opacity: 1;
   border-right-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -3263,6 +3295,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(252 231 243 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+}
+
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -3278,6 +3315,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
+}
+
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
+
+.bg-teal-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+}
+
 .bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -3317,11 +3369,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(147 51 234 / var(--tw-bg-opacity));
 }
 
-.bg-teal-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
-}
-
 .bg-gray-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
@@ -3347,11 +3394,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
-.bg-purple-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
-}
-
 .bg-indigo-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(199 210 254 / var(--tw-bg-opacity));
@@ -3412,11 +3454,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(16 185 129 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
-}
-
 .bg-green-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(240 253 244 / var(--tw-bg-opacity));
@@ -3502,11 +3539,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(110 231 183 / var(--tw-bg-opacity));
 }
 
-.bg-blue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
-
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -3522,11 +3554,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(204 251 241 / var(--tw-bg-opacity));
 }
 
-.bg-red-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-5 {
   --tw-bg-opacity: 0.05;
 }
@@ -4119,6 +4146,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 0.75rem;
 }
 
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -4163,10 +4194,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 1rem;
 }
 
-.pb-20 {
-  padding-bottom: 5rem;
-}
-
 .pt-\[120px\] {
   padding-top: 120px;
 }
@@ -4199,6 +4226,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-top: 12rem;
 }
 
+.pl-0 {
+  padding-left: 0px;
+}
+
 .pt-0\.5 {
   padding-top: 0.125rem;
 }
@@ -4223,6 +4254,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 0px;
 }
 
+.pb-56 {
+  padding-bottom: 14rem;
+}
+
 .pr-1 {
   padding-right: 0.25rem;
 }
@@ -4239,14 +4274,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 2.75rem;
 }
 
-.pl-0 {
-  padding-left: 0px;
-}
-
-.pb-56 {
-  padding-bottom: 14rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -4578,6 +4605,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.text-yellow-900 {
+  --tw-text-opacity: 1;
+  color: rgb(113 63 18 / var(--tw-text-opacity));
+}
+
 .text-orange-500 {
   --tw-text-opacity: 1;
   color: rgb(249 115 22 / var(--tw-text-opacity));
@@ -4603,6 +4635,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgb(250 204 21 / var(--tw-text-opacity));
+}
+
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.text-teal-500 {
+  --tw-text-opacity: 1;
+  color: rgb(20 184 166 / var(--tw-text-opacity));
+}
+
 .text-pink-600 {
   --tw-text-opacity: 1;
   color: rgb(219 39 119 / var(--tw-text-opacity));
@@ -4673,11 +4720,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
 .text-green-700 {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
@@ -4707,11 +4749,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
-.text-yellow-400 {
-  --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity));
-}
-
 .text-cyan-800 {
   --tw-text-opacity: 1;
   color: rgb(21 94 117 / var(--tw-text-opacity));
@@ -4792,16 +4829,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(13 148 136 / var(--tw-text-opacity));
 }
 
-.text-teal-500 {
-  --tw-text-opacity: 1;
-  color: rgb(20 184 166 / var(--tw-text-opacity));
-}
-
-.text-yellow-900 {
-  --tw-text-opacity: 1;
-  color: rgb(113 63 18 / var(--tw-text-opacity));
-}
-
 .text-red-50 {
   --tw-text-opacity: 1;
   color: rgb(254 242 242 / var(--tw-text-opacity));
@@ -4817,11 +4844,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(185 28 28 / var(--tw-text-opacity));
 }
 
-.text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
-}
-
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
@@ -5091,6 +5113,11 @@ 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-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+  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);
@@ -5145,6 +5172,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 150ms;
 }
 
+.delay-100 {
+  transition-delay: 100ms;
+}
+
+.delay-200 {
+  transition-delay: 200ms;
+}
+
+.delay-1000 {
+  transition-delay: 1000ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -5169,6 +5208,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 100ms;
 }
 
+.duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -5312,6 +5355,31 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.before\:content-\[\'-\'\]::before {
+  --tw-content: '-';
+  content: var(--tw-content);
+}
+
+.before\:content-\[\'--\'\]::before {
+  --tw-content: '--';
+  content: var(--tw-content);
+}
+
+.before\:content-\[\'-\'\'\'\]::before {
+  --tw-content: '-''';
+  content: var(--tw-content);
+}
+
+.before\:content-\[\'-\'\'\'\'\'\]::before {
+  --tw-content: '-''''';
+  content: var(--tw-content);
+}
+
+.before\:content-\[\'-\'\'\'\'\'\'\'\]::before {
+  --tw-content: '-''''''';
+  content: var(--tw-content);
+}
+
 .after\:content-\[\'\+\'\]::after {
   --tw-content: '+';
   content: var(--tw-content);
@@ -5378,6 +5446,18 @@ 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-50:hover {
+  --tw-scale-x: .5;
+  --tw-scale-y: .5;
+  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-125:hover {
+  --tw-scale-x: 1.25;
+  --tw-scale-y: 1.25;
+  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\:cursor-pointer:hover {
   cursor: pointer;
 }
@@ -5399,6 +5479,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-right-width: 0px;
 }
 
+.hover\:border-y-2:hover {
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+}
+
+.hover\:border-x-2:hover {
+  border-left-width: 2px;
+  border-right-width: 2px;
+}
+
 .hover\:border-b-2:hover {
   border-bottom-width: 2px;
 }
@@ -5595,6 +5685,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-yellow-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -5640,11 +5735,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-yellow-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-opacity-90:hover {
   --tw-bg-opacity: 0.9;
 }
@@ -5676,6 +5766,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .hover\:text-blue-600:hover {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -5751,11 +5846,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .hover\:text-orange-500:hover {
   --tw-text-opacity: 1;
   color: rgb(249 115 22 / var(--tw-text-opacity));
@@ -5866,6 +5956,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(126 34 206 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-50:hover {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
 .hover\:text-opacity-75:hover {
   --tw-text-opacity: 0.75;
 }
@@ -5884,10 +5979,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   opacity: 0.75;
 }
 
-.hover\:opacity-20:hover {
-  opacity: 0.2;
-}
-
 .hover\:shadow-md:hover {
   --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);
@@ -7369,6 +7460,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.dark .dark\:shadow-white {
+  --tw-shadow-color: #fff;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-cyan-300 {
+  --tw-shadow-color: #67e8f9;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .dark .dark\: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);
@@ -7405,6 +7506,86 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
 
+.dark .dark\: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);
+}
+
+.dark .dark\:drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[\] {
+  --tw-drop-shadow: drop-shadow();
+  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);
+}
+
+.dark .dark\:drop-shadow-\[red\] {
+  --tw-drop-shadow: drop-shadow(red);
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgb\(0\2c 0\2c 0\2c 0\.04\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0,0,0,0.04));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0,0,0,0.04));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba());
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(\.26\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(.26));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(\.40\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(.40));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(\.4\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(.4));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(229\2c 171\2c 159\2c 0\.4\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(229,171,159,0.4));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(229\2c 171\2c 159\2c 0\.25\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(229,171,159,0.25));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(229\2c 171\2c 159\2c 0\.4s\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(229,171,159,0.4s));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(209\2c 213\2c 219\2c 0\.4\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(209,213,219,0.4));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(209\2c 213\2c 219\2c 0\.2\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(209,213,219,0.2));
+  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);
+}
+
+.dark .dark\:drop-shadow-\[0_10px_8px_rgba\(209\2c 213\2c 219\2c 0\.1\)\] {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(209,213,219,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);
+}
+
 .dark .dark\:placeholder\:text-emerald-300::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(110 231 183 / var(--tw-text-opacity));
@@ -7921,6 +8102,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 0px;
   }
 
+  .sm\:-mr-20 {
+    margin-right: -5rem;
+  }
+
   .sm\:mb-2 {
     margin-bottom: 0.5rem;
   }
@@ -7977,10 +8162,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: 0.75rem;
   }
 
-  .sm\:-mr-20 {
-    margin-right: -5rem;
-  }
-
   .sm\:mt-6 {
     margin-top: 1.5rem;
   }
@@ -8089,6 +8270,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: auto;
   }
 
+  .sm\:w-5\/6 {
+    width: 83.333333%;
+  }
+
   .sm\:w-96 {
     width: 24rem;
   }
@@ -8141,6 +8326,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 4rem;
   }
 
+  .sm\:w-3\/5 {
+    width: 60%;
+  }
+
   .sm\:w-8\/12 {
     width: 66.666667%;
   }
@@ -8157,14 +8346,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 18rem;
   }
 
-  .sm\:w-3\/5 {
-    width: 60%;
-  }
-
-  .sm\:w-5\/6 {
-    width: 83.333333%;
-  }
-
   .sm\:max-w-full {
     max-width: 100%;
   }
@@ -8414,6 +8595,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 0.75rem;
   }
 
+  .sm\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
   .sm\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -8464,9 +8650,8 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 0px;
   }
 
-  .sm\:py-32 {
-    padding-top: 8rem;
-    padding-bottom: 8rem;
+  .sm\:pr-10 {
+    padding-right: 2.5rem;
   }
 
   .sm\:pt-12 {
@@ -8481,14 +8666,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 4rem;
   }
 
-  .sm\:pl-6 {
-    padding-left: 1.5rem;
-  }
-
-  .sm\:pr-8 {
-    padding-right: 2rem;
-  }
-
   .sm\:pl-8 {
     padding-left: 2rem;
   }
@@ -8497,8 +8674,12 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 5rem;
   }
 
-  .sm\:pr-10 {
-    padding-right: 2.5rem;
+  .sm\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .sm\:pl-6 {
+    padding-left: 1.5rem;
   }
 
   .sm\:text-left {
@@ -8820,6 +9001,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 1.5rem;
   }
 
+  .md\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
   .md\:mr-2 {
     margin-right: 0.5rem;
   }
@@ -8904,6 +9089,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 3rem;
   }
 
+  .md\:-mr-4 {
+    margin-right: -1rem;
+  }
+
+  .md\:-ml-4 {
+    margin-left: -1rem;
+  }
+
   .md\:-mt-1 {
     margin-top: -0.25rem;
   }
@@ -8928,18 +9121,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: -9rem;
   }
 
-  .md\:-mr-4 {
-    margin-right: -1rem;
-  }
-
-  .md\:-ml-4 {
-    margin-left: -1rem;
-  }
-
-  .md\:mr-10 {
-    margin-right: 2.5rem;
-  }
-
   .md\:block {
     display: block;
   }
@@ -9460,6 +9641,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 2.5rem;
   }
 
+  .md\:py-40 {
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+  }
+
   .md\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -9550,9 +9736,12 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 2.5rem;
   }
 
-  .md\:py-40 {
+  .md\:pt-40 {
     padding-top: 10rem;
-    padding-bottom: 10rem;
+  }
+
+  .md\:pb-64 {
+    padding-bottom: 16rem;
   }
 
   .md\:pl-20 {
@@ -9623,14 +9812,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 3.5rem;
   }
 
-  .md\:pt-40 {
-    padding-top: 10rem;
-  }
-
-  .md\:pb-64 {
-    padding-bottom: 16rem;
-  }
-
   .md\:text-left {
     text-align: left;
   }
@@ -10009,6 +10190,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: -3rem;
   }
 
+  .lg\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
   .lg\:ml-0 {
     margin-left: 0px;
   }
@@ -10077,10 +10262,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 0px;
   }
 
-  .lg\:mt-10 {
-    margin-top: 2.5rem;
-  }
-
   .lg\:mr-32 {
     margin-right: 8rem;
   }
@@ -10592,6 +10773,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 2rem;
   }
 
+  .lg\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .lg\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -10612,11 +10798,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 0.75rem;
   }
 
-  .lg\:px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
   .lg\:pt-\[120px\] {
     padding-top: 120px;
   }
@@ -10867,6 +11048,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 10rem;
   }
 
+  .xl\:-mr-8 {
+    margin-right: -2rem;
+  }
+
+  .xl\:-mt-12 {
+    margin-top: -3rem;
+  }
+
   .xl\:ml-1 {
     margin-left: 0.25rem;
   }
@@ -10887,14 +11076,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 0px;
   }
 
-  .xl\:-mr-8 {
-    margin-right: -2rem;
-  }
-
-  .xl\:-mt-12 {
-    margin-top: -3rem;
-  }
-
   .xl\:inline {
     display: inline;
   }
@@ -11133,14 +11314,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 16rem;
   }
 
-  .xl\:pr-8 {
-    padding-right: 2rem;
-  }
-
-  .xl\:pl-8 {
-    padding-left: 2rem;
-  }
-
   .xl\:pl-0 {
     padding-left: 0px;
   }
@@ -11149,6 +11322,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 0px;
   }
 
+  .xl\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .xl\:pl-8 {
+    padding-left: 2rem;
+  }
+
   .xl\:text-left {
     text-align: left;
   }
@@ -11161,6 +11342,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     font-size: 40px;
   }
 
+  .xl\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .xl\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .xl\:text-\[42px\] {
     font-size: 42px;
   }
@@ -11170,11 +11361,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1;
   }
 
-  .xl\:text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-
   .xl\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -11190,11 +11376,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.5rem;
   }
 
-  .xl\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
-
   .xl\:text-transparent {
     color: transparent;
   }
diff --git a/public/componets/blog/blog.html b/public/componets/blog/blog.html
index 7797b87..93e9d7c 100644
--- a/public/componets/blog/blog.html
+++ b/public/componets/blog/blog.html
@@ -337,9 +337,38 @@
     <section class="section_divider">
         <div>Blog 8</div>
     </section>
+ 
+  <section class= " dark:bg-gradient-to-b dark:bg-gray-800 pb-5">
+    <div class="bg-gray-300">
+      <div class="container flex flex-col items-center px-4 py-16 pb-24 mx-auto text-center lg:pb-56 md:py-32 md:px-10 lg:px-32 dark:text-coolGray-900">
+        <h1 class="text-5xl font-bold leading-none sm:text-6xl xl:max-w-3xl dark:text-coolGray-900">Provident blanditiis wlk exercitationem</h1>
+        <p class="mt-6 mb-8 text-lg sm:mb-12 xl:max-w-3xl dark:text-gray-900">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
+      </div>
+    </div>
+    <!-- <img src="https://source.unsplash.com/random/480x320" alt="" class="w-5/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 dark:bg-gray-800"> -->
+    <div class="w-full md:w-3/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 ">
+      <div class="overflow-hidden rounded-t"> 
+        <img src="https://images.unsplash.com/photo-1645119675435-fc5b106eddeb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=320&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0NTMzODQyMQ&ixlib=rb-1.2.1&q=80&w=480" class=" dark:bg-gray-800 hover:scale-110 w-full  transition-all duration-700 rounded-t-lg shadow-lg border-2" alt="">
 
-    
-    
+      </div>
+
+    <div class=" p-10 dark:bg-white w-full">
+      <div class="post-header">
+        <div class="">
+          <a href="#" class="text-md text-blue-500 before:content-['-'] " rel="category">Teamwork</a>
+        </div>
+          <h2 class=" mt-2">
+              <a class="text-2xl font-semibold text-gray-800 " href="./blog-post.html">Amet Dolor Bibendum Parturient Cursus</a>
+          </h2>
+      </div>
+      <div class="text-md text-gray-600 mt-2 text-justify">
+        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur.</p>
+      </div>
+    </div>
+    </div>
+
+  </section>
+  
     <!-- blog 8 end -->
 
 <!-- start of script section -->
diff --git a/public/componets/clients/clients.html b/public/componets/clients/clients.html
new file mode 100644
index 0000000..1b573a9
--- /dev/null
+++ b/public/componets/clients/clients.html
@@ -0,0 +1,207 @@
+
+<!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://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    
+    <!-- swiper cdn -->
+    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
+
+    <title>Client </title>
+</head>
+<body>
+
+
+
+    <!-- client 1 start  -->
+
+
+    <section class="section_divider">
+        <div>Client 1</div>
+    </section>
+    <div class="container py-20 mx-auto ">
+        <div class="flex flex-col md:flex-row">
+            <div class="mt-lg-2 my-auto">
+                <h2 class="text-md font-bold uppercase text-gray-400 mb-3">Our Clients</h2>
+                <h3 class="text-4xl mb-3  ">Trusted by over 300+ clients</h3>
+                <p class=" text-md mb-0  ">We bring solutions to make life easier for our customers.</p>
+            </div>
+            
+            <div class=" items-end">
+                <div class="grid grid-cols-4 ml-20">
+                <div class="">
+                    <figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z1.png" alt=""></figure>
+                </div>
+                <!--/column -->
+                <div class="">
+                    <figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z2.png" alt=""></figure>
+                </div>
+                <!--/column -->
+                <div class="">
+                    <figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z3.png" alt=""></figure>
+                </div>
+                <!--/column -->
+                <div class="">
+                    <figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z4.png" alt=""></figure>
+                </div>
+                <!--/column -->
+                <div class="">
+                    <figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z5.png" alt=""></figure>
+                </div>
+                <!--/column -->
+                <div class="">
+                    <figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z6.png" alt=""></figure>
+                </div>
+                <!--/column -->
+                <div class="">
+                    <figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z7.png" alt=""></figure>
+                </div>
+                <!--/column -->
+                <div class="">
+                    <figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z8.png" alt=""></figure>
+                </div>
+                <!--/column -->
+                </div>
+                <!--/.row -->
+            </div>
+            
+        </div>
+    </div>
+
+    <!-- client 1 start  -->
+
+
+    <!-- client 2 start -->
+    <section class="section_divider">
+        <div>Client 2</div>
+    </section>
+    <div class="container mx-auto py-20">
+        <h2 class="text-md font-bold uppercase text-gray-400 mb-3">Our Clients</h2>
+        <div class="flex  mb-10 ">
+          <div class=" mr-10">
+            <h3 class="text-3xl mb-0">We are trusted by over 300+ clients. Join them by using our services and grow your business.</h3>
+          </div>
+          <div class="">
+            <p class="lead mb-0">Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Maecenas faucibus mollis interdum. Cras justo odio mollis.</p>
+          </div>
+        </div>
+        <div class="flex justify-center">
+          <div class=" ">
+            <div class=" "> 
+                <figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z1.png" alt=""></figure>
+              </div> 
+            </div>
+          <div class=" ">
+            <div class=" "> 
+                <figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z2.png" alt=""></figure>
+              </div> 
+          </div>
+          <div class=" ">
+            <div class=""> 
+                <figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z3.png" alt=""></figure>
+              </div> 
+            </div>
+          <div class=" "> 
+              <div class=" ">
+                <figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z4.png" alt=""></figure>
+              </div> 
+          </div>
+          <div class=""> 
+              <div class="">
+                <figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z5.png" alt=""></figure>
+              </div> 
+          </div>
+        </div>
+      </div>
+    
+    <!-- client 2 end -->
+
+    
+    <!-- client 3 start -->
+        <section class="section_divider">
+            <div>Client 3 </div>
+        </section>
+
+        <div class="container py-20 mx-auto">
+            <h2 class="text-xl uppercase text-gray-400 text-center mb-8">Trusted by Over 5000 Clients</h2>
+            <div class="swiper ">
+                <div class="swiper-wrapper cursor-pointer" >
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="1 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c1.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="2 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c2.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="3 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c3.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="4 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c4.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="5 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c5.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="6 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c6.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="7 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c7.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="8 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c8.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 "  role="group" aria-label="9 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c9.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 " role="group" aria-label="10 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c10.png" alt=""></div>
+                <div class="swiper-slide px-5 w-1/3 " role="group" aria-label="11 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c11.png" alt=""></div>
+                </div>
+                <!--/.swiper-wrapper -->
+            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
+            </div> 
+        </div>
+        <script type="text/javascript">
+            const swiper = new Swiper('.swiper', {
+            slidesPerView: 1,
+            spaceBetween: 10,
+            loop:true,
+
+            breakpoints: {
+                320: {
+                slidesPerView: 2,
+                spaceBetween: 20
+                },
+                480: {
+                slidesPerView: 3,
+                spaceBetween: 30
+                },
+                640: {
+                slidesPerView: 4,
+                spaceBetween: 40
+                }
+            }
+            })
+
+
+        </script>
+
+    <!-- client 3 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/template/blog_page/1_blog_page.html b/public/template/blog_page/1_blog_page.html
new file mode 100644
index 0000000..207c03f
--- /dev/null
+++ b/public/template/blog_page/1_blog_page.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<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 defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Blog page 1</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+    
+    <!-- header 24 start --> 
+     
+    <style>
+      @media(max-width:1520px) {
+          .left-svg {
+              display: none;
+          }
+      }
+
+      /* small css for the mobile nav close */
+      #nav-mobile-btn.close span:first-child {
+          transform: rotate(45deg);
+          top: 4px;
+          position: relative;
+          background: #a0aec0;
+      }
+
+      #nav-mobile-btn.close span:nth-child(2) {
+          transform: rotate(-45deg);
+          margin-top: 0px;
+          background: #a0aec0;
+      }
+    </style>
+
+    <header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
+      <div
+          class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
+
+          <a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
+              <svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <g fill-rule="evenodd">
+                      <path
+                          d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
+                      <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
+                  </g>
+              </svg>
+              <span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
+          </a>
+
+          <nav id="nav"
+              class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
+              <a href="#"
+                  class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600 ">Home</a>
+              <a href="#features"
+                  class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Features</a>
+              <a href="#pricing"
+                  class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Pricing</a>
+              <a href="#testimonials"
+                  class="font-bold duration-100 transition-color hover:text-indigo-600 dark:text-pink-500 dark:hover:text-indigo-600">Testimonials</a>
+              <div class="flex flex-col w-full font-medium border-t border-gray-200 md:hidden">
+                  <a href="#_" class="w-full py-2 font-bold text-center text-pink-500 ">Login</a>
+                  <a href="#_"
+                      class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
+                      Started</a>
+              </div>
+          </nav>
+
+          <div
+              class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
+              <a href="#_"
+                  class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
+              <a href="#_"
+                  class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
+                  Started</a>
+              <svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
+                  viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <defs>
+                      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
+                          <stop stop-color="#E614F2" offset="0%" />
+                          <stop stop-color="#FC3832" offset="100%" />
+                      </linearGradient>
+                      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
+                          <stop stop-color="#657DE9" offset="0%" />
+                          <stop stop-color="#1C0FD7" offset="100%" />
+                      </linearGradient>
+                      <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                          id="a">
+                          <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                          <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
+                      </filter>
+                      <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                          id="d">
+                          <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                          <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
+                      </filter>
+                      <path
+                          d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
+                          id="b" />
+                      <path
+                          d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
+                          id="e" />
+                  </defs>
+                  <g fill="none" fill-rule="evenodd" opacity=".9">
+                      <g transform="rotate(65 416.452 409.167)">
+                          <use fill="#000" filter="url(#a)" xlink:href="#b" />
+                          <use fill="url(#c)" xlink:href="#b" />
+                      </g>
+                      <g transform="rotate(29 421.929 414.496)">
+                          <use fill="#000" filter="url(#d)" xlink:href="#e" />
+                          <use fill="url(#f)" xlink:href="#e" />
+                      </g>
+                  </g>
+              </svg>
+          </div>
+
+          <div id="nav-mobile-btn"
+              class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
+              <span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
+              <span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
+          </div>
+
+      </div>
+    </header>
+
+    <script>
+      if (document.getElementById('nav-mobile-btn')) {
+          document.getElementById('nav-mobile-btn').addEventListener('click', function () {
+              if (this.classList.contains('close')) {
+                  document.getElementById('nav').classList.add('hidden');
+                  this.classList.remove('close');
+              } else {
+                  document.getElementById('nav').classList.remove('hidden');
+                  this.classList.add('close');
+              }
+          });
+      }
+    </script>
+    
+    <!-- header 24 end --> 
+
+  <!-- hero 16 start --> 
+  <section class= " dark:bg-gradient-to-b dark:bg-gray-800 pb-5">
+    <div class="bg-gray-300">
+      <div class="container flex flex-col items-center px-4 py-16 pb-24 mx-auto text-center lg:pb-56 md:py-32 md:px-10 lg:px-32 dark:text-coolGray-900">
+        <h1 class="text-5xl font-bold leading-none sm:text-6xl xl:max-w-3xl dark:text-coolGray-900">Provident blanditiis wlk exercitationem</h1>
+        <p class="mt-6 mb-8 text-lg sm:mb-12 xl:max-w-3xl dark:text-gray-900">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
+      </div>
+    </div>
+    <!-- <img src="https://source.unsplash.com/random/480x320" alt="" class="w-5/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 dark:bg-gray-800"> -->
+    <div class="w-full md:w-3/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 ">
+      <div class="overflow-hidden rounded-t"> 
+        <a href="" class="relative">
+          <span class="bg-red-100  w-full"></span>
+          <span class="absolute inset-2/4">Click Here</span>
+          
+          <img src="https://images.unsplash.com/photo-1645119675435-fc5b106eddeb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=320&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0NTMzODQyMQ&ixlib=rb-1.2.1&q=80&w=480" class="relative dark:bg-gray-800 hover:scale-110 w-full  transition-all duration-700 rounded-t-lg shadow-lg border-2" alt="">
+        </a>
+
+      </div>
+
+      <div class=" p-10 dark:bg-white w-full">
+        <div class="">
+          <div class="">
+            <a href="#" class="text-md text-blue-500 before:content-['-'] " rel="category">Teamwork</a>
+          </div>
+            <h2 class=" mt-2">
+                <a class="text-2xl font-semibold text-gray-800 " href="./blog-post.html">Amet Dolor Bibendum Parturient Cursus</a>
+            </h2>
+        </div>
+        <div class="text-md text-gray-600 mt-2 text-justify">
+          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur.</p>
+        </div>
+
+      </div>
+    </div>
+
+  </section>
+
+<!-- hero 16 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/template/blog_page/2_blog_page.html b/public/template/blog_page/2_blog_page.html
new file mode 100644
index 0000000..171f034
--- /dev/null
+++ b/public/template/blog_page/2_blog_page.html
@@ -0,0 +1,46 @@
+<!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">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Blog page 2</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 -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/blog_page/3_blog_page.html b/public/template/blog_page/3_blog_page.html
new file mode 100644
index 0000000..05fa75e
--- /dev/null
+++ b/public/template/blog_page/3_blog_page.html
@@ -0,0 +1,46 @@
+<!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">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Blog page 3</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 -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/blog_page/4_blog_page.html b/public/template/blog_page/4_blog_page.html
new file mode 100644
index 0000000..4511c40
--- /dev/null
+++ b/public/template/blog_page/4_blog_page.html
@@ -0,0 +1,46 @@
+<!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">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Blog page 4</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 -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/contact_page/2_contact_page.html b/public/template/contact_page/2_contact_page.html
index db9e4c2..30aae3f 100644
--- a/public/template/contact_page/2_contact_page.html
+++ b/public/template/contact_page/2_contact_page.html
@@ -13,6 +13,26 @@
         d
     </button>
      
+    <!-- cusotom hero section  -->
+    
+    <!-- <section class="flex flex-col items-center py-20 bg-gray-200">
+      <div class="flex justify-center flex-col  py-20 bg-gray-200 rounded">
+          <div class="mb-3 text-3xl font-semibold text-gray-800 text-center">
+            Bussiness News
+          </div>
+          <div class="text-lg text-gray-400  w-2/4 mx-auto text-center">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate doloremque recusandae similique impedit nobis, minima autem incidunt a at voluptatum explicabo ratione illum, eum quis!
+          </div>
+      </div>
+      <div class="-mt-10 overflow-hidden relative">
+        <img class="rounded drop-shadow-lg hover:scale-110 transition-all duration-500" src="https://source.unsplash.com/random/?office?work/" height="500" alt="">
+        <a href="f#" class="absolute text-green-800 z-[1000]"> blog lorem22</a>
+      </div>
+  </section> -->
+
+  <!-- cusotom hero section  -->
+
+
 
 
 <!-- start of script section -->
diff --git a/public/template/service_page/1_service_page.html b/public/template/service_page/1_service_page.html
index bfe3627..e53e7bc 100644
--- a/public/template/service_page/1_service_page.html
+++ b/public/template/service_page/1_service_page.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" class="">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -23,7 +23,7 @@
                 display: none;
             }
         }
-  
+
         /* small css for the mobile nav close */
         #nav-mobile-btn.close span:first-child {
             transform: rotate(45deg);
@@ -31,18 +31,18 @@
             position: relative;
             background: #a0aec0;
         }
-  
+
         #nav-mobile-btn.close span:nth-child(2) {
             transform: rotate(-45deg);
             margin-top: 0px;
             background: #a0aec0;
         }
     </style>
-  
-      <header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
+
+    <header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
         <div
             class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
-  
+
             <a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
                 <svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
                     xmlns="http://www.w3.org/2000/svg">
@@ -54,7 +54,7 @@
                 </svg>
                 <span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
             </a>
-  
+
             <nav id="nav"
                 class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
                 <a href="#"
@@ -72,7 +72,7 @@
                         Started</a>
                 </div>
             </nav>
-  
+
             <div
                 class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
                 <a href="#_"
@@ -122,17 +122,17 @@
                     </g>
                 </svg>
             </div>
-  
+
             <div id="nav-mobile-btn"
                 class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
                 <span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
                 <span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
             </div>
-  
+
         </div>
-      </header>
-  
-      <script>
+    </header>
+
+    <script>
         if (document.getElementById('nav-mobile-btn')) {
             document.getElementById('nav-mobile-btn').addEventListener('click', function () {
                 if (this.classList.contains('close')) {
@@ -144,7 +144,7 @@
                 }
             });
         }
-      </script>
+    </script>
       
     <!-- header 24 end --> 
   
@@ -176,117 +176,115 @@
 
 
     <!-- section 1 start --> 
-
-
+ 
     <style>
         .accordion-content {
         transition: max-height 0.3s ease-out, padding 0.3s ease;
         
         }
     </style>
+ 
+    <section class="bg-white dark:bg-gray-800 ">
+        <div class="container px-6 py-8 mx-auto">
+            <div class="items-center md:flex">
 
-  
-      <section class="bg-white dark:bg-gray-800">
-          <div class="container px-6 py-8 mx-auto">
-              <div class="items-center md:flex">
-
-                <div class=" grid place-items-center md:place-items-start ">
-                    <div class="w-12/12 md:w-6/12  rounded border">
-                    <div class="bg-white dark:bg-gray-800 p-10 shadow-sm">
-                        <h3 class="text-lg font-medium dark:text-indigo-600 text-gray-800">What We Do?  </h3>
-                        <p class="text-sm font-light dark:text-gray-100 text-gray-600 my-3">
-                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis cumque laboriosam at dolor ullam aliquam, 
-                        </p>
-        
-                        <div class="h-1 w-full mx-auto border-b my-5"></div>
-        
-                        <!-- What is term -->
-                        <div class="transition hover:bg-indigo-50 rounded-lg ">
-                        <!-- header -->
-                        <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
-                            <i class="fas fa-plus"></i>
-                            <h3>What is term?</h3>
-                        </div>
-                        <!-- Content -->
-                        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
-                            <p class="leading-6 font-light pl-9 text-justify">
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos veritatis beatae qui soluta fugiat dolorem, cumque voluptas at? Debitis error facere nobis distinctio quas provident perferendis pers 
-                            </p>
-                            <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
-                        </div>
-                        </div>
-            
-        
-                        <!-- Accordion Wrapper -->
-                        <div class="transition hover:bg-indigo-50 rounded-lg">
-                        <!-- header -->
-                        <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
-                            <i class="fas fa-plus"></i>
-                            <h3>How can it be defined?</h3>
-                        </div>
-                        <!-- Content -->
-                        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
-                            <p class="leading-6 font-light pl-9 text-justify">
-                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis dolorem quisquam aperiam facilis, sapiente quasi alias? At laudantium explicabo corrupti odio ullam sint exercitationem quisquam incidunt odit delectus? Architecto, ratione!
-                            </p>
-                            <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
-                        </div>
-                        </div>
-        
-                        <!-- Accordion Wrapper -->
-                        <div class="transition hover:bg-indigo-50 rounded-lg">
-                        <!-- header -->
-                        <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
-                            <i class="fas fa-plus"></i>
-                            <h3>Chamber reached do he nothing be?</h3>
-                        </div>
-                        <!-- Content -->
-                        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
-                            <p class="leading-6 font-light pl-9 text-justify">
-                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo saepe quae quisquam explicabo voluptas eum sapiente maiores, libero fuga ipsam commodi asperiores consectetur aliquam, quia, laborum vero pariatur quasi! Harum?
-                            </p>
-                            <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
-                        </div>
-                        </div>
-                    </div>
-                    </div>
-                </div>
+            <div class=" grid place-items-center md:place-items-start drop-shadow-lg  dark:drop-shadow-[0_10px_8px_rgba(209,213,219,0.1)] ">
+                <div class="w-12/12 md:w-6/12  rounded-lg ">
+                <div class="bg-white dark:bg-gray-800 p-10 shadow-sm">
+                    <h3 class="text-lg font-medium dark:text-indigo-600 text-gray-800">What We Do?  </h3>
+                    <p class="text-sm font-light dark:text-gray-100 text-gray-600 my-3">
+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis cumque laboriosam at dolor ullam aliquam, 
+                    </p>
     
-
-                <div class="mt-8 lg:mt-0 ">
-                    <div class="flex items-center justify-center lg:justify-end">
-                        <div class="">
-                        <!-- https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80 -->
-                            <img class="object-cover object-center h-full rounded-md shadow" src="https://source.unsplash.com/random/?tree" alt="">
-                        </div>
+                    <div class="h-1 w-full mx-auto border-b my-5"></div>
+    
+                    <!-- What is term -->
+                    <div class="transition hover:bg-indigo-50 rounded-lg ">
+                    <!-- header -->
+                    <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
+                        <i class="fas fa-plus"></i>
+                        <h3>What is term?</h3>
+                    </div>
+                    <!-- Content -->
+                    <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
+                        <p class="leading-6 font-light pl-9 text-justify">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos veritatis beatae qui soluta fugiat dolorem, cumque voluptas at? Debitis error facere nobis distinctio quas provident perferendis pers 
+                        </p>
+                        <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
+                    </div>
+                    </div>
+        
+    
+                    <!-- Accordion Wrapper -->
+                    <div class="transition hover:bg-indigo-50 rounded-lg">
+                    <!-- header -->
+                    <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
+                        <i class="fas fa-plus"></i>
+                        <h3>How can it be defined?</h3>
+                    </div>
+                    <!-- Content -->
+                    <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
+                        <p class="leading-6 font-light pl-9 text-justify">
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis dolorem quisquam aperiam facilis, sapiente quasi alias? At laudantium explicabo corrupti odio ullam sint exercitationem quisquam incidunt odit delectus? Architecto, ratione!
+                        </p>
+                        <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
+                    </div>
+                    </div>
+    
+                    <!-- Accordion Wrapper -->
+                    <div class="transition hover:bg-indigo-50 rounded-lg">
+                    <!-- header -->
+                    <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
+                        <i class="fas fa-plus"></i>
+                        <h3>Chamber reached do he nothing be?</h3>
+                    </div>
+                    <!-- Content -->
+                    <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
+                        <p class="leading-6 font-light pl-9 text-justify">
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo saepe quae quisquam explicabo voluptas eum sapiente maiores, libero fuga ipsam commodi asperiores consectetur aliquam, quia, laborum vero pariatur quasi! Harum?
+                        </p>
+                        <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
+                    </div>
                     </div>
                 </div>
-              </div>
-          </div>
-      </section>
-       
-        <script>
-        const accordionHeader = document.querySelectorAll(".accordion-header");
-        accordionHeader.forEach((header) => {
-            header.addEventListener("click", () => {
-                const accordionContent = header.parentElement.querySelector(".accordion-content");
-                let accordionMaxHeight = accordionContent.style.maxHeight;
+                </div>
+            </div>
 
-                // Condition handling
-                if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
-                accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
-                header.querySelector(".fas").classList.remove("fa-plus");
-                header.querySelector(".fas").classList.add("fa-minus");
-                header.parentElement.classList.add("bg-indigo-50");
-                } else {
-                accordionContent.style.maxHeight = `0px`;
-                header.querySelector(".fas").classList.add("fa-plus");
-                header.querySelector(".fas").classList.remove("fa-minus");
-                header.parentElement.classList.remove("bg-indigo-50");
-                }
-            });
+
+            <div class="mt-8 lg:mt-0 ">
+                <div class="flex items-center justify-center lg:justify-end">
+                    <div class="">
+                    <!-- https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80 -->
+                        <img class="object-cover object-center h-full rounded-md shadow" src="https://source.unsplash.com/random/?tree" alt="">
+                    </div>
+                </div>
+            </div>
+            </div>
+        </div>
+    </section>
+       
+    <script>
+    const accordionHeader = document.querySelectorAll(".accordion-header");
+    accordionHeader.forEach((header) => {
+        header.addEventListener("click", () => {
+            const accordionContent = header.parentElement.querySelector(".accordion-content");
+            let accordionMaxHeight = accordionContent.style.maxHeight;
+
+            // Condition handling
+            if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
+            accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
+            header.querySelector(".fas").classList.remove("fa-plus");
+            header.querySelector(".fas").classList.add("fa-minus");
+            header.parentElement.classList.add("bg-indigo-50");
+            } else {
+            accordionContent.style.maxHeight = `0px`;
+            header.querySelector(".fas").classList.add("fa-plus");
+            header.querySelector(".fas").classList.remove("fa-minus");
+            header.parentElement.classList.remove("bg-indigo-50");
+            }
         });
-        </script>
+    });
+    </script>
     <!-- section 1 end -->
   
 
@@ -356,157 +354,98 @@
 
 
 
-  <!-- pricing 18 start --> 
+    <!-- pricing 18 start --> 
 
-  <div class="relative px-8 py-10 bg-white dark:bg-gray-800 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
+    <div class="relative px-8 py-10 bg-white dark:bg-gray-800 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
 
-    <div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
-        <h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
-        <h3
-            class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center dark:text-indigo-600 text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
-            Simple, Transparent Pricing for Everyone</h3>
+        <div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
+            <h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
+            <h3
+                class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center dark:text-indigo-600 text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
+                Simple, Transparent Pricing for Everyone</h3>
 
-        <div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
-            <!-- Basic Pricing -->
-            <div class="relative flex flex-col items-center block sm:flex-row">
-                <div
-                    class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
-                    <div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
-                        <div
-                            class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
-                            <h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
-                                    class="ml-2 font-light">Plan</span></h3>
-                            <h4
-                                class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
-                                <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
-                            <p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
-                                features below.
-                            </p>
-                        </div>
-
-                        <div class="flex flex-wrap px-6 mt-8">
-                            <ul>
-                                <li class="flex items-center">
-                                    <div class="p-2 text-green-500 rounded-full fill-current ">
-                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
-                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                            stroke-linejoin="round">
-                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                                        </svg>
-                                    </div>
-                                    <span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
-                                </li>
-                                <li class="flex items-center">
-                                    <div class="p-2 text-green-500 rounded-full fill-current ">
-                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
-                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                            stroke-linejoin="round">
-                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                                        </svg>
-                                    </div>
-                                    <span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
-                                </li>
-                                <li class="flex items-center">
-                                    <div class="p-2 text-green-500 rounded-full fill-current ">
-                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
-                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                            stroke-linejoin="round">
-                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                                        </svg>
-                                    </div>
-                                    <span class="ml-3 text-lg text-gray-700">One More Feature</span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="flex items-center block p-8 uppercase">
-                            <a href="#_"
-                                class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
-                                This Plan</a>
-                        </div>
-                    </div>
-                </div>
-                <!-- Pro Pricing -->
-                <div
-                    class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
+            <div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
+                <!-- Basic Pricing -->
+                <div class="relative flex flex-col items-center block sm:flex-row">
                     <div
-                        class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
-                        Most Popular</div>
-                    <div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
-                        <h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
-                                class="ml-2 font-light">Plan</span></h3>
-                        <h4
-                            class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
-                            <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
-                        <p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
-                            access to the
-                            following:</p>
-                    </div>
-                    <div class="flex justify-start pl-12 mt-8 sm:justify-start">
-                        <ul>
-                            <li class="flex items-center">
-                                <div class="p-2 text-green-500 rounded-full fill-current">
-                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
-                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                        stroke-linejoin="round">
-                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                                    </svg>
-                                </div>
-                                <span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
-                            </li>
-                            <li class="flex items-center">
-                                <div class="p-2 text-green-500 rounded-full fill-current ">
-                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
-                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                        stroke-linejoin="round">
-                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                                    </svg>
-                                </div>
-                                <span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
-                            </li>
-                            <li class="flex items-center">
-                                <div class="p-2 text-green-500 rounded-full fill-current ">
-                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
-                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                        stroke-linejoin="round">
-                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
-                                    </svg>
-                                </div>
-                                <span class="ml-3 text-lg text-gray-700">And One More</span>
-                            </li>
-                        </ul>
-                    </div>
+                        class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
+                        <div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
+                            <div
+                                class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
+                                <h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
+                                        class="ml-2 font-light">Plan</span></h3>
+                                <h4
+                                    class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
+                                    <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
+                                <p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
+                                    features below.
+                                </p>
+                            </div>
 
-                    <div class="flex items-center block p-8 uppercase">
-                        <a href="#_"
-                            class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
-                            This Plan</a>
+                            <div class="flex flex-wrap px-6 mt-8">
+                                <ul>
+                                    <li class="flex items-center">
+                                        <div class="p-2 text-green-500 rounded-full fill-current ">
+                                            <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                            </svg>
+                                        </div>
+                                        <span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
+                                    </li>
+                                    <li class="flex items-center">
+                                        <div class="p-2 text-green-500 rounded-full fill-current ">
+                                            <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                            </svg>
+                                        </div>
+                                        <span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
+                                    </li>
+                                    <li class="flex items-center">
+                                        <div class="p-2 text-green-500 rounded-full fill-current ">
+                                            <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                            </svg>
+                                        </div>
+                                        <span class="ml-3 text-lg text-gray-700">One More Feature</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="flex items-center block p-8 uppercase">
+                                <a href="#_"
+                                    class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
+                                    This Plan</a>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <!-- Premium Pricing -->
-                <div
-                    class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
-                    <div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
+                    <!-- Pro Pricing -->
+                    <div
+                        class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
                         <div
-                            class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
-                            <h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
+                            class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
+                            Most Popular</div>
+                        <div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
+                            <h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
                                     class="ml-2 font-light">Plan</span></h3>
                             <h4
-                                class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
-                                <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
-                            <p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
-                                all the following
-                                features:</p>
+                                class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
+                                <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
+                            <p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
+                                access to the
+                                following:</p>
                         </div>
-                        <div class="flex flex-wrap px-8 mt-8">
+                        <div class="flex justify-start pl-12 mt-8 sm:justify-start">
                             <ul>
                                 <li class="flex items-center">
-                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                    <div class="p-2 text-green-500 rounded-full fill-current">
                                         <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
@@ -514,7 +453,7 @@
                                             <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                         </svg>
                                     </div>
-                                    <span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
+                                    <span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
                                 </li>
                                 <li class="flex items-center">
                                     <div class="p-2 text-green-500 rounded-full fill-current ">
@@ -525,7 +464,7 @@
                                             <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                         </svg>
                                     </div>
-                                    <span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
+                                    <span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
                                 </li>
                                 <li class="flex items-center">
                                     <div class="p-2 text-green-500 rounded-full fill-current ">
@@ -543,20 +482,79 @@
 
                         <div class="flex items-center block p-8 uppercase">
                             <a href="#_"
-                                class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
+                                class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
                                 This Plan</a>
                         </div>
                     </div>
+                    <!-- Premium Pricing -->
+                    <div
+                        class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
+                        <div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
+                            <div
+                                class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
+                                <h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
+                                        class="ml-2 font-light">Plan</span></h3>
+                                <h4
+                                    class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
+                                    <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
+                                <p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
+                                    all the following
+                                    features:</p>
+                            </div>
+                            <div class="flex flex-wrap px-8 mt-8">
+                                <ul>
+                                    <li class="flex items-center">
+                                        <div class="p-2 text-green-500 rounded-full fill-current ">
+                                            <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                            </svg>
+                                        </div>
+                                        <span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
+                                    </li>
+                                    <li class="flex items-center">
+                                        <div class="p-2 text-green-500 rounded-full fill-current ">
+                                            <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                            </svg>
+                                        </div>
+                                        <span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
+                                    </li>
+                                    <li class="flex items-center">
+                                        <div class="p-2 text-green-500 rounded-full fill-current ">
+                                            <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                            </svg>
+                                        </div>
+                                        <span class="ml-3 text-lg text-gray-700">And One More</span>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="flex items-center block p-8 uppercase">
+                                <a href="#_"
+                                    class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
+                                    This Plan</a>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
+
         </div>
 
     </div>
 
-  </div>
-
-  
-  <!-- pricing 18 end -->
+    
+    <!-- pricing 18 end -->