added 27 templates

dist/tailshape.css

@@ -672,6 +672,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   right: -1.75rem;
 }
 
+.top-5 {
+  top: 1.25rem;
+}
+
+.right-5 {
+  right: 1.25rem;
+}
+
+.left-5 {
+  left: 1.25rem;
+}
+
 .-bottom-5 {
   bottom: -1.25rem;
 }
@@ -700,18 +712,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   left: -0.25rem;
 }
 
-.top-5 {
-  top: 1.25rem;
-}
-
-.right-5 {
-  right: 1.25rem;
-}
-
-.left-5 {
-  left: 1.25rem;
-}
-
 .z-20 {
   z-index: 20;
 }
@@ -1235,6 +1235,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: -0.25rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .-ml-0 {
   margin-left: -0px;
 }
@@ -1271,10 +1275,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: -0.5rem;
 }
 
-.mt-auto {
-  margin-top: auto;
-}
-
 .-mt-6 {
   margin-top: -1.5rem;
 }
@@ -1351,6 +1351,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: -16rem;
 }
 
+.-ml-60 {
+  margin-left: -15rem;
+}
+
 .-mt-24 {
   margin-top: -6rem;
 }
@@ -1363,10 +1367,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: -0px;
 }
 
-.-mt-12 {
-  margin-top: -3rem;
-}
-
 .block {
   display: block;
 }
@@ -1555,14 +1555,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 0.375rem;
 }
 
-.h-5\/6 {
-  height: 83.333333%;
-}
-
-.h-4\/5 {
-  height: 80%;
-}
-
 .max-h-0 {
   max-height: 0px;
 }
@@ -1789,6 +1781,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 24rem;
 }
 
+.w-11 {
+  width: 2.75rem;
+}
+
+.w-4\/6 {
+  width: 66.666667%;
+}
+
 .w-72 {
   width: 18rem;
 }
@@ -1801,18 +1801,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 0.375rem;
 }
 
-.w-11 {
-  width: 2.75rem;
-}
-
-.w-4\/6 {
-  width: 66.666667%;
-}
-
-.w-1\/6 {
-  width: 16.666667%;
-}
-
 .min-w-full {
   min-width: 100%;
 }
@@ -1905,16 +1893,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 480px;
 }
 
-.max-w-\[1340px\] {
-  max-width: 1340px;
-}
-
 .max-w-fit {
   max-width: -webkit-fit-content;
   max-width: -moz-fit-content;
   max-width: fit-content;
 }
 
+.max-w-\[1340px\] {
+  max-width: 1340px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1986,6 +1974,26 @@ 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));
 }
 
+.translate-x-6 {
+  --tw-translate-x: 1.5rem;
+  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));
+}
+
+.-translate-y-6 {
+  --tw-translate-y: -1.5rem;
+  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));
+}
+
+.-translate-x-1\/4 {
+  --tw-translate-x: -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));
+}
+
+.translate-x-1\/4 {
+  --tw-translate-x: 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));
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   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));
@@ -2011,26 +2019,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));
 }
 
-.-translate-x-1\/4 {
-  --tw-translate-x: -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));
-}
-
-.translate-x-1\/4 {
-  --tw-translate-x: 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));
-}
-
-.translate-x-6 {
-  --tw-translate-x: 1.5rem;
-  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));
-}
-
-.-translate-y-6 {
-  --tw-translate-y: -1.5rem;
-  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-180 {
   --tw-rotate: 180deg;
   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));
@@ -2056,16 +2044,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-180 {
-  --tw-rotate: -180deg;
-  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-2 {
   --tw-rotate: -2deg;
   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));
@@ -2076,6 +2054,16 @@ 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-180 {
+  --tw-rotate: -180deg;
+  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));
@@ -2774,11 +2762,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-right-radius: 9999px;
 }
 
-.rounded-t-none {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-}
-
 .rounded-tl {
   border-top-left-radius: 0.25rem;
 }
@@ -2863,6 +2846,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-width: 4px;
 }
 
+.border-t-4 {
+  border-top-width: 4px;
+}
+
+.border-b-8 {
+  border-bottom-width: 8px;
+}
+
 .border-l-8 {
   border-left-width: 8px;
 }
@@ -2875,14 +2866,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-right-width: 0px;
 }
 
-.border-t-4 {
-  border-top-width: 4px;
-}
-
-.border-b-8 {
-  border-bottom-width: 8px;
-}
-
 .border-solid {
   border-style: solid;
 }
@@ -3012,6 +2995,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(236 72 153 / var(--tw-border-opacity));
 }
 
+.border-indigo-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(79 70 229 / var(--tw-border-opacity));
+}
+
+.border-teal-400 {
+  --tw-border-opacity: 1;
+  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));
@@ -3022,11 +3020,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(129 140 248 / var(--tw-border-opacity));
 }
 
-.border-purple-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
-}
-
 .border-current {
   border-color: currentColor;
 }
@@ -3071,14 +3064,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
-.border-indigo-600 {
+.border-cyan-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(79 70 229 / var(--tw-border-opacity));
+  border-color: rgb(103 232 249 / var(--tw-border-opacity));
 }
 
-.border-teal-400 {
+.border-emerald-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(45 212 191 / var(--tw-border-opacity));
+  border-color: rgb(110 231 183 / var(--tw-border-opacity));
 }
 
 .border-r-gray-200 {
@@ -3369,11 +3362,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(233 213 255 / var(--tw-bg-opacity));
 }
 
-.bg-purple-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
-}
-
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -3389,6 +3377,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(58 59 60 / var(--tw-bg-opacity));
 }
 
+.bg-purple-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
+}
+
 .bg-emerald-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity));
@@ -3434,11 +3427,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(45 212 191 / var(--tw-bg-opacity));
 }
 
+.bg-cyan-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
+}
+
 .bg-indigo-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(165 180 252 / var(--tw-bg-opacity));
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
 .bg-blue-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
@@ -3469,6 +3472,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 
+.bg-emerald-300 {
+  --tw-bg-opacity: 1;
+  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));
@@ -3484,16 +3492,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(255 237 213 / var(--tw-bg-opacity));
 }
 
-.bg-green-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-}
-
 .bg-teal-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 251 241 / var(--tw-bg-opacity));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-5 {
   --tw-bg-opacity: 0.05;
 }
@@ -3558,6 +3566,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-image: url('https://source.unsplash.com/random/?trees');
 }
 
+.bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\'\)\] {
+  background-image: url('https://source.unsplash.com/random/640x480');
+}
+
 .from-purple-100 {
   --tw-gradient-from: #f3e8ff;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(243 232 255 / 0));
@@ -3673,10 +3685,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   fill: #1f2937;
 }
 
-.fill-red-500 {
-  fill: #ef4444;
-}
-
 .stroke-gray-500 {
   stroke: #6b7280;
 }
@@ -3685,10 +3693,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   stroke: currentColor;
 }
 
-.stroke-gray-300 {
-  stroke: #d1d5db;
-}
-
 .stroke-2 {
   stroke-width: 2;
 }
@@ -3952,6 +3956,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 1px;
 }
 
+.px-14 {
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+}
+
 .px-16 {
   padding-left: 4rem;
   padding-right: 4rem;
@@ -3967,9 +3976,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 0.875rem;
 }
 
-.px-14 {
+.px-24 {
-  padding-left: 3.5rem;
+  padding-left: 6rem;
-  padding-right: 3.5rem;
+  padding-right: 6rem;
+}
+
+.py-28 {
+  padding-top: 7rem;
+  padding-bottom: 7rem;
 }
 
 .pt-20 {
@@ -4148,6 +4162,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 1.25rem;
 }
 
+.pt-0\.5 {
+  padding-top: 0.125rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -4156,10 +4174,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 6rem;
 }
 
-.pt-0\.5 {
-  padding-top: 0.125rem;
-}
-
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -4720,6 +4734,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(14 116 144 / var(--tw-text-opacity));
 }
 
+.text-cyan-900 {
+  --tw-text-opacity: 1;
+  color: rgb(22 78 99 / var(--tw-text-opacity));
+}
+
 .text-yellow-100 {
   --tw-text-opacity: 1;
   color: rgb(254 249 195 / var(--tw-text-opacity));
@@ -4760,11 +4779,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(185 28 28 / var(--tw-text-opacity));
 }
 
-.text-purple-900 {
-  --tw-text-opacity: 1;
-  color: rgb(88 28 135 / var(--tw-text-opacity));
-}
-
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
@@ -4969,16 +4983,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-.shadow-white {
-  --tw-shadow-color: #fff;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
-.shadow-emerald-300 {
-  --tw-shadow-color: #6ee7b7;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -5039,26 +5043,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);
-}
-
-.drop-shadow-md {
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px 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);
-}
-
 .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);
 }
 
-.drop-shadow-xl {
-  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
-  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);
@@ -5259,11 +5248,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: block;
 }
 
-.before\:hidden::before {
-  content: var(--tw-content);
-  display: none;
-}
-
 .before\:h-3::before {
   content: var(--tw-content);
   height: 0.75rem;
@@ -5323,18 +5307,13 @@ 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\:-translate-y-2:hover {
-  --tw-translate-y: -0.5rem;
-  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\:-translate-y-1:hover {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:rotate-12:hover {
+.hover\:-translate-y-2:hover {
-  --tw-rotate: 12deg;
+  --tw-translate-y: -0.5rem;
   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));
 }
 
@@ -5408,11 +5387,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: transparent;
 }
 
-.hover\:border-teal-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 184 166 / var(--tw-border-opacity));
-}
-
 .hover\:border-b-blue-300:hover {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -5587,21 +5561,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-purple-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-purple-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(192 132 252 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-purple-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-yellow-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(161 98 7 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-black:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-pink-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 39 119 / var(--tw-bg-opacity));
@@ -5612,11 +5591,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-black:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-yellow-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -5798,6 +5772,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(202 138 4 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .hover\:text-green-600:hover {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -5838,11 +5817,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(126 34 206 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
 .hover\:text-opacity-75:hover {
   --tw-text-opacity: 0.75;
 }
@@ -5996,6 +5970,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(216 180 254 / var(--tw-border-opacity));
 }
 
+.focus\:border-purple-400:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(192 132 252 / var(--tw-border-opacity));
+}
+
 .focus\:bg-red-700:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
@@ -6348,11 +6327,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.active\:bg-teal-600:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
-}
-
 .active\:bg-purple-600:active {
   --tw-bg-opacity: 1;
   background-color: rgb(147 51 234 / var(--tw-bg-opacity));
@@ -6363,6 +6337,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.active\:bg-teal-600:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
+}
+
 .active\:bg-blue-800:active {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
@@ -6715,11 +6694,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-emerald-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 78 59 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:bg-purple-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 33 168 / var(--tw-bg-opacity));
@@ -6755,6 +6729,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(19 78 74 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-emerald-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(6 78 59 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -7154,6 +7133,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-cyan-600 {
   --tw-text-opacity: 1;
   color: rgb(8 145 178 / var(--tw-text-opacity));
@@ -7164,11 +7148,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(6 182 212 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-red-400 {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-emerald-200 {
   --tw-text-opacity: 1;
   color: rgb(167 243 208 / var(--tw-text-opacity));
@@ -7193,6 +7172,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(6 95 70 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-cyan-900 {
+  --tw-text-opacity: 1;
+  color: rgb(22 78 99 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-indigo-500 {
   --tw-text-opacity: 1;
   color: rgb(99 102 241 / var(--tw-text-opacity));
@@ -7323,6 +7307,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.dark .dark\:ring-emerald-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(110 231 183 / var(--tw-ring-opacity));
+}
+
 .dark .dark\:ring-green-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
@@ -7348,16 +7337,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:ring-emerald-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(110 231 183 / var(--tw-ring-opacity));
-}
-
-.dark .dark\:ring-emerald-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 78 59 / var(--tw-ring-opacity));
-}
-
 .dark .dark\:placeholder\:text-emerald-300::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(110 231 183 / var(--tw-text-opacity));
@@ -7621,11 +7600,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-gray-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:text-red-400:hover {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -7636,6 +7610,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(8 145 178 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hover\:text-purple-400:hover {
   --tw-text-opacity: 1;
   color: rgb(192 132 252 / var(--tw-text-opacity));
@@ -7852,11 +7831,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 1rem;
   }
 
-  .sm\:my-4 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
   .sm\:mr-6 {
     margin-right: 1.5rem;
   }
@@ -7957,10 +7931,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: auto;
   }
 
-  .sm\:-mt-6 {
-    margin-top: -1.5rem;
-  }
-
   .sm\:block {
     display: block;
   }
@@ -7997,6 +7967,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 18rem;
   }
 
+  .sm\:h-6 {
+    height: 1.5rem;
+  }
+
   .sm\:h-9 {
     height: 2.25rem;
   }
@@ -8013,10 +7987,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 100%;
   }
 
-  .sm\:h-6 {
-    height: 1.5rem;
-  }
-
   .sm\:w-10\/12 {
     width: 83.333333%;
   }
@@ -8057,6 +8027,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 100%;
   }
 
+  .sm\:w-6 {
+    width: 1.5rem;
+  }
+
   .sm\:w-32 {
     width: 8rem;
   }
@@ -8109,10 +8083,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 83.333333%;
   }
 
-  .sm\:w-6 {
-    width: 1.5rem;
-  }
-
   .sm\:max-w-full {
     max-width: 100%;
   }
@@ -8286,10 +8256,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     border-radius: 0.5rem;
   }
 
-  .sm\:border {
-    border-width: 1px;
-  }
-
   .sm\:border-none {
     border-style: none;
   }
@@ -8828,6 +8794,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 2.5rem;
   }
 
+  .md\:mr-0 {
+    margin-right: 0px;
+  }
+
   .md\:-ml-5 {
     margin-left: -1.25rem;
   }
@@ -8840,10 +8810,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: auto;
   }
 
-  .md\:mr-0 {
-    margin-right: 0px;
-  }
-
   .md\:mb-12 {
     margin-bottom: 3rem;
   }
@@ -10033,10 +9999,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 8rem;
   }
 
-  .lg\:-mt-24 {
-    margin-top: -6rem;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -10173,14 +10135,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 20%;
   }
 
-  .lg\:w-2\/5 {
-    width: 40%;
-  }
-
   .lg\:w-56 {
     width: 14rem;
   }
 
+  .lg\:w-2\/5 {
+    width: 40%;
+  }
+
   .lg\:w-32 {
     width: 8rem;
   }
@@ -10412,11 +10374,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     border-radius: 0.5rem;
   }
 
-  .lg\:rounded-l-lg {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
   .lg\:border-none {
     border-style: none;
   }
@@ -10435,10 +10392,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
 
-  .lg\:bg-transparent {
-    background-color: transparent;
-  }
-
   .lg\:p-10 {
     padding: 2.5rem;
   }
@@ -10543,16 +10496,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 1.75rem;
   }
 
-  .lg\:py-8 {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-  }
-
   .lg\:px-40 {
     padding-left: 10rem;
     padding-right: 10rem;
   }
 
+  .lg\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
   .lg\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;

public/componets/accordion/accordion.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="">
+<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -122,8 +122,8 @@
     </section>
     
     
-    <div class="flex items-center justify-center py-20 transition-height duration-300 from-purple-100 via-red-300 to-indigo-500 bg-gradient-to-br">
+    <div class="flex items-center justify-center py-20 transition duration-80  dark:bg-gray-800 ">
-        <div class='w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg shadow-xl'>
+        <div class='w-full max-w-lg px-10 py-8 mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl'>
             <h1 class="text-xl mb-10 text-center">TAILWINDCSS ACCORDION WITH <code>&lt;details&gt; &lt;summary&gt;</code> HTML Tag</h1>
 
             <details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">

public/componets/footer/6_footer.html

@@ -143,5 +143,7 @@
       </div>
     </footer>
   <!--footer 6 end -->
+
+  
 </body>
 </html>

public/componets/skill/2_skill.html

@@ -18,6 +18,65 @@
 
     
 
+    <!-- skill 2 start --> 
+    <section class="section_divider">
+      <div>Skill 2</div>
+    </section>
+
+    <div class=" w-full text-blue-800 bg-white h-auto py-20">
+
+
+
+        <div class=" text-center  ">
+
+            <h1 class=" md:text-4xl sm:text-2xl text-xl mb-4"> Titre h1 SKILLS </h1>
+
+            <hr class="W-1/4 mx-auto mb-10 shadow-4xl">
+        </div>
+
+        <div class="sm:flex content-center justify-center">
+
+
+            <div class=" sm:w-2/4 w-3/4 mx-auto h-auto my-6 lg:mx-8 md:mx-4">
+                <h3 class="text-center text-xl my-2"> <i class=" fas fa-user-astronaut text-4xl"></i> </h3>
+                <p class=" text-sm text-justify mx-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime
+                    vitae,
+                    nesciunt
+                    ipsa
+                    deleniti asperiores
+                    provident velit similique officiis ab reiciendis cupiditate illo incidunt aspernatur magnam dolorem
+                    quae. Facere, ex voluptatum.</p>
+            </div>
+
+
+            <div class=" sm:w-2/4 w-3/4 mx-auto h-auto my-6 lg:mx-8 md:mx-4">
+                <h3 class="text-center text-xl my-2"> <i class=" fas fa-user-astronaut text-4xl"></i> </h3>
+                <p class=" text-sm text-justify mx-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime
+                    vitae,
+                    nesciunt
+                    ipsa
+                    deleniti asperiores
+                    provident velit similique officiis ab reiciendis cupiditate illo incidunt aspernatur magnam dolorem
+                    quae. Facere, ex voluptatum.</p>
+            </div>
+
+            <div class=" sm:w-2/4 w-3/4 mx-auto h-auto my-6 lg:mx-8 md:mx-4">
+                <h3 class="text-center text-xl my-2"> <i class=" fas fa-user-astronaut text-4xl"></i><br> </h3>
+                <p class=" text-sm text-justify mx-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime
+                    vitae,
+                    nesciunt
+                    ipsa
+                    deleniti asperiores
+                    provident velit similique officiis ab reiciendis cupiditate illo incidunt aspernatur magnam dolorem
+                    quae. Facere, ex voluptatum.</p>
+            </div>
+        </div>
+
+    </div>
+        
+    <!-- skill 2 end -->
+   
+
 <!-- start of script section -->
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");

public/template/17_template.html

@@ -17,7 +17,484 @@
     </button>
     
 
+    <!-- header 13 start --> 
+
+    <nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
+      <div class="container px-6 py-3 mx-auto md:flex">
+          <div class="flex items-center justify-between">
+              <div>
+                  <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+              </div>
+              
+              <!-- Mobile menu button -->
+              <div class="flex md:hidden">
+                  <button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                      <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                          <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                      </svg>
+                  </button>
+              </div>
+          </div>
+
+          <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+          <div  :class="mobile_nav_status ? 'block w-full md:flex md:items-center md:justify-between' : 'hidden w-full md:flex md:items-center md:justify-between '"  >
+              <div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
+              </div>
+              
+              <div class="relative">
+                  <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                      <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                          <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                  </span>
+
+                  <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
+              </div>
+          </div>
+      </div>
+    </nav>
+    <!-- header 13 end -->
+
      
+    <!-- feature 9 start -->
+   
+    <section class="dark:bg-gray-800 dark:text-gray-100 py-24">
+        <div class=" container flex flex-col mx-auto lg:flex-row">
+            <!-- <div class="w-5 absolute bg-white bg-center bg-cover  bg-[url('https://source.unsplash.com/random/640x480')]"></div> -->
+            <div class="flex flex-col w-full p-6 lg:w-2/3 md:p-8 lg:p-12 ">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 mb-8 dark:text-green-400">
+                    <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                </svg>
+                <h2 class="text-3xl font-semibold leading-none">Modern solutions to all kinds of problems</h2>
+                <p class="mt-4 mb-8 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non voluptatum rem amet!</p>
+                <button class="self-start px-10 py-3 text-lg font-medium rounded-3xl dark:bg-green-400 dark:text-gray-900">Get started</button>
+            </div>
+        </div>
+    </section>
+    <!-- feature 9 end -->
+
+
+    <!-- service 1 start -->
+    <div class=" bg-gray-200 dark:bg-gray-800 py-24">
+        <h3 class="text-5xl font-bold text-gray-300 text-center pb-5">Services</h3>
+        <div class="container mx-auto">
+        
+            <div class=" flex flex-col md:flex-row p-8 w-full shadow-md  overflow-hidden ">
+            
+                <div class="mx-auto md:mx-5 mt-2">
+                    <div class=" relative flex flex-col items-center justify-around p-4 mr-4 w-80 h-80 rounded-2xl " style="transform: translate(0px, 0px); opacity: 1;">
+                        <div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-emerald-300 rounded-xl -rotate-2 " style="z-index: -1;"></div>
+                        <div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-cyan-400 rounded-xl rotate-2 " style="z-index: -1;"></div>
+                        
+                        <div class="absolute z-0 w-full h-full transform scale-x-105 scale-y-95 bg-white dark:bg-gray-800 rounded-xl " style="z-index: -1;"></div>
+                        <h3 class="z-10 p-2 text-2xl font-semibold dark:text-cyan-900">SEO</h3>
+                            <div class="z-10 p-2 dark:text-cyan-900">
+                                <svg class="fill-current" height="96" viewBox="0 0 512 512" width="96">
+                                    <path d="m123.806 105h234.55c21.146 0 38.349 17.271 38.349 38.5v102.556c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-102.556c0-29.5-23.932-53.5-53.349-53.5h-234.55c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5z"></path>
+                                    <path d="m306.358 336.556h-141.431c-2.201 0-4.291.967-5.716 2.645l-42.497 50.021-42.496-50.022c-1.425-1.678-3.515-2.645-5.716-2.645h-15.153c-21.146 0-38.349-17.271-38.349-38.5v-154.555c0-21.229 17.203-38.5 38.349-38.5h35.679c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-35.679c-29.417 0-53.349 24-53.349 53.5v154.556c0 29.5 23.932 53.5 53.349 53.5h11.684l45.966 54.105c1.425 1.678 3.515 2.645 5.716 2.645s4.291-.967 5.716-2.645l45.966-54.105h137.961c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"></path>
+                                    <path d="m221.328 447.329h-68.184c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h68.184c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-189.048c-9.528 0-17.28-7.777-17.28-17.336s7.752-17.335 17.28-17.335h6.635c2.406 0 4.666-1.154 6.076-3.103l13.033-18.009 13.033 18.009c1.41 1.948 3.67 3.103 6.076 3.103h41.332c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-37.502l-16.863-23.302c-1.41-1.948-3.67-3.103-6.076-3.103s-4.666 1.154-6.076 3.103l-16.863 23.302h-2.805c-17.799 0-32.28 14.506-32.28 32.335 0 17.83 14.481 32.336 32.28 32.336h189.048c17.799 0 32.28-14.506 32.28-32.336 0-17.829-14.481-32.335-32.28-32.335z"></path>
+                                    <path d="m290.659 64.671h28.213c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-28.213c-9.528 0-17.28-7.776-17.28-17.335s7.752-17.336 17.28-17.336h189.048c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-6.635c-2.406 0-4.666 1.154-6.076 3.103l-13.033 18.009-13.033-18.01c-1.41-1.948-3.67-3.103-6.076-3.103h-81.302c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h77.472l16.863 23.302c1.41 1.948 3.67 3.103 6.076 3.103s4.666-1.154 6.076-3.103l16.863-23.302h2.805c17.799 0 32.28-14.506 32.28-32.336 0-17.828-14.481-32.334-32.28-32.334h-189.048c-17.799 0-32.28 14.506-32.28 32.336 0 17.829 14.481 32.335 32.28 32.335z"></path><path d="m109.855 253.936c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-40c0-4.143-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v40c0 4.143 3.358 7.5 7.5 7.5h32.499v25z"></path>
+                                    <path d="m224.852 188.936c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25z"></path><path d="m259.852 173.936c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-80c0-4.143-3.358-7.5-7.5-7.5zm32.499 80h-24.999v-65h24.999z"></path><path d="m511.987 345.242c-.001-3.688-2.683-6.827-6.325-7.404l-10.348-1.642-4.939-11.919 6.154-8.489c2.164-2.985 1.837-7.1-.77-9.706l-21.182-21.18c-2.61-2.609-6.729-2.934-9.713-.763l-8.471 6.158-11.914-4.934-1.647-10.352c-.579-3.642-3.72-6.321-7.407-6.321h-.003l-29.945.012c-3.688.001-6.829 2.685-7.405 6.328l-1.639 10.357-11.903 4.939-8.479-6.154c-2.987-2.168-7.106-1.842-9.712.77l-21.167 21.195c-2.605 2.608-2.928 6.724-.762 9.706l6.157 8.48-4.933 11.929-10.341 1.648c-3.642.58-6.321 3.722-6.32 7.409l.012 29.965c.001 3.688 2.684 6.827 6.326 7.404l10.347 1.641 4.939 11.919-6.154 8.489c-2.164 2.985-1.837 7.1.769 9.706l21.181 21.181c2.608 2.607 6.727 2.934 9.713.763l8.471-6.158 11.913 4.934 1.647 10.352c.58 3.642 3.72 6.321 7.407 6.321h.003l29.945-.013c3.688-.002 6.828-2.685 7.404-6.327l1.64-10.358 11.904-4.939 8.479 6.155c2.986 2.168 7.105 1.841 9.712-.77l21.167-21.195c2.605-2.608 2.928-6.723.763-9.706l-6.157-8.481 4.933-11.929 10.341-1.647c3.642-.58 6.322-3.722 6.32-7.409zm-23.154 24.869c-2.576.41-4.754 2.13-5.751 4.54l-8.141 19.686c-.996 2.409-.67 5.163.861 7.272l4.863 6.698-12.118 12.135-6.694-4.859c-2.113-1.533-4.87-1.858-7.28-.858l-19.661 8.158c-2.409 1-4.125 3.179-4.533 5.755l-1.295 8.18-17.138.007-1.301-8.173c-.41-2.575-2.128-4.753-4.538-5.751l-19.672-8.146c-.924-.383-1.898-.57-2.869-.57-1.561 0-3.108.487-4.411 1.434l-6.686 4.86-12.125-12.125 4.861-6.706c1.53-2.111 1.854-4.865.856-7.273l-8.151-19.675c-.999-2.41-3.178-4.128-5.754-4.536l-8.171-1.296-.007-17.16 8.165-1.302c2.576-.41 4.754-2.13 5.75-4.54l8.141-19.686c.997-2.409.67-5.163-.862-7.272l-4.863-6.698 12.118-12.134 6.694 4.858c2.113 1.535 4.871 1.858 7.28.858l19.661-8.158c2.409-1 4.125-3.18 4.533-5.756l1.294-8.179 17.138-.006 1.3 8.173c.41 2.575 2.128 4.753 4.538 5.751l19.673 8.146c2.412.998 5.168.671 7.279-.863l6.686-4.86 12.126 12.125-4.861 6.705c-1.53 2.111-1.854 4.865-.856 7.273l8.153 19.674c.999 2.41 3.178 4.128 5.754 4.536l8.172 1.296.007 17.161z"></path><path d="m452.329 352.759c-4.142 0-7.5 3.357-7.5 7.5 0 13.423-10.92 24.343-24.342 24.343s-24.342-10.92-24.342-24.343 10.92-24.343 24.342-24.343c3.515 0 6.904.731 10.071 2.173 3.771 1.718 8.218.051 9.934-3.719 1.716-3.771.051-8.218-3.719-9.934-5.132-2.336-10.611-3.521-16.286-3.521-21.693 0-39.342 17.649-39.342 39.343s17.649 39.343 39.342 39.343 39.342-17.649 39.342-39.343c0-4.142-3.358-7.499-7.5-7.499z"></path></svg>
+                            </div>
+                            <div class="z-10 p-2 text-sm text-center text-gray-500 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit enim totam possimus rem. Totam, quis!</div>
+                    </div>
+                </div>
+
+                <div class="mx-auto md:mx-5  mt-2"> 
+                    <div class="relative flex flex-col items-center justify-around p-4 mr-4 w-80 h-80 rounded-2xl " style="transform: translate(0px, 0px); opacity: 1;">
+                        <div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-emerald-300 rounded-xl -rotate-2 " style="z-index: -1;"></div>
+                        <div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-cyan-400 rounded-xl rotate-2 " style="z-index: -1;"></div>
+                        
+                        <div class="absolute z-0 w-full h-full transform scale-x-105 scale-y-95 bg-white dark:bg-gray-800 rounded-xl " style="z-index: -1;"></div>
+                        <h3 class="z-10 p-2 text-2xl font-semibold text-cyan-900">SEO</h3>
+                            <div class="z-10 p-2 text-cyan-900">
+                                <svg class="fill-current" height="96" viewBox="0 0 512 512" width="96">
+                                    <path d="m123.806 105h234.55c21.146 0 38.349 17.271 38.349 38.5v102.556c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-102.556c0-29.5-23.932-53.5-53.349-53.5h-234.55c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5z"></path>
+                                    <path d="m306.358 336.556h-141.431c-2.201 0-4.291.967-5.716 2.645l-42.497 50.021-42.496-50.022c-1.425-1.678-3.515-2.645-5.716-2.645h-15.153c-21.146 0-38.349-17.271-38.349-38.5v-154.555c0-21.229 17.203-38.5 38.349-38.5h35.679c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-35.679c-29.417 0-53.349 24-53.349 53.5v154.556c0 29.5 23.932 53.5 53.349 53.5h11.684l45.966 54.105c1.425 1.678 3.515 2.645 5.716 2.645s4.291-.967 5.716-2.645l45.966-54.105h137.961c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"></path>
+                                    <path d="m221.328 447.329h-68.184c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h68.184c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-189.048c-9.528 0-17.28-7.777-17.28-17.336s7.752-17.335 17.28-17.335h6.635c2.406 0 4.666-1.154 6.076-3.103l13.033-18.009 13.033 18.009c1.41 1.948 3.67 3.103 6.076 3.103h41.332c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-37.502l-16.863-23.302c-1.41-1.948-3.67-3.103-6.076-3.103s-4.666 1.154-6.076 3.103l-16.863 23.302h-2.805c-17.799 0-32.28 14.506-32.28 32.335 0 17.83 14.481 32.336 32.28 32.336h189.048c17.799 0 32.28-14.506 32.28-32.336 0-17.829-14.481-32.335-32.28-32.335z"></path>
+                                    <path d="m290.659 64.671h28.213c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-28.213c-9.528 0-17.28-7.776-17.28-17.335s7.752-17.336 17.28-17.336h189.048c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-6.635c-2.406 0-4.666 1.154-6.076 3.103l-13.033 18.009-13.033-18.01c-1.41-1.948-3.67-3.103-6.076-3.103h-81.302c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h77.472l16.863 23.302c1.41 1.948 3.67 3.103 6.076 3.103s4.666-1.154 6.076-3.103l16.863-23.302h2.805c17.799 0 32.28-14.506 32.28-32.336 0-17.828-14.481-32.334-32.28-32.334h-189.048c-17.799 0-32.28 14.506-32.28 32.336 0 17.829 14.481 32.335 32.28 32.335z"></path><path d="m109.855 253.936c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-40c0-4.143-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v40c0 4.143 3.358 7.5 7.5 7.5h32.499v25z"></path>
+                                    <path d="m224.852 188.936c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25z"></path><path d="m259.852 173.936c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-80c0-4.143-3.358-7.5-7.5-7.5zm32.499 80h-24.999v-65h24.999z"></path><path d="m511.987 345.242c-.001-3.688-2.683-6.827-6.325-7.404l-10.348-1.642-4.939-11.919 6.154-8.489c2.164-2.985 1.837-7.1-.77-9.706l-21.182-21.18c-2.61-2.609-6.729-2.934-9.713-.763l-8.471 6.158-11.914-4.934-1.647-10.352c-.579-3.642-3.72-6.321-7.407-6.321h-.003l-29.945.012c-3.688.001-6.829 2.685-7.405 6.328l-1.639 10.357-11.903 4.939-8.479-6.154c-2.987-2.168-7.106-1.842-9.712.77l-21.167 21.195c-2.605 2.608-2.928 6.724-.762 9.706l6.157 8.48-4.933 11.929-10.341 1.648c-3.642.58-6.321 3.722-6.32 7.409l.012 29.965c.001 3.688 2.684 6.827 6.326 7.404l10.347 1.641 4.939 11.919-6.154 8.489c-2.164 2.985-1.837 7.1.769 9.706l21.181 21.181c2.608 2.607 6.727 2.934 9.713.763l8.471-6.158 11.913 4.934 1.647 10.352c.58 3.642 3.72 6.321 7.407 6.321h.003l29.945-.013c3.688-.002 6.828-2.685 7.404-6.327l1.64-10.358 11.904-4.939 8.479 6.155c2.986 2.168 7.105 1.841 9.712-.77l21.167-21.195c2.605-2.608 2.928-6.723.763-9.706l-6.157-8.481 4.933-11.929 10.341-1.647c3.642-.58 6.322-3.722 6.32-7.409zm-23.154 24.869c-2.576.41-4.754 2.13-5.751 4.54l-8.141 19.686c-.996 2.409-.67 5.163.861 7.272l4.863 6.698-12.118 12.135-6.694-4.859c-2.113-1.533-4.87-1.858-7.28-.858l-19.661 8.158c-2.409 1-4.125 3.179-4.533 5.755l-1.295 8.18-17.138.007-1.301-8.173c-.41-2.575-2.128-4.753-4.538-5.751l-19.672-8.146c-.924-.383-1.898-.57-2.869-.57-1.561 0-3.108.487-4.411 1.434l-6.686 4.86-12.125-12.125 4.861-6.706c1.53-2.111 1.854-4.865.856-7.273l-8.151-19.675c-.999-2.41-3.178-4.128-5.754-4.536l-8.171-1.296-.007-17.16 8.165-1.302c2.576-.41 4.754-2.13 5.75-4.54l8.141-19.686c.997-2.409.67-5.163-.862-7.272l-4.863-6.698 12.118-12.134 6.694 4.858c2.113 1.535 4.871 1.858 7.28.858l19.661-8.158c2.409-1 4.125-3.18 4.533-5.756l1.294-8.179 17.138-.006 1.3 8.173c.41 2.575 2.128 4.753 4.538 5.751l19.673 8.146c2.412.998 5.168.671 7.279-.863l6.686-4.86 12.126 12.125-4.861 6.705c-1.53 2.111-1.854 4.865-.856 7.273l8.153 19.674c.999 2.41 3.178 4.128 5.754 4.536l8.172 1.296.007 17.161z"></path><path d="m452.329 352.759c-4.142 0-7.5 3.357-7.5 7.5 0 13.423-10.92 24.343-24.342 24.343s-24.342-10.92-24.342-24.343 10.92-24.343 24.342-24.343c3.515 0 6.904.731 10.071 2.173 3.771 1.718 8.218.051 9.934-3.719 1.716-3.771.051-8.218-3.719-9.934-5.132-2.336-10.611-3.521-16.286-3.521-21.693 0-39.342 17.649-39.342 39.343s17.649 39.343 39.342 39.343 39.342-17.649 39.342-39.343c0-4.142-3.358-7.499-7.5-7.499z"></path></svg>
+                            </div>
+                            <div class="z-10 p-2 text-sm text-center text-gray-500 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit enim totam possimus rem. Totam, quis!</div>
+                    </div>
+                </div>
+
+                <div class="mx-auto md:mx-5  mt-2">
+                    <div class="relative flex flex-col items-center justify-around p-4 mr-4 w-80 h-80 rounded-2xl " style="transform: translate(0px, 0px); opacity: 1;">
+                        <div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-emerald-300 rounded-xl -rotate-2 " style="z-index: -1;"></div>
+                        <div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-cyan-400 rounded-xl rotate-2 " style="z-index: -1;"></div>
+                        
+                        <div class="absolute z-0 w-full h-full transform scale-x-105 scale-y-95 bg-white dark:bg-gray-800 rounded-xl " style="z-index: -1;"></div>
+                        <h3 class="z-10 p-2 text-2xl font-semibold text-cyan-900">SEO</h3>
+                            <div class="z-10 p-2 text-cyan-900">
+                                <svg class="fill-current" height="96" viewBox="0 0 512 512" width="96">
+                                    <path d="m123.806 105h234.55c21.146 0 38.349 17.271 38.349 38.5v102.556c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-102.556c0-29.5-23.932-53.5-53.349-53.5h-234.55c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5z"></path>
+                                    <path d="m306.358 336.556h-141.431c-2.201 0-4.291.967-5.716 2.645l-42.497 50.021-42.496-50.022c-1.425-1.678-3.515-2.645-5.716-2.645h-15.153c-21.146 0-38.349-17.271-38.349-38.5v-154.555c0-21.229 17.203-38.5 38.349-38.5h35.679c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-35.679c-29.417 0-53.349 24-53.349 53.5v154.556c0 29.5 23.932 53.5 53.349 53.5h11.684l45.966 54.105c1.425 1.678 3.515 2.645 5.716 2.645s4.291-.967 5.716-2.645l45.966-54.105h137.961c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"></path>
+                                    <path d="m221.328 447.329h-68.184c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h68.184c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-189.048c-9.528 0-17.28-7.777-17.28-17.336s7.752-17.335 17.28-17.335h6.635c2.406 0 4.666-1.154 6.076-3.103l13.033-18.009 13.033 18.009c1.41 1.948 3.67 3.103 6.076 3.103h41.332c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-37.502l-16.863-23.302c-1.41-1.948-3.67-3.103-6.076-3.103s-4.666 1.154-6.076 3.103l-16.863 23.302h-2.805c-17.799 0-32.28 14.506-32.28 32.335 0 17.83 14.481 32.336 32.28 32.336h189.048c17.799 0 32.28-14.506 32.28-32.336 0-17.829-14.481-32.335-32.28-32.335z"></path>
+                                    <path d="m290.659 64.671h28.213c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-28.213c-9.528 0-17.28-7.776-17.28-17.335s7.752-17.336 17.28-17.336h189.048c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-6.635c-2.406 0-4.666 1.154-6.076 3.103l-13.033 18.009-13.033-18.01c-1.41-1.948-3.67-3.103-6.076-3.103h-81.302c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h77.472l16.863 23.302c1.41 1.948 3.67 3.103 6.076 3.103s4.666-1.154 6.076-3.103l16.863-23.302h2.805c17.799 0 32.28-14.506 32.28-32.336 0-17.828-14.481-32.334-32.28-32.334h-189.048c-17.799 0-32.28 14.506-32.28 32.336 0 17.829 14.481 32.335 32.28 32.335z"></path><path d="m109.855 253.936c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-40c0-4.143-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v40c0 4.143 3.358 7.5 7.5 7.5h32.499v25z"></path>
+                                    <path d="m224.852 188.936c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25z"></path><path d="m259.852 173.936c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-80c0-4.143-3.358-7.5-7.5-7.5zm32.499 80h-24.999v-65h24.999z"></path><path d="m511.987 345.242c-.001-3.688-2.683-6.827-6.325-7.404l-10.348-1.642-4.939-11.919 6.154-8.489c2.164-2.985 1.837-7.1-.77-9.706l-21.182-21.18c-2.61-2.609-6.729-2.934-9.713-.763l-8.471 6.158-11.914-4.934-1.647-10.352c-.579-3.642-3.72-6.321-7.407-6.321h-.003l-29.945.012c-3.688.001-6.829 2.685-7.405 6.328l-1.639 10.357-11.903 4.939-8.479-6.154c-2.987-2.168-7.106-1.842-9.712.77l-21.167 21.195c-2.605 2.608-2.928 6.724-.762 9.706l6.157 8.48-4.933 11.929-10.341 1.648c-3.642.58-6.321 3.722-6.32 7.409l.012 29.965c.001 3.688 2.684 6.827 6.326 7.404l10.347 1.641 4.939 11.919-6.154 8.489c-2.164 2.985-1.837 7.1.769 9.706l21.181 21.181c2.608 2.607 6.727 2.934 9.713.763l8.471-6.158 11.913 4.934 1.647 10.352c.58 3.642 3.72 6.321 7.407 6.321h.003l29.945-.013c3.688-.002 6.828-2.685 7.404-6.327l1.64-10.358 11.904-4.939 8.479 6.155c2.986 2.168 7.105 1.841 9.712-.77l21.167-21.195c2.605-2.608 2.928-6.723.763-9.706l-6.157-8.481 4.933-11.929 10.341-1.647c3.642-.58 6.322-3.722 6.32-7.409zm-23.154 24.869c-2.576.41-4.754 2.13-5.751 4.54l-8.141 19.686c-.996 2.409-.67 5.163.861 7.272l4.863 6.698-12.118 12.135-6.694-4.859c-2.113-1.533-4.87-1.858-7.28-.858l-19.661 8.158c-2.409 1-4.125 3.179-4.533 5.755l-1.295 8.18-17.138.007-1.301-8.173c-.41-2.575-2.128-4.753-4.538-5.751l-19.672-8.146c-.924-.383-1.898-.57-2.869-.57-1.561 0-3.108.487-4.411 1.434l-6.686 4.86-12.125-12.125 4.861-6.706c1.53-2.111 1.854-4.865.856-7.273l-8.151-19.675c-.999-2.41-3.178-4.128-5.754-4.536l-8.171-1.296-.007-17.16 8.165-1.302c2.576-.41 4.754-2.13 5.75-4.54l8.141-19.686c.997-2.409.67-5.163-.862-7.272l-4.863-6.698 12.118-12.134 6.694 4.858c2.113 1.535 4.871 1.858 7.28.858l19.661-8.158c2.409-1 4.125-3.18 4.533-5.756l1.294-8.179 17.138-.006 1.3 8.173c.41 2.575 2.128 4.753 4.538 5.751l19.673 8.146c2.412.998 5.168.671 7.279-.863l6.686-4.86 12.126 12.125-4.861 6.705c-1.53 2.111-1.854 4.865-.856 7.273l8.153 19.674c.999 2.41 3.178 4.128 5.754 4.536l8.172 1.296.007 17.161z"></path><path d="m452.329 352.759c-4.142 0-7.5 3.357-7.5 7.5 0 13.423-10.92 24.343-24.342 24.343s-24.342-10.92-24.342-24.343 10.92-24.343 24.342-24.343c3.515 0 6.904.731 10.071 2.173 3.771 1.718 8.218.051 9.934-3.719 1.716-3.771.051-8.218-3.719-9.934-5.132-2.336-10.611-3.521-16.286-3.521-21.693 0-39.342 17.649-39.342 39.343s17.649 39.343 39.342 39.343 39.342-17.649 39.342-39.343c0-4.142-3.358-7.499-7.5-7.499z"></path></svg>
+                            </div>
+                            <div class="z-10 p-2 text-sm text-center text-gray-500 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit enim totam possimus rem. Totam, quis!</div>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    </div>
+    <!-- service 1 end -->
+
+
+
+  <!-- pricing 13 start --> 
+
+  <div class="bg-white dark:bg-gray-900">
+    <div class="container px-6 py-24 mx-auto">
+        <p class="text-xl text-center text-gray-500 dark:text-gray-300">
+            Choose your plan
+        </p>
+
+        <h1 class="mt-4 text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Pricing Plan</h1>
+    
+        
+        <div class="mt-6 space-y-8 xl:mt-12">
+            <div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
+                <div class="flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                    </svg>
+
+                    <div class="flex flex-col items-center mx-5 space-y-1">
+                        <h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Basic</h2>
+                        <div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
+                            Save 20%
+                        </div>
+                    </div>
+                </div>
+                
+                <h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$49 <span class="text-base font-medium">/Month</span></h2>
+            </div>
+
+            <div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border hover:border-blue-500 cursor-pointer rounded-xl">
+                <div class="flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                    </svg>
+
+                    <div class="flex flex-col items-center mx-5 space-y-1">
+                        <h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Popular</h2>
+                        <div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
+                            Save 20%
+                        </div>
+                    </div>
+                </div>
+                
+                <h2 class="text-2xl font-semibold text-blue-600 sm:text-4xl">$99 <span class="text-base font-medium">/Month</span></h2>
+            </div>
+
+            <div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
+                <div class="flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                    </svg>
+
+                    <div class="flex flex-col items-center mx-5 space-y-1">
+                        <h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Enterprise</h2>
+                        <div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
+                            Save 20%
+                        </div>
+                    </div>
+                </div>
+                
+                <h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
+            </div>
+
+            <div class="flex justify-center">
+                <button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
+                    Choose Plan
+                </button>
+            </div>
+        </div>
+    </div>
+  </div>
+  <!-- pricing 13 end -->
+
+
+
+  <!-- testimonial 10 start  --> 
+
+  <section class="bg-white dark:bg-gray-800">
+    <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
+      <div class="max-w-xl mx-auto text-center">
+        <h2 class="text-4xl font-bold tracking-tight sm:text-5xl dark:text-emerald-400">
+          Read trusted reviews from our customers
+        </h2>
+  
+        <p class="max-w-lg mx-auto mt-4 text-gray-500 dark:text-gray-300">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
+          praesentium natus sapiente commodi. Aliquid sunt tempore iste
+          repellendus explicabo dignissimos placeat, autem harum dolore
+          reprehenderit quis! Quo totam dignissimos earum.
+        </p>
+      </div>
+  
+      <div
+        class="grid grid-cols-1 gap-8 pt-16 mt-16 border-t border-gray-100  sm:grid-cols-2 lg:grid-cols-3 sm:gap-16"
+      >
+        <blockquote
+          class="flex flex-col items-center justify-between text-center  sm:items-start sm:text-left"
+        >
+          <h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit"
+          </h5>
+  
+          <footer class="flex items-center mt-6 text-gray-500">
+            <img
+              src="https://www.hyperui.dev/photos/man-5.jpeg"
+              alt=""
+              class="object-cover w-12 h-12 rounded-full"
+            />
+  
+            <div class="ml-3 text-left">
+              <p class="text-sm font-medium text-gray-700 dark:text-emerald-400 ">Barry Scott</p>
+  
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
+                Digital Marketing at Studio
+              </p>
+            </div>
+          </footer>
+        </blockquote>
+  
+        <blockquote
+          class="flex flex-col items-center justify-between text-center  sm:items-start sm:text-left"
+        >
+          <h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit"
+          </h5>
+  
+          <footer class="flex items-center mt-8 text-gray-500">
+            <img
+              src="https://www.hyperui.dev/photos/man-5.jpeg"
+              alt=""
+              class="object-cover w-12 h-12 rounded-full"
+            />
+  
+            <div class="ml-3 text-left">
+              <p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
+  
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
+                Digital Marketing at Studio
+              </p>
+            </div>
+          </footer>
+        </blockquote>
+  
+        <blockquote
+          class="flex flex-col items-center justify-between text-center  sm:items-start sm:text-left"
+        >
+          <h5 class="text-xl font-medium text-gray-700 dark:text-gray-300 ">
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit"
+          </h5>
+  
+          <footer class="flex items-center mt-8 text-gray-500">
+            <img
+              src="https://www.hyperui.dev/photos/man-5.jpeg"
+              alt=""
+              class="object-cover w-12 h-12 rounded-full"
+            />
+  
+            <div class="ml-3 text-left">
+              <p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
+  
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-300 ">
+                Digital Marketing at Studio
+              </p>
+            </div>
+          </footer>
+        </blockquote>
+  
+        <blockquote
+          class="flex flex-col items-center justify-between text-center  sm:items-start sm:text-left"
+        >
+          <h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit"
+          </h5>
+  
+          <footer class="flex items-center mt-8 text-gray-500">
+            <img
+              src="https://www.hyperui.dev/photos/man-5.jpeg"
+              alt=""
+              class="object-cover w-12 h-12 rounded-full"
+            />
+  
+            <div class="ml-3 text-left">
+              <p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
+  
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
+                Digital Marketing at Studio
+              </p>
+            </div>
+          </footer>
+        </blockquote>
+  
+        <blockquote
+          class="flex flex-col items-center justify-between text-center  sm:items-start sm:text-left"
+        >
+
+          <h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit"
+          </h5>
+  
+          <footer class="flex items-center mt-8 text-gray-500 ">
+            <img
+              src="https://www.hyperui.dev/photos/man-5.jpeg"
+              alt=""
+              class="object-cover w-12 h-12 rounded-full"
+            />
+  
+            <div class="ml-3 text-left">
+              <p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
+  
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
+                Digital Marketing at Studio
+              </p>
+            </div>
+          </footer>
+        </blockquote>
+  
+        <blockquote
+          class="flex flex-col items-center justify-between text-center  sm:items-start sm:text-left"
+        >
+          <h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit"
+          </h5>
+  
+          <footer class="flex items-center mt-8 text-gray-500">
+            <img
+              src="https://www.hyperui.dev/photos/man-5.jpeg"
+              alt=""
+              class="object-cover w-12 h-12 rounded-full"
+            />
+  
+            <div class="ml-3 text-left">
+              <p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
+  
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
+                Digital Marketing at Studio
+              </p>
+            </div>
+          </footer>
+        </blockquote>
+      </div>
+    </div>
+  </section>
+  
+  <!-- testimonial 10 end -->
+
+
+  <!-- footer 11 start --> 
+
+  <footer class="bg-gray-900 pt-24">
+      <div class="grid max-w-screen-xl grid-cols-1 mx-auto lg:grid-cols-2">
+        <div class="px-4 py-16 border-b border-gray-800 md:border-b-0 md:border-l lg:pl-12 lg:order-last">
+          <div class="block lg:hidden">
+            <span class="inline-block w-32 h-10 bg-gray-700 rounded-lg"> </span>
+            
+          </div>
+    
+          <div class="mt-12 space-y-4 lg:mt-0">
+            <span class="block w-10 h-1 bg-indigo-500 rounded"></span>
+    
+            <div>
+              <h5 class="text-2xl font-medium text-white">
+                Request a Demo
+              </h5>
+    
+              <p class="max-w-xs mt-1 text-xs text-gray-500">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro voluptatum debitis quia pariatur iusto in nisi expedita placeat vero magni.
+              </p>
+            </div>
+    
+            <form>
+              <div class="relative max-w-lg">
+                <label class="sr-only" for="email"> Email </label>
+    
+                <input class="w-full py-4 pl-3 pr-16 text-sm bg-gray-800 border-none rounded-lg" id="email" type="email" placeholder="Enter your email">
+    
+                <button class="absolute p-3 text-white -translate-y-1/2 bg-blue-600 rounded-md top-1/2 right-1.5" type="button">
+                  <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                  </svg>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+    
+        <div class="px-4 py-16 lg:pr-12">
+          <div class="hidden lg:block">
+            <span class="inline-block w-32 p-4 bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+          </div>
+    
+          <div class="grid grid-cols-3 gap-8 lg:mt-12">
+            <div>
+              <p class="font-bold text-white">
+                Helpful
+              </p>
+    
+              <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                <a class="hover:opacity-75" href=""> Contact </a>
+                <a class="hover:opacity-75" href=""> Live Chat </a>
+                <a class="hover:opacity-75" href=""> Resources </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-bold text-white">
+                Solutions
+              </p>
+    
+              <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                <a class="hover:opacity-75" href=""> Instant Checkout </a>
+                <a class="hover:opacity-75" href=""> Product Upsells </a>
+                <a class="hover:opacity-75" href=""> Slideout Cart </a>
+                <a class="hover:opacity-75" href=""> User Dashboards </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-bold text-white">
+                About
+              </p>
+    
+              <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                <a class="hover:opacity-75" href=""> About Us </a>
+                <a class="hover:opacity-75" href=""> Meet the Team </a>
+                <a class="hover:opacity-75" href=""> History </a>
+                <a class="hover:opacity-75" href=""> Careers </a>
+              </nav>
+            </div>
+          </div>
+    
+          <div class="flex mt-12 space-x-6 text-xs text-white">
+            <p> © 2022 Company Name </p>
+            <a class="underline hover:opacity-75" href=""> Privacy Policy </a>
+            <a class="underline hover:opacity-75" href=""> Terms &amp; Conditions </a>
+            <a class="underline hover:opacity-75" href=""> Cookies </a>
+          </div>
+        </div>
+      </div>
+  </footer>
+  <!-- footer 11 end -->
+
+
+
+
+
+ 
 
 
 <!-- start of script section -->

public/template/19_template.html

@@ -15,7 +15,464 @@
     
 
 
+    <!-- header 15 start --> 
+  <nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
+    <div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
+        <div class="lg:flex lg:items-center">
+            <div class="flex items-center justify-between">
+                <div>
+                    <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                </div>
 
+                <!-- Mobile menu button -->
+                <div class="flex lg:hidden">
+                    <button @click="mobile_nav_status=!mobile_nav_status"  type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                        <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                            <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <div :class="mobile_nav_status ? 'block flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center ' : 'hidden flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center'" >
+                <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">features</a>
+                <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">downloads</a>
+                <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">docs</a>
+                <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">support</a>
+                <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">blog</a>
+
+                <div class="relative mt-4 lg:mt-0 lg:mx-4">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                        <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
+                            <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        </svg>
+                    </span>
+
+                    <input type="text" class="w-full py-1 pl-10 pr-4 text-gray-700 placeholder-gray-600 bg-white border-b border-gray-600 dark:placeholder-gray-300 dark:focus:border-gray-300 lg:w-56 lg:border-transparent dark:bg-gray-800 dark:text-gray-300 focus:outline-none focus:border-gray-600" placeholder="Search">
+                </div>
+            </div>
+        </div>
+
+        <div class="flex justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
+            <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
+                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                    </path>
+                </svg>
+            </a>
+
+            <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300"
+                aria-label="Facebook">
+                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                    </path>
+                </svg>
+            </a>
+
+            <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Github">
+                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                    </path>
+                </svg>
+            </a>
+        </div>
+    </div>
+  </nav>
+    
+  <!-- header 15 end -->
+
+
+    <!-- login 9 start --> 
+    
+      <div class="bg-white dark:bg-gray-900 ">
+          <div class="flex justify-center h-screen">
+              <div class="hidden bg-cover lg:block lg:w-2/3" style="background-image: url(https://images.unsplash.com/photo-1616763355603-9755a640a287?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)">
+                  <div class="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
+                      <div>
+                          <h2 class="text-4xl font-bold text-white">Brand</h2>
+                          
+                          <p class="max-w-xl mt-3 text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In autem ipsa, nulla laboriosam dolores, repellendus perferendis libero suscipit nam temporibus molestiae</p>
+                      </div>
+                  </div>
+              </div>
+              
+              <div class="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
+                  <div class="flex-1">
+                      <div class="text-center">
+                          <h2 class="text-4xl font-bold text-center text-gray-700 dark:text-white">Brand</h2>
+                          
+                          <p class="mt-3 text-gray-500 dark:text-gray-300">Sign in to access your account</p>
+                      </div>
+
+                      <div class="mt-8">
+                          <form>
+                              <div>
+                                  <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email Address</label>
+                                  <input type="email" name="email" id="email" placeholder="example@example.com" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
+                              </div>
+
+                              <div class="mt-6">
+                                  <div class="flex justify-between mb-2">
+                                      <label for="password" class="text-sm text-gray-600 dark:text-gray-200">Password</label>
+                                      <a href="#" class="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">Forgot password?</a>
+                                  </div>
+
+                                  <input type="password" name="password" id="password" placeholder="Your Password" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
+                              </div>
+
+                              <div class="mt-6">
+                                  <button
+                                      class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
+                                      Sign in
+                                  </button>
+                              </div>
+
+                          </form>
+
+                          <p class="mt-6 text-sm text-center text-gray-400">Don&#x27;t have an account yet? <a href="#" class="text-blue-500 focus:outline-none focus:underline hover:underline">Sign up</a>.</p>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+    <!-- login 9 end -->
+
+
+
+    <!-- feature 3 start --> 
+    <section class="bg-white dark:bg-gray-800">
+        <div class="container px-6 py-24 mx-auto">
+            <h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
+            
+            <iframe class="min-w-full mt-12 h-64 md:h-[450px] rounded-xl overflow-hidden" src="https://vimeo.com/showcase/7060635/video/525707984/embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""></iframe>
+
+            <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2">
+                <div class="p-6 border rounded-xl border-r-gray-200 dark:border-gray-700">
+                    <div class="md:flex md:items-start md:-mx-4">
+                        <span class="inline-block p-2 text-blue-500 bg-blue-100 rounded-xl md:mx-4 dark:text-white dark:bg-blue-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                            </svg>
+                        </span>
+
+                        <div class="mt-4 md:mx-4 md:mt-0">
+                            <h1 class="text-2xl font-medium text-gray-700 capitalize dark:text-white">Copy & paste components</h1>
+
+                            <p class="mt-3 text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="p-6 border rounded-xl border-r-gray-200 dark:border-gray-700">
+                    <div class="md:flex md:items-start md:-mx-4">
+                        <span class="inline-block p-2 text-blue-500 bg-blue-100 rounded-xl md:mx-4 dark:text-white dark:bg-blue-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                            </svg>
+                        </span>
+
+                        <div class="mt-4 md:mx-4 md:mt-0">
+                            <h1 class="text-2xl font-medium text-gray-700 capitalize dark:text-white">Zero Configrations</h1>
+
+                            <p class="mt-3 text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="p-6 border rounded-xl border-r-gray-200 dark:border-gray-700">
+                    <div class="md:flex md:items-start md:-mx-4">
+                        <span class="inline-block p-2 text-blue-500 bg-blue-100 rounded-xl md:mx-4 dark:text-white dark:bg-blue-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
+                            </svg>
+                        </span>
+
+                        <div class="mt-4 md:mx-4 md:mt-0">
+                            <h1 class="text-2xl font-medium text-gray-700 capitalize dark:text-white">elegant Dark Mode</h1>
+
+                            <p class="mt-3 text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="p-6 border rounded-xl border-r-gray-200 dark:border-gray-700">
+                    <div class="md:flex md:items-start md:-mx-4">
+                        <span class="inline-block p-2 text-blue-500 bg-blue-100 rounded-xl md:mx-4 dark:text-white dark:bg-blue-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                            </svg>
+                        </span>
+
+                        <div class="mt-4 md:mx-4 md:mt-0">
+                            <h1 class="text-2xl font-medium text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
+
+                            <p class="mt-3 text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- feature 3 end -->
+
+
+    <!-- timeline 4 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100">
+        <div class="container px-4 py-24 mx-auto space-y-8 lg:max-w-3xl">
+            <h2 class="text-2xl font-bold md:text-4xl">Timeline</h2>
+            <div class="space-y-8">
+                <div>
+                    <h3 class="mb-3 text-lg font-bold md:text-xl">2021</h3>
+                    <ul class="space-y-4">
+                        <li class="space-y-1">
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
+                                    <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                                    <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                                </svg>
+                                <h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
+                            </div>
+                            <p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
+                        </li>
+                        <li class="space-y-1">
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
+                                    <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                                    <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                                </svg>
+                                <h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
+                            </div>
+                            <p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
+                        </li><!---->
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="mb-3 text-lg font-bold md:text-xl">2020</h3>
+                    <ul class="space-y-4">
+                        <li class="space-y-1">
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
+                                    <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                                    <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                                </svg>
+                                <h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
+                            </div>
+                            <p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
+                        </li>
+                        <li class="space-y-1">
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
+                                    <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                                    <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                                </svg>
+                                <h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
+                            </div>
+                            <p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
+                        </li>
+                        <li class="space-y-1">
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
+                                    <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                                    <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                                </svg>
+                                <h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
+                            </div>
+                            <p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
+                        </li><!---->
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="mb-3 text-lg font-bold md:text-xl">2019</h3>
+                    <ul class="space-y-4">
+                        <li class="space-y-1">
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
+                                    <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                                    <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                                </svg>
+                                <h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
+                            </div>
+                            <p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
+                        </li>
+                        <li class="space-y-1">
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
+                                    <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                                    <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                                </svg>
+                                <h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
+                            </div>
+                            <p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
+                        </li><!---->
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- timeline 4 end -->
+
+
+    <!-- conatct 4 start --> 
+    <section class="text-gray-600 body-font relative ">
+      <div class="absolute inset-0 bg-gray-300">
+        <iframe style="filter: grayscale(1) contrast(1.2) opacity(0.4);" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101408.032631041!2d-122.15130744474018!3d37.41345079210977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb7495bec0189%3A0x7c17d44a466baf9b!2z4Kau4Ka-4KaJ4Kao4KeN4Kaf4KeH4KaH4KaoIOCmreCmv-CmiSwg4KaV4KeN4Kav4Ka-4Kay4Ka_4Kar4KeL4Kaw4KeN4Kao4Ka_4Kav4Ka84Ka-LCDgpq7gpr7gprDgp43gppXgpr_gpqgg4Kav4KeB4KaV4KeN4Kak4Kaw4Ka-4Ka34KeN4Kaf4KeN4Kaw!5e0!3m2!1sbn!2sbd!4v1646216286435!5m2!1sbn!2sbd" width="100%" height="100%" frameborder="0"></iframe>
+      </div>
+      <div class="container px-5 py-24 mx-auto flex ">
+        <div class="lg:w-1/3 md:w-1/2 bg-white dark:bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
+          <h2 class="text-gray-900 dark:text-emerald-300 text-lg mb-1 font-medium title-font">Feedback</h2>
+          <p class="leading-relaxed mb-5 text-gray-600 dark:text-cyan-100">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
+          <div class="relative mb-4">
+            <label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Email</label>
+            <input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+          </div>
+          <div class="relative mb-4">
+            <label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Message</label>
+            <textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
+          </div>
+          <button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 dark:bg-cyan-100 dark:hover:bg-emerald-100 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
+          <p class="text-xs text-gray-500 dark:text-cyan-100 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
+        </div>
+      </div>
+    </section>
+  
+    <!-- conatct 4 end -->
+
+
+    <!--footer 8 start--> 
+    <footer class="text-white bg-gray-900 lg:grid lg:grid-cols-5">
+      <aside class="hidden lg:relative lg:col-span-2 lg:block">
+        <!-- src="https://images.unsplash.com/photo-1624456735729-03594a40c5fb" -->
+        <img class="absolute inset-0 object-cover w-full h-full"  src="https://source.unsplash.com/random/300*600/?grayscale" alt=" Graphic">
+      </aside>
+    
+      <div class="px-4 py-16 sm:px-6 lg:px-8 lg:col-span-3">
+        <div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
+          <div>
+            <p class="font-medium">
+              <span class="text-xs tracking-widest uppercase">
+                Call
+              </span>
+    
+              <a class="block text-2xl sm:text-3xl hover:opacity-75" href="">
+                0123456789
+              </a>
+            </p>
+    
+            <ul class="mt-8 space-y-2 text-sm">
+              <li>Monday to Friday: 10am - 5pm</li>
+              <li>Weekend: 10am - 3pm</li>
+            </ul>
+    
+            <div class="flex mt-16 space-x-3">
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Facebook </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Instagram </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Twitter </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+                </svg>
+              </a>
+    
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> GitHub </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Dribbble </span>
+    
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+    
+          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+              <p class="font-medium">
+                Support
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
+                <a class="hover:opacity-75" href=""> Contact </a>
+                <a class="hover:opacity-75" href=""> FAQs </a>
+                <a class="hover:opacity-75" href=""> Live Chat </a>
+                <a class="hover:opacity-75" href=""> Forums </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium">Products</p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
+                <a class="hover:opacity-75" href=""> 1to1 Coaching </a>
+                <a class="hover:opacity-75" href=""> Lesson Plans </a>
+                <a class="hover:opacity-75" href=""> Meal Plans </a>
+                <a class="hover:opacity-75" href=""> Gym Sessions </a>
+              </nav>
+            </div>
+          </div>
+        </div>
+    
+        <div class="pt-12 mt-12 border-t border-gray-800">
+          <div class="text-sm text-gray-300 sm:items-center sm:justify-between sm:flex">
+            <div class="flex space-x-3">
+              <a class="hover:opacity-75" href=""> Privacy Policy </a>
+              <a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
+              <a class="hover:opacity-75" href=""> Returns Policy </a>
+            </div>
+    
+            <p class="mt-4 sm:mt-0">
+              © 2022 Company Name.
+            </p>
+          </div>
+    
+          <p class="mt-8 text-xs text-gray-500">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus mollitia quia quod repellendus. Porro harum,
+            odio dolore perspiciatis praesentium provident esse consequatur quibusdam aperiam, cupiditate omnis modi in
+            quasi? In, maxime odio vel repellat sed earum? Debitis quaerat facilis animi. Odio natus nostrum laboriosam
+            impedit magnam praesentium asperiores consectetur ipsum.
+          </p>
+        </div>
+      </div>
+    </footer>
+    <!--footer 8 end-->
 
 
 <!-- start of script section -->

public/template/20_template.html

@@ -16,6 +16,398 @@
 
 
 
+    <!-- header 16 start --> 
+      <nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
+          <div class="container px-6 py-3 mx-auto">
+              <div class="flex flex-col md:flex-row md:justify-between md:items-center">
+                  <div class="flex items-center justify-between">
+                      <div class="flex items-center">
+                          <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+  
+                          <!-- Search input on desktop screen -->
+                          <div class="hidden mx-10 md:block">
+                              <div class="relative">
+                                  <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                      <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                          <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                      </svg>
+                                  </span>
+  
+                                  <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
+                              </div>
+                          </div>
+                      </div>
+  
+                      <!-- Mobile menu button -->
+                      <div class="flex md:hidden">
+                          <button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                              <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                                  <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                              </svg>
+                          </button>
+                      </div>
+                  </div>
+  
+                  <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                  <div :class="mobile_nav_status ? 'block items-center md:flex' : 'hidden items-center md:flex' ">
+                      <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
+                          <a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
+                          <a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
+                          <a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
+                          <a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
+                      </div>
+  
+                      <div class="flex items-center py-2 -mx-1 md:mx-0">
+                          <a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-gray-500 rounded-md hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
+                          <a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
+                      </div>
+  
+                      <!-- Search input on mobile screen -->
+                      <div class="mt-3 md:hidden">
+                          <div class="relative">
+                              <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                  <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                      <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                  </svg>
+                              </span>
+  
+                              <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
+                          </div>
+                      </div>
+                  </div>
+              </div>
+  
+              <div class="py-5 mt-3 -mx-3 overflow-y-hidden overflow-x-auto whitespace-nowrap h-0 bg-transparent hidden lg:block">
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">News</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Articles</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Videos</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Tricks</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHP</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Laravel</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Vue</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">React</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Tailwindcss</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Meraki UI</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">CPP</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">JavaScript</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Ruby</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Mysql</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Pest</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHPUnit</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Netlify</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">VS Code</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHPStorm</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Sublime</a>
+              </div>
+          </div>
+      </nav>
+    
+    <!-- header 16 end -->
+
+
+    
+    <!-- blog 7 start -->
+     
+    <div class="dark:bg-gray-800 dark:text-gray-50 py-24">
+        <div class="container grid grid-cols-12 mx-auto">
+            <div class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover dark:bg-gray-700 lg:col-span-6 lg:h-auto" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;">
+                <div class="flex flex-col items-center p-8 py-12 text-center">
+                    <span>12 June</span>
+                    <h1 class="py-4 text-5xl font-bold">Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
+                    <p class="pb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7">
+                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                </div>
+            </div>
+            <div class="flex flex-col col-span-12 p-6 divide-y lg:col-span-6 lg:p-10 divide-gray-700">
+                <div class="pt-6 pb-4 space-y-2">
+                    <span>12 June</span>
+                    <h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
+                    <a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
+                        <span>Read more</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                        </svg>
+                    </a>
+                </div>
+                <div class="pt-6 pb-4 space-y-2">
+                    <span>12 June</span>
+                    <h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
+                    <a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
+                        <span>Read more</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                        </svg>
+                    </a>
+                </div>
+                <div class="pt-6 pb-4 space-y-2">
+                    <span>12 June</span>
+                    <h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
+                    <a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
+                        <span>Read more</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- blog 7 end -->
+
+
+    <!-- feature 14 start --> 
+    <section class="dark:bg-gray-900 dark:text-gray-100 py-24">
+
+        <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20 ">
+            <h2 class="mb-8 text-4xl font-bold leading-none text-center">What do we have to offer?</h2>
+            <ul class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                <li class="flex items-center space-x-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-green-400">
+                        <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                        <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                    </svg>
+                    <span>Ea et neque distinctio</span>
+                </li>
+                <li class="flex items-center space-x-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-green-400">
+                        <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                        <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                    </svg>
+                    <span>Quaerat obcaecati voluptatem </span>
+                </li>
+                <li class="flex items-center space-x-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-green-400">
+                        <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                        <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                    </svg>
+                    <span>Quas eius repudianda</span>
+                </li>
+                <li class="flex items-center space-x-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-green-400">
+                        <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                        <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                    </svg>
+                    <span>Free and MIT licensed</span>
+                </li>
+                <li class="flex items-center space-x-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-green-400">
+                        <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                        <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                    </svg>
+                    <span>Praesentium ea et neque distinctio</span>
+                </li>
+                <li class="flex items-center space-x-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-green-400">
+                        <path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
+                        <polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
+                    </svg>
+                    <span>Architecto beatae esse ab amet </span>
+                </li><!---->
+            </ul>
+        </div>
+
+    </section>
+    <!-- feature 14 end -->
+
+
+    <!-- timeline 1 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100">
+        <div class="container max-w-5xl px-4 py-24 mx-auto">
+            <div class="grid gap-4 mx-4 sm:grid-cols-12">
+                <div class="col-span-12 sm:col-span-3">
+                    <div class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:dark:bg-green-400">
+                        <h3 class="text-3xl font-semibold">Morbi tempor</h3>
+                        <span class="text-sm font-bold tracking-wider uppercase dark:text-gray-400">Vestibulum diam nunc</span>
+                    </div>
+                </div>
+                <div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
+                    <div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-700">
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
+                            <h3 class="text-xl font-semibold tracking-wide">Donec porta enim vel </h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Dec 2020</time>
+                            <p class="mt-3">Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+                        </div>
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
+                            <h3 class="text-xl font-semibold tracking-wide">Aliquam sit amet nunc ut</h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Jul 2019</time>
+                            <p class="mt-3">Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.</p>
+                        </div>
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
+                            <h3 class="text-xl font-semibold tracking-wide">Pellentesque habitant morbi</h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Jan 2016</time>
+                            <p class="mt-3">Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.</p>
+                        </div><!---->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- timeline 1 end -->
+  
+
+    <!-- contact 9 start --> 
+    <div class="relative  px-4 w-full  bg-gray-50 dark:bg-gray-800">
+      <div class="mx-auto max-w-5xl py-24">
+
+        <div>
+          <span class="absolute top-0 left-0 hidden md:block opacity-10">
+            <svg width="250" height="600" fill="none" viewBox="0 0 250 600" aria-hidden="true">
+              <pattern id="pattern-rectangles"  width="40" height="40" patternUnits="userSpaceOnUse">
+                <rect x="0" y="0" width="10" height="10" class="text-green-500" fill="currentColor" />
+              </pattern>
+              <rect width="250" height="600" fill="url(#pattern-rectangles)" />
+            </svg>
+          </span>
+          <span class="absolute bottom-0 right-0 opacity-20">
+            <svg width="300" height="300" fill="none" viewBox="0 0 300 300" aria-hidden="true">
+              <pattern id="pattern-circles" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
+                <circle id="pattern-circle" cx="10" cy="10" r="5" class="fill-current text-green-500" />
+              </pattern>
+              <rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" />
+            </svg>
+          </span>
+        </div>
+        
+
+
+        <div class="relative space-y-5">
+
+          <h2 class="text-center text-5xl text-green-500 font-light">Contact Us</h2>
+
+          <p class="mx-auto py-5 max-w-3xl text-center text-base text-gray-600 dark:text-gray-300">Atque sint nemo vero sequi veniam, numquam fugiat aperiam doloremque, itaque officia exercitationem! Excepturi deleniti accusantium minus quibusdam dolores doloremque natus fugit!</p>
+
+          <div class="flex flex-wrap justify-between items-center text-base">
+            <div class="m-2.5 inline-flex items-center">
+              <span class="text-gray-600 dark:text-emerald-400 font-semibold">18 avenue des Champs-Élysées, 75008 Paris</span>
+            </div>
+            <div class="m-2.5 inline-flex items-center">
+              <span class="text-gray-600 dark:text-emerald-400 font-semibold">357-233-9644</span>
+            </div>
+            <div class="m-2.5 inline-flex items-center">
+              <span class="text-gray-600 dark:text-emerald-400 font-semibold">my-email@fancymail.com</span>
+            </div>
+          </div>
+
+        </div>
+
+
+
+        <div class="relative mt-16 rounded border-2 border-gray-200">
+          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8827.330741966553!2d2.308756110118289!3d48.87000842543867!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fc4f8f3049b%3A0xcbb47407434935db!2s18%20Av.%20des%20Champs-%C3%89lys%C3%A9es%2C%2075008%20Paris!5e0!3m2!1sfr!2sfr!4v1635492407441!5m2!1sfr!2sfr" 
+          title="map" scrolling="no" frameborder="0"
+          width="100%" height="450" 
+          class="" 
+          loading="lazy">
+        </div>
+
+      </div>
+    </div>
+    
+    <!-- contact 9 end -->
+
+    
+    <!-- footer 11 start --> 
+    <footer class="bg-gray-900">
+        <div class="grid max-w-screen-xl grid-cols-1 mx-auto lg:grid-cols-2">
+          <div class="px-4 py-16 border-b border-gray-800 md:border-b-0 md:border-l lg:pl-12 lg:order-last">
+            <div class="block lg:hidden">
+              <span class="inline-block w-32 h-10 bg-gray-700 rounded-lg"> </span>
+              
+            </div>
+      
+            <div class="mt-12 space-y-4 lg:mt-0">
+              <span class="block w-10 h-1 bg-indigo-500 rounded"></span>
+      
+              <div>
+                <h5 class="text-2xl font-medium text-white">
+                  Request a Demo
+                </h5>
+      
+                <p class="max-w-xs mt-1 text-xs text-gray-500">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro voluptatum debitis quia pariatur iusto in nisi expedita placeat vero magni.
+                </p>
+              </div>
+      
+              <form>
+                <div class="relative max-w-lg">
+                  <label class="sr-only" for="email"> Email </label>
+      
+                  <input class="w-full py-4 pl-3 pr-16 text-sm bg-gray-800 border-none rounded-lg" id="email" type="email" placeholder="Enter your email">
+      
+                  <button class="absolute p-3 text-white -translate-y-1/2 bg-blue-600 rounded-md top-1/2 right-1.5" type="button">
+                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+      
+          <div class="px-4 py-16 lg:pr-12">
+            <div class="hidden lg:block">
+              <span class="inline-block w-32 p-4 bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+            </div>
+      
+            <div class="grid grid-cols-3 gap-8 lg:mt-12">
+              <div>
+                <p class="font-bold text-white">
+                  Helpful
+                </p>
+      
+                <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                  <a class="hover:opacity-75" href=""> Contact </a>
+                  <a class="hover:opacity-75" href=""> Live Chat </a>
+                  <a class="hover:opacity-75" href=""> Resources </a>
+                </nav>
+              </div>
+      
+              <div>
+                <p class="font-bold text-white">
+                  Solutions
+                </p>
+      
+                <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                  <a class="hover:opacity-75" href=""> Instant Checkout </a>
+                  <a class="hover:opacity-75" href=""> Product Upsells </a>
+                  <a class="hover:opacity-75" href=""> Slideout Cart </a>
+                  <a class="hover:opacity-75" href=""> User Dashboards </a>
+                </nav>
+              </div>
+      
+              <div>
+                <p class="font-bold text-white">
+                  About
+                </p>
+      
+                <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                  <a class="hover:opacity-75" href=""> About Us </a>
+                  <a class="hover:opacity-75" href=""> Meet the Team </a>
+                  <a class="hover:opacity-75" href=""> History </a>
+                  <a class="hover:opacity-75" href=""> Careers </a>
+                </nav>
+              </div>
+            </div>
+      
+            <div class="flex mt-12 space-x-6 text-xs text-white">
+              <p> © 2022 Company Name </p>
+              <a class="underline hover:opacity-75" href=""> Privacy Policy </a>
+              <a class="underline hover:opacity-75" href=""> Terms &amp; Conditions </a>
+              <a class="underline hover:opacity-75" href=""> Cookies </a>
+            </div>
+          </div>
+        </div>
+    </footer>
+    <!-- footer 11 end -->
+
+
 
 
 <!-- start of script section -->

public/template/21_template.html

@@ -14,7 +14,440 @@
     </button>
     
 
+    <!-- header 20 start --> 
+    <div class="bg-gray-100 dark:bg-gray-800 ">
+      <nav class="bg-white dark:bg-gray-800 px-6 relative shadow-md">
+        <div class="flex flex-row justify-between items-center py-2">
+          <h3 class="font-semibold text-3xl text-gray-500 dark:text-cyan-300 dark:focus:text-cyan-600">Webapp</h3>
+          <div class="group flex flex-col items-center">
+            <button class="p-2 rounded-lg md:hidden">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-10 fill-current" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /></svg>
+            </button>
+            <div class="hidden group-hover:block md:block absolute md:static bg-white dark:bg-gray-800 inset-x-0 top-16 py-3 shadow-md md:shadow-none text-gray-600">
+              <div class="flex flex-row justify-center items-center text-center font-semibold text-gray-500">
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/></svg>
+                  Home 
+                </a>
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/></svg>
+                  Account 
+                </a>
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/></svg>
+                  Logout 
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    
+    <!-- header 20 end -->
 
+    
+
+    <!-- register 2 start --> 
+    <section class="h-screen font-sans bg-[url('https://source.unsplash.com/random/?trees')] grayscale bg-cover">
+      <div class="container mx-auto h-full flex flex-1 justify-center items-center">
+          <div class="w-full max-w-lg">
+              <div class="leading-loose">
+                  <form class="max-w-xl m-4 p-10 bg-white rounded shadow-xl">
+                      <p class="text-gray-800 font-medium">Register</p>
+                      <div class="">
+                          <label class="block text-sm text-gray-00" for="cus_name">Name</label>
+                          <input class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded" id="cus_name" name="cus_name" type="text" required="" placeholder="Your Name" aria-label="Name">
+                      </div>
+                      <div class="mt-2">
+                          <label class="block text-sm text-gray-600" for="cus_email">Email</label>
+                          <input class="w-full px-5  py-4 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Your Email" aria-label="Email">
+                      </div>
+                      <div class="mt-2">
+                          <label class=" block text-sm text-gray-600" for="cus_email">Address</label>
+                          <input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Street" aria-label="Email">
+                      </div>
+                      <div class="mt-2">
+                          <label class="hidden text-sm block text-gray-600" for="cus_email">City</label>
+                          <input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="City" aria-label="Email">
+                      </div>
+                      <div class="inline-block mt-2 w-1/2 pr-1">
+                          <label class="hidden block text-sm text-gray-600" for="cus_email">Country</label>
+                          <input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Country" aria-label="Email">
+                      </div>
+                      <div class="inline-block mt-2 -mx-1 pl-1 w-1/2">
+                          <label class="hidden block text-sm text-gray-600" for="cus_email">Zip</label>
+                          <input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Zip" aria-label="Email">
+                      </div>
+      
+                      <div class="mt-4">
+                          <button class="px-4 py-1 text-white font-light tracking-wider bg-gray-900 rounded" type="submit">Register</button>
+                      </div>
+                      <a class="inline-block right-0 align-baseline font-bold text-sm text-500 hover:text-blue-800" href="login.html">
+                          Already have an account ?
+                      </a>
+                  </form>
+              </div>
+          </div>
+      </div>
+      
+      
+    </section>
+
+    <!-- register 2 end -->
+
+
+    
+    <!-- article 1 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-50">
+      <article class="max-w-2xl px-6 py-24 mx-auto space-y-12 ">
+        <div class="w-full mx-auto space-y-4 text-center">
+          <p class="text-xs font-semibold tracking-wider uppercase">#TailwindCSS</p>
+          <h1 class="text-4xl font-bold leading-tight md:text-5xl">Interdum et malesuada fames ac ante ipsum primis in faucibus?</h1>
+          <p class="text-sm dark:text-gray-400">by
+            <a rel="noopener noreferrer" href="#" target="_blank" class="underline dark:text-green-400">
+              <span itemprop="name">Leroy Jenkins</span>
+            </a>on
+            <time datetime="2021-02-12 15:34:18-0200">Feb 12th 2021</time>
+          </p>
+        </div>
+        <div class="dark:text-gray-100">
+          <p>Insert the actual text content here...</p>
+        </div>
+        <div class="pt-12 border-t dark:border-gray-700">
+          <div class="flex flex-col space-y-4 md:space-y-0 md:space-x-6 md:flex-row">
+            <img src="https://source.unsplash.com/75x75/?portrait" alt="" class="self-center flex-shrink-0 w-24 h-24 border rounded-full md:justify-self-start dark:bg-gray-500 dark:border-gray-700">
+            <div class="flex flex-col">
+              <h4 class="text-lg font-semibold">Leroy Jenkins</h4>
+              <p class="dark:text-gray-400">Sed non nibh iaculis, posuere diam vitae, consectetur neque. Integer velit ligula, semper sed nisl in, cursus commodo elit. Pellentesque sit amet mi luctus ligula euismod lobortis ultricies et nibh.</p>
+            </div>
+          </div>
+          <div class="flex justify-center pt-4 space-x-4 align-center">
+            <a rel="noopener noreferrer" href="#" aria-label="GitHub" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
+              <svg viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
+                <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
+              </svg>
+            </a>
+            <a rel="noopener noreferrer" href="#" aria-label="Dribble" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
+              <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
+                <path d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"></path>
+              </svg>
+            </a>
+            <a rel="noopener noreferrer" href="#" aria-label="Twitter" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
+              <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
+                <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
+              </svg>
+            </a>
+            <a rel="noopener noreferrer" href="#" aria-label="Email" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
+              <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
+                <path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </article>
+    </section>
+    
+    <!-- article 1 end -->
+
+
+    <!-- team 5 start --> 
+    <section class="bg-gray-300 dark:bg-gray-900">
+        <div class="container px-6 py-24 mx-auto">
+            <h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Our <span class="text-blue-500">Executive Team</span></h1>
+            
+            <p class="max-w-2xl mx-auto my-6 text-center text-gray-500 dark:text-gray-300">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo incidunt ex placeat modi magni quia error alias, adipisci rem similique, at omnis eligendi optio eos harum.
+            </p>
+            
+            <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-2">
+                <div class="px-12 py-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
+                    <div class="flex flex-col sm:-mx-4 sm:flex-row">
+                        <img class="flex-shrink-0 object-cover w-24 h-24 rounded-full sm:mx-4 ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
+
+                        <div class="mt-4 sm:mx-4 sm:mt-0">
+                            <h1 class="text-xl font-semibold text-gray-700 capitalize md:text-2xl dark:text-white group-hover:text-white">arthur melo</h1>
+                            
+                            <p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">design director</p>
+                        </div>
+                    </div>
+
+                    <p class="mt-4 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt officia aliquam neque optio? Cumque facere numquam est.</p>
+                    
+                    <div class="flex mt-4 -mx-2">
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                                </path>
+                            </svg>
+                        </a>
+
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
+                            aria-label="Facebook">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                                </path>
+                            </svg>
+                        </a>
+
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                                </path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="px-12 py-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
+                    <div class="flex flex-col sm:-mx-4 sm:flex-row">
+                        <img class="flex-shrink-0 object-cover w-24 h-24 rounded-full sm:mx-4 ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1531590878845-12627191e687?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="">
+
+                        <div class="mt-4 sm:mx-4 sm:mt-0">
+                            <h1 class="text-xl font-semibold text-gray-700 capitalize md:text-2xl dark:text-white group-hover:text-white">Amelia. Anderson</h1>
+                            
+                            <p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lead Developer</p>
+                        </div>
+                    </div>
+
+                    <p class="mt-4 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt officia aliquam neque optio? Cumque facere numquam est.</p>
+
+                    <div class="flex mt-4 -mx-2">
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                                </path>
+                            </svg>
+                        </a>
+
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
+                            aria-label="Facebook">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                                </path>
+                            </svg>
+                        </a>
+
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                                </path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="px-12 py-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
+                    <div class="flex flex-col sm:-mx-4 sm:flex-row">
+                        <img class="flex-shrink-0 object-cover w-24 h-24 rounded-full sm:mx-4 ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1488508872907-592763824245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+
+                        <div class="mt-4 sm:mx-4 sm:mt-0">
+                            <h1 class="text-xl font-semibold text-gray-700 capitalize md:text-2xl dark:text-white group-hover:text-white">Olivia Wathan</h1>
+                            
+                            <p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lead designer</p>
+                        </div>
+                    </div>
+
+                    <p class="mt-4 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt officia aliquam neque optio? Cumque facere numquam est.</p>
+
+                    <div class="flex mt-4 -mx-2">
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                                </path>
+                            </svg>
+                        </a>
+
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
+                            aria-label="Facebook">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                                </path>
+                            </svg>
+                        </a>
+
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                                </path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="px-12 py-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
+                    <div class="flex flex-col sm:-mx-4 sm:flex-row">
+                        <img class="flex-shrink-0 object-cover w-24 h-24 rounded-full sm:mx-4 ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
+
+                        <div class="mt-4 sm:mx-4 sm:mt-0">
+                            <h1 class="text-xl font-semibold text-gray-700 capitalize md:text-2xl dark:text-white group-hover:text-white">John Doe</h1>
+                            
+                            <p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Full stack developer</p>
+                        </div>
+                    </div>
+
+                    <p class="mt-4 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt officia aliquam neque optio? Cumque facere numquam est.</p>
+
+                    <div class="flex mt-4 -mx-2">
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                                </path>
+                            </svg>
+                        </a>
+
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
+                            aria-label="Facebook">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                                </path>
+                            </svg>
+                        </a>
+
+                        <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                                </path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- team 5 end -->
+
+
+
+    <!-- contact 6 start --> 
+    <section class="text-gray-600 body-font relative dark:bg-gray-800">
+        <div class="container px-5 py-24 mx-auto">
+          <div class="flex flex-col text-center w-full mb-12">
+            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900 dark:text-emerald-300">Contact Us</h1>
+            <p class="lg:w-2/3 mx-auto leading-relaxed text-base dark:text-emerald-100">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>
+          </div>
+          <div class="lg:w-1/2 md:w-2/3 mx-auto">
+            <div class="flex flex-wrap -m-2">
+              <div class="p-2 w-1/2">
+                <div class="relative">
+                  <label for="name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
+                  <input type="text" id="name" name="name" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+                </div>
+              </div>
+              <div class="p-2 w-1/2">
+                <div class="relative">
+                  <label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
+                  <input type="email" id="email" name="email" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+                </div>
+              </div>
+              <div class="p-2 w-full">
+                <div class="relative">
+                  <label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
+                  <textarea id="message" name="message" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
+                </div>
+              </div>
+              <div class="p-2 w-full">
+                <button class="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-400 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
+              </div>
+              <div class="p-2 w-full pt-8 mt-8 border-t border-gray-200 dark:border-cyan-100 text-center">
+                <a class="text-indigo-500 dark:text-emerald-300">example@email.com</a>
+                <p class="leading-normal my-5 dark:text-cyan-100">49 Smith St.
+                  <br>Saint Cloud, MN 56301
+                </p>
+                <span class="inline-flex">
+                  <a class="text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
+                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                      <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                    </svg>
+                  </a>
+                  <a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
+                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                      <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                    </svg>
+                  </a>
+                  <a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
+                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                      <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+                      <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+                    </svg>
+                  </a>
+                  <a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
+                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                    </svg>
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+    </section>
+    
+    <!-- contact 6 end -->
+
+
+
+    <!-- footer 27 start --> 
+    <footer class="flex justify-center px-4 text-gray-800 bg-gray-200 dark:text-white dark:bg-gray-900">
+     <div class="container py-6">
+         <h1 class="text-lg font-bold text-center lg:text-2xl">
+             Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
+         </h1>
+
+         <div class="flex justify-center mt-6">
+             <div class="bg-white border rounded-md focus-within:ring dark:bg-gray-800 dark:border-gray-600 focus-within:border-blue-400 focus-within:ring-blue-300 focus-within:ring-opacity-40 dark:focus-within:border-blue-300">
+                 <div class="flex flex-wrap justify-between md:flex-row">
+                     <input type="email" class="p-2 m-1 text-sm text-gray-700 bg-transparent appearance-none focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
+                     <button class="w-full px-3 py-2 m-1 text-sm font-medium tracking-wider text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded-md dark:hover:bg-gray-600 dark:bg-gray-700 lg:w-auto hover:bg-gray-700">subscribe</button>
+                 </div>
+             </div>
+         </div>
+
+         <hr class="h-px mt-6 border-gray-300 border-none dark:bg-gray-700">
+
+         <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
+             <div>
+                 <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
+             </div>
+
+             <div class="flex mt-4 md:m-0">
+                 <div class="-mx-4">
+                     <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
+                     <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
+                     <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
+                     <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
+                 </div>
+             </div>
+         </div>
+     </div>
+    </footer>
+    <!-- footer 27 end -->
 
 
 

public/template/22_template.html

@@ -8,15 +8,602 @@
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
     <title>Template 22</title>
 </head>
-<body>
+<body class="overflow-hidden">
     <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
         d
     </button>
     
 
 
+    <!-- header 21 start --> 
+    <nav x-data="{mobile_nav_status:false}" class="w-full py-6 bg-white dark:bg-gray-800 ">
+      <div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
+        <section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" />
+          </svg>
+          <a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
+        </section>
+        
+        <section>
+          <button @click="mobile_nav_status=!mobile_nav_status" class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <!-- :class="mobile_nav_status ? 'block ' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex' " -->
+          <ul :class="mobile_nav_status ? ' absolute w-full text-center flex flex-col bg-gray-800 -ml-60 rounded' : 'hidden  md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex'">
+            <li class="relative group py-2">
+              <a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </nav>
+    
+    <!-- header 21 end -->
 
 
+    
+    <!-- hero 11 start --> 
+    <section class=" dark:bg-gray-800">
+        <div class=" px-4 py-32 mx-auto max-w-7xl w-full lg:w-8/12 xl:w-5/12">
+          <p class="mb-2 text-xs font-semibold tracking-wide text-gray-400 uppercase">For Developers</p>
+          <h1 class="mb-3 text-3xl font-bold leading-tight text-gray-900 dark:text-cyan-300 md:text-4xl">Focus on your apps</h1>
+          <p class="mb-5 text-base text-gray-500 md:text-lg">
+            Today every company needs apps to engage their customers and run their businesses. Step up your ability to build, manage, and deploy great apps at scale with us.
+          </p>
+          <a href="#" class="w-full mb-2 rounded-lg px-2 py-2 hover:ring-2 hover:ring-gray-800 hover:bg-gray-200 hover:text-gray-800 bg-gray-800  text-gray-300 dark:text-cyan-300 dark:ring-2 dark:ring-cyan-300 dark:hover:bg-cyan-300 dark:hover:text-gray-800 mr-6 sm:w-auto sm:mb-0">Sign up for free</a>
+          <a href="#" class="w-full mb-2 rounded-lg px-2 py-2 ring-2 ring-gray-800 hover:bg-gray-800 hover:ring-0 hover:text-gray-300 dark:text-gray-800 dark:bg-cyan-300 dark:hover:text-cyan-300 dark:hover:ring-2 dark:hover:ring-cyan-300 dark:hover:bg-gray-800 sm:w-auto sm:mb-0">Read our blog</a>
+        </div>
+    </section>
+
+    <!-- hero 11 end -->
+
+
+    <!-- feature 10 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100">
+        <div class="container max-w-xl p-6 py-12 mx-auto space-y-24 lg:px-8 lg:max-w-7xl">
+            <div>
+                <h2 class="text-3xl font-bold tracking-tight text-center sm:text-5xl dark:text-gray-50">Aliquip definiebas ad est</h2>
+                <p class="max-w-3xl mx-auto mt-4 text-xl text-center dark:text-gray-400">Quando cetero his ne, eum admodum sapientem ut.</p>
+            </div>
+            <div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
+                <div>
+                    <h3 class="text-2xl font-bold tracking-tight sm:text-3xl dark:text-gray-50">Ad vix debet docendi</h3>
+                    <p class="mt-3 text-lg dark:text-gray-400">Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates.</p>
+                    <div class="mt-12 space-y-12">
+                        <div class="flex">
+                            <div class="flex-shrink-0">
+                                <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Per ei quaeque sensibus</h4>
+                                <p class="mt-2 dark:text-gray-400">Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.</p>
+                            </div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex-shrink-0">
+                                <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Cu imperdiet posidonium sed</h4>
+                                <p class="mt-2 dark:text-gray-400">Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.</p>
+                            </div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex-shrink-0">
+                                <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Nulla omittam sadipscing mel ne</h4>
+                                <p class="mt-2 dark:text-gray-400">At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div aria-hidden="true" class="mt-10 lg:mt-0">
+                    <img src="https://source.unsplash.com/random/360x480/?tree" alt="" class="mx-auto rounded-lg shadow-lg dark:bg-gray-500">
+                </div>
+            </div>
+            <div>
+                <div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
+                    <div class="lg:col-start-2">
+                        <h3 class="text-2xl font-bold tracking-tight sm:text-3xl dark:text-gray-50">Eam nibh gloriatur ex</h3>
+                        <p class="mt-3 text-lg dark:text-gray-400">Per odio fabellas consulatu cu. Utroque detracto mel ea, quo te latine theophrastus. Ea his tale nibh dissentias, mei exerci tamquam euripidis cu.</p>
+                        <div class="mt-12 space-y-12">
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="ml-4">
+                                    <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Cibo augue offendit has ad</h4>
+                                    <p class="mt-2 dark:text-gray-400">An per velit appellantur, ut utinam minimum nominavi sit, odio nostro habemus ne nec. Ne sonet regione contentiones est.</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="ml-4">
+                                    <h4 class="text-lg font-medium leading-6 dark:text-gray-50">At eum ferri luptatum lobortis</h4>
+                                    <p class="mt-2 dark:text-gray-400">Te per quidam maiorum ocurreret, etiam delicatissimi usu ad. Ne has quod periculis. Te sit primis iisque efficiantur.</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="ml-4">
+                                    <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Dicunt verterem evertitur eu sea</h4>
+                                    <p class="mt-2 dark:text-gray-400">Audire principes rationibus eam an, autem nominavi luptatum per te. Sumo fabulas vim eu, sonet saperet eleifend ut vix.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-10 lg:mt-0 lg:col-start-1 lg:row-start-1">
+                        <img src="https://source.unsplash.com/random/361x481/?tree" alt="" class="mx-auto rounded-lg shadow-lg dark:bg-gray-500">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- feature 10 end -->
+
+
+    <!-- pricing 2 start --> 
+    <section x-data="{ toggle: 'basic' }"
+    class="relative min-h-screen py-16 bg-gray-200 dark:bg-gray-800 min-w-screen animation-fade animation-delay">
+    <div class="container w-full px-10 mx-auto sm:px-5 ">
+        <div class="sm:flex ">
+            <aside class="w-full sm:flex-initial">
+                <div @click="toggle = 'basic'"
+                    :class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'basic' }"
+                    class="flex mt-1 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
+                    <div class="self-center flex-shrink p-5">
+                        <svg x-show="toggle === 'basic'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                            style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                            <ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
+                            <polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                391.88,166.392 " />
+                        </svg>
+                        <svg x-show="toggle != 'basic'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
+                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                            y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
+                            xml:space="preserve">
+                            <ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
+                        </svg>
+                    </div>
+                    <div class="flex-grow px-0 py-5 md:px-5">
+                        <div class="text-2xl">Basic</div>
+                        <div class="pt-1 text-sm">Start pack + 3 submissions</div>
+                    </div>
+                    <div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 5</div>
+                </div>
+                <div @click="toggle = 'silver'"
+                    :class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'silver' }"
+                    class="flex mt-3 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
+                    <div class="self-center flex-shrink p-5">
+                        <svg x-show="toggle === 'silver'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                            style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                            <ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
+                            <polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                391.88,166.392 " />
+                        </svg>
+                        <svg x-show="toggle != 'silver'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
+                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                            y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
+                            xml:space="preserve">
+                            <ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
+                        </svg>
+                    </div>
+                    <div class="flex-grow px-0 py-5 md:px-5">
+                        <div class="text-2xl">Silver</div>
+                        <div class="pt-1 text-sm text-gray-500">Start pack + 10 submissions</div>
+                    </div>
+                    <div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 10</div>
+                </div>
+                <div @click="toggle = 'gold'" :class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'gold' }"
+                    class="flex mt-3 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
+                    <div class="self-center flex-shrink p-5">
+                        <svg x-show="toggle === 'gold'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                            style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                            <ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
+                            <polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                391.88,166.392 " />
+                        </svg>
+                        <svg x-show="toggle != 'gold'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
+                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+                            y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
+                            xml:space="preserve">
+                            <ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
+                        </svg>
+                    </div>
+                    <div class="flex-grow px-0 py-5 md:px-5">
+                        <div class="text-2xl">Gold</div>
+                        <div class="pt-1 text-sm text-gray-500">Start pack + 20 submissions</div>
+                    </div>
+                    <div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 15</div>
+                </div>
+            </aside>
+            <div x-show="toggle === 'basic'"
+                class="flex w-full mt-10 bg-white dark:bg-gray-800  rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
+                <div class="flex-grow px-8 py-5 dark:text-white dark:border-2 dark:rounded-l-md dark:border-emerald-300">
+                    <div class="text-4xl">
+                        Basic Package
+                    </div>
+                    <div class="mt-0 text-lg text-gray-500">3 Submissions</div>
+
+                    <div class="flex mt-5 ">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">Starter pack</div>
+                    </div>
+                    <div class="flex">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">3 Submissions</div>
+                    </div>
+                    <div class="flex">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">FREE Ebook</div>
+                    </div>
+                    <div class="flex">
+                        <div class="mt-8">
+                            <a href="#">
+                                <div
+                                    class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
+                                    Choose Package
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex w-64 h-full bg-blue-500 dark:border-l-2  bg-opacity-25 rounded-r md:flex-shrink bg-[url(https://picsum.photos/400/400?grayscale)]"
+                  ></div>
+            </div>
+            <div x-show="toggle === 'silver'"
+                class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
+                <div class="flex-grow px-8 py-5 dark:text-white">
+                    <div class="text-4xl ">
+                        Silver Package
+                    </div>
+                    <div class="mt-0 text-lg text-gray-500">10 Submissions</div>
+
+                    <div class="flex mt-5">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">Starter pack</div>
+                    </div>
+                    <div class="flex">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">10 Submissions</div>
+                    </div>
+                    <div class="flex">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">FREE Ebook</div>
+                    </div>
+                    <div class="flex">
+                        <div class="mt-8">
+                            <a href="#">
+                                <div
+                                    class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
+                                    Choose Package
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex w-64 h-full bg-blue-500 dark:border-l-2 dark:border-emerald-300 bg-opacity-25 rounded-r md:flex-shrink"
+                    style="background: url('https://picsum.photos/400/400?grayscale');"></div>
+            </div>
+            <div x-show="toggle === 'gold'"
+                class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
+                <div class="flex-grow px-8 py-5 dark:text-white">
+                    <div class="text-4xl">
+                        Gold Package
+                    </div>
+                    <div class="mt-0 text-lg text-gray-500">20 Submissions</div>
+
+                    <div class="flex mt-5">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">Starter pack</div>
+                    </div>
+                    <div class="flex">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">20 Submissions</div>
+                    </div>
+                    <div class="flex">
+                        <div class="self-center flex-shrink">
+                            <svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+                                style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                                <polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
+                                    391.88,166.392 " />
+                            </svg>
+                        </div>
+                        <div class="self-center flex-grow ml-3">FREE Ebook</div>
+                    </div>
+                    <div class="flex">
+                        <div class="mt-8">
+                            <a href="#">
+                                <div
+                                    class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
+                                    Choose Package
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex w-64 h-full bg-blue-500 bg-opacity-25 dark:border-l-2 dark:border-emerald-300 rounded-r md:flex-shrink"
+                    style="background: url('https://picsum.photos/400/400?grayscale');"></div>
+            </div>
+        </div>
+    </div>
+    </section>
+
+    
+    <!-- pricing 2 end -->
+      
+    
+    <!-- contact 7 start -->  
+    <section class="w-full text-gray-900 py-36 bg-center bg-cover bg-no-repeat bg-[url('https://images.unsplash.com/photo-1623479322729-28b25c16b011?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=1280')]" >
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-4 flex items-center justify-center">
+            <div class="lg:w-3/6 lg:pr-0 pr-0">
+                <h1 class="font-medium text-5xl text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
+                <p class="leading-relaxed mt-4 text-white">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            </div>
+            <div class="lg:w-3/6 xl:w-2/5 md:w-full bg-gray-50 dark:bg-gray-800 p-8 flex flex-col lg:ml-auto w-full mt-10 lg:mt-0 rounded-md">
+                <div class="relative mb-4">
+                    <label for="full-name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
+                    <input type="text" id="name" name="name" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
+                </div>
+                <div class="relative mb-4">
+                    <label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
+                    <input type="email" id="email" name="email" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
+                </div>
+                <div class="relative mb-4">
+                    <label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Phone</label>
+                    <input type="email" id="phone" name="phone" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
+                </div>
+                <div class="relative mb-4">
+                    <label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
+                    <textarea id="message" name="message" rows="4" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out"> </textarea>
+                </div>
+                <button class="text-white bg-indigo-500 rounded-md border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-300 dark:text-gray-800 dark:font-bold text-lg">Submit</button>
+            </div>
+        </div>
+    </section>
+    
+    <!-- contact 7 end -->
+
+
+
+    <!--footer 6 start--> 
+
+    <footer class="bg-gray-50 dark:bg-gray-800">
+      <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
+        <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+    
+        <div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-3">
+          <div class="lg:order-last">
+            <p class="font-medium dark:text-gray-300 dark:hover:text-sky-300">
+              Newsletter
+            </p>
+    
+            <form class="max-w-sm mt-4">
+              <div class="relative">
+                <label class="sr-only" for="email"> Email </label>
+    
+                <input class="w-full py-4 pl-3 pr-16 text-sm border-2 border-gray-200 rounded-lg" id="email" type="email" placeholder="Enter your email address">
+    
+                <button class="absolute p-2 text-white -translate-y-1/2 bg-blue-600 rounded-full hover:bg-blue-700 active:bg-blue-500 top-1/2 right-4" type="button">
+                  <svg class="w-4 h-4 rotate-45 translate-x-[1px] -translate-y-[1px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                  </svg>
+                </button>
+              </div>
+            </form>
+    
+            <div class="flex mt-8 space-x-6 text-gray-500">
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Facebook </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Instagram </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Twitter </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> GitHub </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+    
+              <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+                <span class="sr-only"> Dribbble </span>
+    
+                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+    
+          <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <p class="font-medium dark:text-gray-300 ">
+                Company
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300">
+                Services
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300">
+                Helpful Links
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300">
+                Legal
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
+              </nav>
+            </div>
+          </div>
+        </div>
+    
+        <p class="mt-8 text-xs text-gray-500">
+          © 2022 Company Name
+        </p>
+      </div>
+    </footer>
+    <!--footer 6 end -->
 
 <!-- start of script section -->
 <script type="text/javascript">

public/template/23_template.html

@@ -15,6 +15,388 @@
     
 
 
+    <!-- header 23 start --> 
+
+    <header class="dark:bg-gray-800">
+
+          
+        <nav class="border-gray-200 px-2   dark:bg-gray-800 py-3">
+          <div class="container mx-auto flex flex-wrap items-center justify-between">
+          <a href="#" class="flex">
+            <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)">
+              <path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
+              <span class="self-center text-lg font-semibold whitespace-nowrap dark:text-gray-300">FlowBite</span>
+          </a>
+          <div class="flex md:order-2">
+              <div class="relative mr-3 md:mr-0 hidden md:block">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
+                </div>
+                <input type="text" id="email-adress-icon" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2" placeholder="Search...">
+              </div>
+              <button data-collapse-toggle="mobile-menu-3" type="button" class="md:hidden text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-lg inline-flex items-center justify-center" aria-controls="mobile-menu-3" aria-expanded="false">
+              <span class="sr-only">Open main menu</span>
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+              <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+            </button>
+          </div>
+          <div class="hidden md:flex justify-between items-center w-full md:w-auto md:order-1" id="mobile-menu-3">
+            <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
+              <li>
+                <a href="#" class="bg-blue-700 md:bg-transparent block pl-3 pr-4 py-2 text-gray-300 active:text-gray-300 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
+              </li>
+              <li>
+                <a href="#" class="text-gray-500 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 ">About</a>
+              </li>
+              <li>
+                <a href="#" class="text-gray-500 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
+              </li>
+            </ul>
+          </div>
+          </div>
+        </nav>
+    </header>
+      
+    <script type="text/javascript" class="toggle_script">
+      const toggleCollapse = (elementId, show = true) => {
+          const collapseEl = document.getElementById(elementId);
+
+          if (show) {
+            collapseEl.classList.remove('hidden');
+          } else {
+            collapseEl.classList.add('hidden');
+          }
+        }; // Toggle target elements using [data-collapse-toggle]
+
+
+        document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
+          var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');   
+          collapseToggleEl.addEventListener('click', function () {
+            toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
+          });
+        });
+        window.toggleCollapse = toggleCollapse;
+    </script>
+    
+    <!-- header 23 end -->
+
+    <!-- section 3 start --> 
+    <section class="bg-gray-100 dark:bg-gray-900 lg:py-24 lg:flex lg:justify-center">
+        <div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
+            <div class="lg:w-1/2">
+                <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
+            </div>
+
+            <div class="max-w-xl px-6 py-12 lg:max-w-5xl lg:w-1/2">
+                <h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-blue-600 dark:text-blue-400">Idea</span></h2>
+                <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
+                
+                <div class="mt-8">
+                    <a href="#" class="px-5 py-2 font-semibold text-gray-100 transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Start Now</a>
+                </div>
+            </div>
+        </div>
+    </section> 
+    
+    <!-- section 3 end -->
+
+
+    <!-- feature 2 start --> 
+    <section class="bg-white dark:bg-gray-800">
+        <div class="container px-6 py-24 mx-auto">
+            <h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
+            
+            <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-16 md:grid-cols-2 xl:grid-cols-3">
+                <div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
+                    <span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                        </svg>
+                    </span>
+
+                    <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Copy & paste components</h1>
+
+                    <p class="text-gray-500 dark:text-gray-300">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                    </p>
+
+                    <a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
+                        <span class="mx-1">read more</span>
+                        <svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    </a>
+                </div>
+
+                <div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
+                    <span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                        </svg>
+                    </span>
+
+                    <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Zero Configrations</h1>
+
+                    <p class="text-gray-500 dark:text-gray-300">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                    </p>
+
+                    <a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
+                        <span class="mx-1">read more</span>
+                        <svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    </a>
+                </div>
+
+                <div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
+                    <span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                        </svg>
+                    </span>
+
+                    <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
+
+                    <p class="text-gray-500 dark:text-gray-300">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                    </p>
+
+                    <a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
+                        <span class="mx-1">read more</span>
+                        <svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- feature 2 end -->
+
+
+
+    <!-- team 2 start --> 
+
+    <section class="bg-white dark:bg-gray-900">
+        <div class="container px-24 py-24 mx-auto">
+            <div class="xl:flex xl:items-center xL:-mx-4">
+                <div class="xl:w-1/2 xl:mx-4">
+                    <h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">Our Team</h1>
+                    
+                    <p class="max-w-2xl mt-4 text-gray-500 dark:text-gray-300">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo incidunt ex placeat modi magni quia error alias, adipisci rem similique, at omnis eligendi optio eos harum.
+                    </p>
+                </div>
+                
+                <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-0 xl:mx-4 xl:w-1/2 md:grid-cols-2">
+                    <div>
+                        <img class="object-cover rounded-xl aspect-square" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
+                        
+                        <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white">John Doe</h1>
+                        
+                        <p class="mt-2 text-gray-500 capitalize dark:text-gray-300">Full stack developer</p>
+                    </div>
+
+                    <div>
+                        <img class="object-cover rounded-xl aspect-square" src="https://images.unsplash.com/photo-1499470932971-a90681ce8530?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+                        
+                        <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white">Mia</h1>
+                        
+                        <p class="mt-2 text-gray-500 capitalize dark:text-gray-300">Graphic Designer</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- team 2 end -->
+
+
+    <!-- faq 3 start  --> 
+
+    <div class="dark:bg-gray-800">
+        <div class="mx-auto max-w-6xl py-24">
+            <div class="p-2 rounded">
+                <div class="flex flex-col md:flex-row">
+                  <div class="md:w-1/3 p-4 text-sm">
+    
+                    <div class="sticky inset-x-0 top-0 left-0 py-12 ">
+                        
+                            <div class="text-3xl text-green-400 mb-8">Frequently asked questions.</div>
+                            <div class="mb-2 text-lg dark:text-gray-300">Lorem Ipsum ?</div>
+                            <div class="text-s text-gray-600">See our FAQ for more details</div>
+        
+                            <div class="relative text-gray-600 mt-8 lg:mr-16">
+                                <input 
+                                x-ref="searchField"
+                                x-model="search"
+                                x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
+                                type="search" name="serch" placeholder="Search" class="bg-white w-full h-10 px-5 rounded-full text-sm focus:outline-none">
+                                <button type="submit" class="focus:outline-none absolute right-0 top-0 mt-3 mr-4">
+                                  <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
+                                    <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
+                                  </svg>
+                                </button>
+                              </div>
+        
+                      </div>
+                  </div>
+                    <div class="md:w-2/3 py-12 ">
+                        <div class="p-4">
+    
+                <div class="item px-6 py-6 my-2 rounded-lg bg-gray-900 border-2 border-emerald-300" x-data="{isOpen : false}">
+                    <a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
+                        <h4 :class= "isOpen ? 'text-green-400 font-medium' : 'text-gray-300 font-medium' "  >Lorem Ipsum ?</h4>
+                        <svg 
+                        :class="{'transform rotate-180' : isOpen == true}"
+                        class="w-5 h-5 text-gray-500"
+                            fill="none" stroke-linecap="round" 
+                            stroke-linejoin="round" stroke-width="2" 
+                            viewBox="0 0 24 24" stroke="currentColor">
+                            <path d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    </a>
+                    <div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    </div>
+                </div>
+                
+                <div class="item px-6 py-6  my-2 rounded-lg bg-gray-900 border-2 border-emerald-300" x-data="{isOpen : false}">
+                    <a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
+                        <h4 :class= "isOpen ? 'text-green-400 font-medium' : 'text-gray-300 font-medium' " >Lorem Ipsum ?</h4>
+                        <svg 
+                        :class="{'transform rotate-180' : isOpen == true}"
+                        class="w-5 h-5 text-gray-500"
+                            fill="none" stroke-linecap="round" 
+                            stroke-linejoin="round" stroke-width="2" 
+                            viewBox="0 0 24 24" stroke="currentColor">
+                            <path d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    </a>
+                    <div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    </div>
+                </div>
+                
+                <div class="item px-6 py-6   my-2 rounded-lg bg-gray-900 border-2 border-emerald-300" x-data="{isOpen : false}">
+                    <a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
+                        <h4 :class= "isOpen ? 'text-green-400 font-medium' : 'text-gray-300 font-medium' " >Lorem Ipsum ?</h4>
+                        <svg 
+                        :class="{'transform rotate-180' : isOpen == true}"
+                        class="w-5 h-5 text-gray-500"
+                            fill="none" stroke-linecap="round" 
+                            stroke-linejoin="round" stroke-width="2" 
+                            viewBox="0 0 24 24" stroke="currentColor">
+                            <path d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    </a>
+                    <div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    </div>
+                </div>
+                
+                
+            </div>
+    
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- faq 3 end -->
+
+
+    <!-- footer 13 start -->
+ 
+    <section class="dark:bg-gray-900">
+        <footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 ">
+        <div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
+          <div class="sm:col-span-2">
+            <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
+              <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                <rect x="3" y="1" width="7" height="12"></rect>
+                <rect x="3" y="17" width="7" height="6"></rect>
+                <rect x="14" y="1" width="7" height="6"></rect>
+                <rect x="14" y="11" width="7" height="12"></rect>
+              </svg>
+              <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-300 uppercase">Company</span>
+            </a>
+            <div class="mt-6 lg:max-w-sm">
+              <p class="text-sm text-gray-500 ">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
+              </p>
+              <p class="mt-4 text-sm text-gray-500 ">
+                Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+              </p>
+            </div>
+          </div>
+          <div class="space-y-2 text-sm">
+            <p class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Contacts</p>
+            <div class="flex">
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Phone:</p>
+              <a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">850-123-5021</a>
+            </div>
+            <div class="flex">
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Email:</p>
+              <a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300  text-gray-300 hover:text-purple-400">info@lorem.mail</a>
+            </div>
+            <div class="flex">
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Address:</p>
+              <a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-400 text-gray-300 hover:text-purple-300">
+                312 Lovely Street, NY
+              </a>
+            </div>
+          </div>
+          <div>
+              <span class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Social</span>
+            <div class="flex items-center mt-1 space-x-3">
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                  <path
+                    d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
+                  ></path>
+                </svg>
+              </a>
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+                  <circle cx="15" cy="15" r="4"></circle>
+                  <path
+                    d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
+                  ></path>
+                </svg>
+              </a>
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                  <path
+                    d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
+                  ></path>
+                </svg>
+              </a>
+            </div>
+            <p class="mt-4 text-sm text-gray-500">
+              Bacon ipsum dolor amet short ribs pig sausage prosciutto chicken spare ribs salami.
+            </p>
+          </div>
+        </div>
+        <div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
+          <p class="text-sm text-gray-600">
+            © Copyright 2020 Lorem Inc. All rights reserved.
+          </p>
+          <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
+            <li>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
+            </li>
+            <li>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
+            </li>
+            <li>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms &amp; Conditions</a>
+            </li>
+          </ul>
+        </div>
+        </footer>
+    </section>
+    <!-- footer 13 end -->
+
+
+
 
 
 

public/template/24_template.html

@@ -15,9 +15,556 @@
     
 
 
+    <!-- header 8 start --> 
+    <div class="bg-gray-900">
+      <div x-data="{open_12_template_nav: false}" class="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+        <div class="relative flex items-center justify-between">
+          <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+            <svg class="w-8 text-teal-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+              <rect x="3" y="1" width="7" height="12"></rect>
+              <rect x="3" y="17" width="7" height="6"></rect>
+              <rect x="14" y="1" width="7" height="6"></rect>
+              <rect x="14" y="11" width="7" height="12"></rect>
+            </svg>
+            <span class="ml-2 text-xl font-bold tracking-wide text-gray-100 uppercase">Company</span>
+          </a>
+          <ul class="hidden md:block md:flex items-center space-x-8 lg:flex">
+            <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Product</a></li>
+            <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Features</a></li>
+            <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Pricing</a></li>
+            <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">About us</a></li>
+            <li>
+              <a
+                href="#"
+                class="inline-flex items-center justify-center h-8 px-4 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                aria-label="Sign up"
+                title="Sign up"
+              >
+                Sign up
+              </a>
+            </li>
+          </ul>
+          <!-- Mobile menu -->
+          <div  class="md:hidden">
+            <button @click="open_12_template_nav= ! open_12_template_nav" aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline">
+              <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
+                <path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
+                <path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
+              </svg>
+            </button>
+            <div x-show="open_12_template_nav" class="absolute top-0 left-0 w-full ">
+              <div class="p-5 bg-white border rounded shadow-sm">
+                <div class="flex items-center justify-between mb-4">
+                  <div>
+                    <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+                      <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                        <rect x="3" y="1" width="7" height="12"></rect>
+                        <rect x="3" y="17" width="7" height="6"></rect>
+                        <rect x="14" y="1" width="7" height="6"></rect>
+                        <rect x="14" y="11" width="7" height="12"></rect>
+                      </svg>
+                      <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
+                    </a>
+                  </div>
+                  <div>
+                    <button @click="open_12_template_nav= false" aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                      <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                        <path
+                          fill="currentColor"
+                          d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <nav>
+                  <ul class="space-y-4">
+                    <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Product</a></li>
+                    <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Features</a></li>
+                    <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Pricing</a></li>
+                    <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">About us</a></li>
+                    <li>
+                      <a
+                      href="#"
+                        class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                        aria-label="Sign up"
+                        title="Sign up"
+                      >
+                        Sign up
+                      </a>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+            </div>
+           
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- header 8 end -->
 
 
 
+    <!-- hero 13 start --> 
+    <section class=" dark:bg-gray-800">
+      <header class="px-4 py-24 mx-auto max-w-7xl">
+
+        <div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
+          <h1 class="mb-6 text-4xl font-extrabold leading-none tracking-normal text-gray-900 dark:text-gray-300 md:text-6xl md:tracking-tight">
+            All your <span class="block w-full text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500 dark:bg-gradient-to-r dark:from-cyan-300 dark:to-emerald-500 lg:inline">customer feedback</span> in one single place.
+          </h1>
+          <p class="px-0 mb-6 text-lg dark:text-gray-500 text-gray-600 md:text-xl lg:px-24">
+            Hellonext is a feature voting software where you can allow your users to vote on features, publish roadmap, and complete your customer feedback loop.
+          </p>
+          <div class="mb-4 space-x-0 md:space-x-2 md:mb-8">
+            <a class="inline-flex items-center justify-center w-full mb-2 dark:text-cyan-400 sm:w-auto sm:mb-0" href="#">
+              Get Started
+              <svg class="w-4 h-4 ml-1 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </a>
+            <a class="inline-flex items-center justify-center w-full mb-2 dark:text-emerald-300 sm:w-auto sm:mb-0" href="#">
+              Book a Demo
+              <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                  fill-rule="evenodd"
+                  d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div class="w-full mx-auto mt-20 text-center dark:text-gray-500  md:w-10/12">
+          <img src="/hero.jpg" alt="Hellonext feedback boards software screenshot" class="w-full rounded-lg shadow-2xl" />
+        </div>
+
+      </header>
+    </section>
+    <!-- hero 13 end -->
+
+
+
+    <!-- feature 10 start --> 
+    <section class="dark:bg-gray-900 dark:text-gray-100">
+        <div class="container max-w-xl p-6 py-12 mx-auto space-y-24 lg:px-8 lg:max-w-7xl">
+            <div>
+                <h2 class="text-3xl font-bold tracking-tight text-center sm:text-5xl dark:text-gray-50">Aliquip definiebas ad est</h2>
+                <p class="max-w-3xl mx-auto mt-4 text-xl text-center dark:text-gray-400">Quando cetero his ne, eum admodum sapientem ut.</p>
+            </div>
+            <div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
+                <div>
+                    <h3 class="text-2xl font-bold tracking-tight sm:text-3xl dark:text-gray-50">Ad vix debet docendi</h3>
+                    <p class="mt-3 text-lg dark:text-gray-400">Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates.</p>
+                    <div class="mt-12 space-y-12">
+                        <div class="flex">
+                            <div class="flex-shrink-0">
+                                <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Per ei quaeque sensibus</h4>
+                                <p class="mt-2 dark:text-gray-400">Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.</p>
+                            </div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex-shrink-0">
+                                <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Cu imperdiet posidonium sed</h4>
+                                <p class="mt-2 dark:text-gray-400">Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.</p>
+                            </div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex-shrink-0">
+                                <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </div>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Nulla omittam sadipscing mel ne</h4>
+                                <p class="mt-2 dark:text-gray-400">At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div aria-hidden="true" class="mt-10 lg:mt-0">
+                    <img src="https://source.unsplash.com/random/360x480" alt="" class="mx-auto rounded-lg shadow-lg dark:bg-gray-500">
+                </div>
+            </div>
+            <div>
+                <div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
+                    <div class="lg:col-start-2">
+                        <h3 class="text-2xl font-bold tracking-tight sm:text-3xl dark:text-gray-50">Eam nibh gloriatur ex</h3>
+                        <p class="mt-3 text-lg dark:text-gray-400">Per odio fabellas consulatu cu. Utroque detracto mel ea, quo te latine theophrastus. Ea his tale nibh dissentias, mei exerci tamquam euripidis cu.</p>
+                        <div class="mt-12 space-y-12">
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="ml-4">
+                                    <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Cibo augue offendit has ad</h4>
+                                    <p class="mt-2 dark:text-gray-400">An per velit appellantur, ut utinam minimum nominavi sit, odio nostro habemus ne nec. Ne sonet regione contentiones est.</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="ml-4">
+                                    <h4 class="text-lg font-medium leading-6 dark:text-gray-50">At eum ferri luptatum lobortis</h4>
+                                    <p class="mt-2 dark:text-gray-400">Te per quidam maiorum ocurreret, etiam delicatissimi usu ad. Ne has quod periculis. Te sit primis iisque efficiantur.</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                        </svg>
+                                    </div>
+                                </div>
+                                <div class="ml-4">
+                                    <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Dicunt verterem evertitur eu sea</h4>
+                                    <p class="mt-2 dark:text-gray-400">Audire principes rationibus eam an, autem nominavi luptatum per te. Sumo fabulas vim eu, sonet saperet eleifend ut vix.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-10 lg:mt-0 lg:col-start-1 lg:row-start-1">
+                        <img src="https://source.unsplash.com/random/361x481" alt="" class="mx-auto rounded-lg shadow-lg dark:bg-gray-500">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- feature 10 end -->
+
+
+
+    <!-- timeline 5 start -->
+    
+    <section class="dark:bg-gray-800">
+        
+        <div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative py-24">
+            <h1 class="text-3xl text-center font-bold text-blue-500">Timeline with Tailwindcss</h1>
+            <div class="border-l-2 mt-10">
+            <!-- Card 1 -->
+            <div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-blue-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
+                <!-- Dot Follwing the Left Vertical Line -->
+                <div class="w-5 h-5 bg-blue-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
+
+                <!-- Line that connecting the box with the vertical line -->
+                <div class="w-10 h-1 bg-blue-300 absolute -left-10 z-0"></div>
+
+                <!-- Content that showing in the box -->
+                <div class="flex-auto">
+                <h1 class="text-lg">Day 1</h1>
+                <h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
+                <h3>Classroom</h3>
+                </div>
+                <a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
+            </div>
+
+            <!-- Card 2 -->
+            <div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-pink-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
+                <!-- Dot Follwing the Left Vertical Line -->
+                <div class="w-5 h-5 bg-pink-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
+
+                <!-- Line that connecting the box with the vertical line -->
+                <div class="w-10 h-1 bg-pink-300 absolute -left-10 z-0"></div>
+
+                <!-- Content that showing in the box -->
+                <div class="flex-auto">
+                <h1 class="text-lg">Day 1</h1>
+                <h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
+                <h3>Classroom</h3>
+                </div>
+                <a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
+            </div>
+
+            <!-- Card 3 -->
+            <div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-green-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
+                <!-- Dot Follwing the Left Vertical Line -->
+                <div class="w-5 h-5 bg-green-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
+
+                <!-- Line that connecting the box with the vertical line -->
+                <div class="w-10 h-1 bg-green-300 absolute -left-10 z-0"></div>
+
+                <!-- Content that showing in the box -->
+                <div class="flex-auto">
+                <h1 class="text-lg">Day 1</h1>
+                <h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
+                <h3>Classroom</h3>
+                </div>
+                <a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
+            </div>
+
+            <!-- Card 4 -->
+            <div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-purple-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
+                <!-- Dot Follwing the Left Vertical Line -->
+                <div class="w-5 h-5 bg-purple-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
+
+                <!-- Line that connecting the box with the vertical line -->
+                <div class="w-10 h-1 bg-purple-300 absolute -left-10 z-0"></div>
+
+                <!-- Content that showing in the box -->
+                <div class="flex-auto">
+                <h1 class="text-lg">Day 1</h1>
+                <h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
+                <h3>Classroom</h3>
+                </div>
+                <a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
+            </div>
+
+            <!-- Card 5 -->
+            <div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-yellow-600 text-white rounded mb-10 flex-col md:flex-row">
+                <!-- Dot Follwing the Left Vertical Line -->
+                <div class="w-5 h-5 bg-yellow-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 -mt-2 md:mt-0"></div>
+
+                <!-- Line that connecting the box with the vertical line -->
+                <div class="w-10 h-1 bg-yellow-300 absolute -left-10 z-0"></div>
+
+                <!-- Content that showing in the box -->
+                <div class="flex-auto">
+                <h1 class="text-lg">Day 1</h1>
+                <h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
+                <h3>Classroom</h3>
+                </div>
+                <a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
+            </div>
+            </div>
+        </div>
+    
+    </section>
+    <!-- timeline 5 end -->
+
+
+    <!-- pricing 14 start  --> 
+    <div class="bg-white dark:bg-gray-900">
+    <div class="container px-6 py-24 mx-auto">
+        <h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Simple pricing plan</h1>
+        
+        <p class="max-w-2xl mx-auto mt-4 text-center text-gray-500 xl:mt-6 dark:text-gray-300">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias quas magni libero consequuntur voluptatum velit amet id repudiandae ea, deleniti laborum in neque eveniet.
+        </p>
+        
+        <div class="grid grid-cols-1 gap-8 mt-6 lg:grid-cols-3 xl:mt-12">
+            <div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
+                <div class="flex flex-col items-center space-y-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                    </svg>
+
+                    <h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Basic</h2>
+                </div>
+                
+                <h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">Free</h2>
+            </div>
+
+            <div class="flex items-center justify-between px-8 py-4 border border-blue-500 cursor-pointer rounded-xl">
+                <div class="flex flex-col items-center space-y-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 dark:text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                    </svg>
+
+                    <h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Standard</h2>
+                </div>
+                
+                
+                <div class="flex flex-col items-center space-y-1">
+                    <div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
+                        Save 30%
+                    </div>
+
+                    <h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-500 sm:text-3xl">$99 <span class="text-base font-medium">/Yearly</span></h2>
+                </div>
+            </div>
+
+            <div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
+                <div class="flex flex-col items-center space-y-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                    </svg>
+
+                    <h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Pro</h2>
+                </div>
+
+                <div class="flex flex-col items-center space-y-1">
+                        <div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
+                            Save 20%
+                        </div>
+
+                        <h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
+                    </div>
+            </div>
+        </div>
+
+        <div class="p-8 mt-8 space-y-8 bg-gray-100 dark:bg-gray-800 rounded-xl">
+            <div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
+                <p class="textlg sm:text-xl">Unlimited Links</p>
+
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+            </div>
+
+            <div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
+                <p class="textlg sm:text-xl">Own analytics platfrom</p>
+
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+            </div>
+
+            <div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
+                <p class="textlg sm:text-xl">Full Support with discussion</p>
+
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+            </div>
+
+            <div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
+                <p class="textlg sm:text-xl">Optimize hashtags</p>
+
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
+                </svg>
+            </div>
+
+            <div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
+                <p class="textlg sm:text-xl">Mobile app</p>
+
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+            </div>
+
+            <div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
+                <p class="textlg sm:text-xl">Unlimited users</p>
+
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
+                </svg>
+            </div>
+        </div>
+        
+        <div class="flex justify-center mt-8">
+            <button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
+                Choose Plan
+            </button>
+        </div>
+    </div>
+    </div>
+    
+    <!-- pricing 14 end  -->
+
+
+
+    <!-- footer 9 start --> 
+    <footer class="bg-gray-50 dark:bg-gray-800">
+      <div class="max-w-screen-xl px-4 pt-24 mx-auto sm:px-6 lg:px-8">
+        <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+
+
+        <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <p class="font-medium dark:text-gray-300 ">
+                Company
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300 ">
+                Services 
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300 ">
+                Helpful Links
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
+              </nav>
+            </div>
+    
+            <div>
+              <p class="font-medium dark:text-gray-300">
+                Legal
+              </p>
+    
+              <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+                <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
+              </nav>
+            </div>
+          </div>
+    
+        <div class="pt-8 mt-8 border-t border-gray-100 sm:items-center sm:justify-between sm:flex">
+          <p class="text-xs text-gray-500">
+            © 2022 Company Name
+          </p>
+    
+          <strong class="inline-flex items-center dark:text-white p-2 space-x-2 text-sm font-medium border border-gray-200 rounded">
+            <span> Status: </span>
+    
+            <span class="w-3 h-3 bg-green-600 rounded-full"></span>
+    
+            <span class="font-medium text-green-600">
+              All systems operational
+            </span>
+          </strong>
+        </div>
+      </div>
+    </footer>    
+    <!-- footer 9 end -->
+  
+    
+
 <!-- start of script section -->
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");

public/template/25_template.html

@@ -15,6 +15,528 @@
     
 
 
+    <!-- header 7 start --> 
+    <section class=" dark:bg-gray-800 ">
+
+      <div x-data="{open_11_template_nav: false}" class="px-4 py-6 mx-auto lg:py-8 sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+        <div class="relative flex items-center justify-between lg:justify-center lg:space-x-16">
+          <ul class=" hidden md:block flex items-center space-x-8 lg:flex">
+            <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
+            <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
+            <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
+          </ul>
+          <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+            <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+              <rect x="3" y="1" width="7" height="12"></rect>
+              <rect x="3" y="17" width="7" height="6"></rect>
+              <rect x="14" y="1" width="7" height="6"></rect>
+              <rect x="14" y="11" width="7" height="12"></rect>
+            </svg>
+            <span class="ml-2 text-xl font-bold tracking-wide dark:text-gray-300 text-gray-800 uppercase">Company</span>
+          </a>
+          <ul class=" hidden md:block flex items-center space-x-8 lg:flex">
+            <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
+            <li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
+            <li><a href="#" aria-label="Sign up" title="Sign up" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign up</a></li>
+          </ul>
+          <!-- Mobile menu -->
+          <div  class="md:hidden" >
+            <button @click="open_11_template_nav = ! open_11_template_nav" aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline hover:bg-purple-50 focus:bg-purple-50">
+              <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
+                <path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
+                <path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
+              </svg>
+            </button>
+            <!-- Mobile menu dropdown  -->
+            <div x-show="open_11_template_nav" @click.outside="open_11_template_nav = false" class="absolute top-0 left-0 w-full ">
+              <div class="p-5 bg-white dark:bg-gray-800 border rounded shadow-sm">
+                <div class="flex items-center justify-between mb-4">
+                  <div >
+                    <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+                      <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                        <rect x="3" y="1" width="7" height="12"></rect>
+                        <rect x="3" y="17" width="7" height="6"></rect>
+                        <rect x="14" y="1" width="7" height="6"></rect>
+                        <rect x="14" y="11" width="7" height="12"></rect>
+                      </svg>
+                      <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
+                    </a>
+                  </div>
+                  <div>
+                    <button  @click="open_11_template_nav = false" aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                      <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                        <path
+                          fill="currentColor"
+                          d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <nav>
+                  <ul class="space-y-4">
+                    <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200  hover:text-purple-400">Product</a></li>
+                    <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">Features</a></li>
+                    <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
+                    <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">About us</a></li>
+                    <li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide text-gray-700 dark:text-cyan-500 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
+                    <li>
+                      <a
+                        href="#"
+                        class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                        aria-label="Sign up"
+                        title="Sign up"
+                      >
+                        Sign up
+                      </a>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+            </div>
+          
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <!-- header 7 end -->
+
+
+
+    <!-- hero 17 start  --> 
+    <section class="py-24 dark:bg-gray-800 dark:text-gray-100">
+      <div class="container grid gap-6 mx-auto text-center lg:grid-cols-2 xl:grid-cols-5">
+        <div class=" mx-auto px-6 pt-20 pb-20 rounded-md sm:px-12 md:px-16 xl:col-span-2 dark:bg-gray-900">
+          <span class="block mb-2 dark:text-indigo-400">Some design system</span>
+          <h1 class="text-5xl font-extrabold dark:text-gray-50">Build it with Some Company</h1>
+          <p class="my-8">
+            <span class="font-medium dark:text-indigo-400 ">Modular and versatile.</span>Fugit vero facilis dolor sit neque cupiditate minus esse accusamus cumque at.
+          </p>
+          <form novalidate="" action="" class="self-stretch space-y-3">
+            <div class="pb-3">
+              <label for="name" class="text-sm sr-only">Your name</label>
+              <input id="name" type="text" placeholder="Your name" class="w-full py-2 px-2 text-gray-800 outline-none dark:rounded-md border-b-2 border-b-gray-800 dark:border-gray-700">
+            </div>
+            <div class="pb-3">
+              <label for="lastname" class="text-sm sr-only">Email address</label>
+              <input id="lastname" type="text" placeholder="Email address" class="w-full py-2 px-2 text-gray-800 outline-none dark:rounded-md  border-b-2 border-b-gray-800  dark:border-gray-700">
+            </div>
+            <button type="button" class="w-full py-2 font-semibold rounded bg-gray-800 text-gray-50 dark:bg-indigo-400 dark:text-gray-900">Join the waitlist</button>
+          </form>
+        </div>
+        <!-- <img src="https://source.unsplash.com/random/480x360" alt="" class="object-cover w-full rounded-md xl:col-span-3 dark:bg-coolGray-500"> -->
+        <img src="https://images.unsplash.com/photo-1643609186613-e9e96efeb9ec?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0NTM0MDIzNQ&ixlib=rb-1.2.1&q=80&w=480" alt="" class="object-cover w-5/6 my-auto mx-auto rounded-md xl:col-span-3 dark:bg-gray-500">
+      </div>
+    </section>
+
+    <!-- hero 17 end -->
+
+
+    <!-- feature 1 start  --> 
+    <section class="bg-gray-300 dark:bg-gray-900 ">
+        <div class="container px-6 py-24 mx-auto">
+            <h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="underline decoration-blue-500">Components</span></h1>
+            
+            <p class="mt-4 text-gray-500 xl:mt-6 dark:text-gray-300">
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum quam voluptatibus
+            </p>
+            
+            <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
+                <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
+                    <span class="inline-block text-blue-500 dark:text-blue-400">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
+                        </svg>
+                    </span>
+
+                    <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">elegant Dark Mode</h1>
+
+                    <p class="text-gray-500 dark:text-gray-300">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                    </p>
+
+                    <a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </a>
+                </div>
+
+                <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
+                    <span class="inline-block text-blue-500 dark:text-blue-400">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
+                        </svg>
+                    </span>
+
+                    <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Easy to customiztions</h1>
+
+                    <p class="text-gray-500 dark:text-gray-300">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                    </p>
+
+                    <a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </a>
+                </div>
+
+                <div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
+                    <span class="inline-block text-blue-500 dark:text-blue-400">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                        </svg>
+                    </span>
+
+                    <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
+
+                    <p class="text-gray-500 dark:text-gray-300">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                    </p>
+
+                    <a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- feature 1 end  -->
+
+
+
+    <!-- pricing 12 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100">
+      <h2 class="dark:text-gray-300 text-gray-800 font-bold text-center text-5xl pt-5">Price</h2>
+      <div class="container mx-auto px-6 py-24 overflow-x-auto">
+        <table class="w-full">
+          <caption class="sr-only">Pricing plan comparison</caption>
+          <thead>
+            <tr>
+              <th></th>
+              <th scope="col">
+                <h2 class="px-2 text-lg font-medium">Starter</h2>
+                <p class="mb-3">
+                  <span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">0€</span>
+                  <span class="font-medium dark:text-gray-400">/mo</span>
+                </p>
+              </th>
+              <th scope="col">
+                <h2 class="px-2 text-lg font-medium">Standard</h2>
+                <p class="mb-3">
+                  <span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">19€</span>
+                  <span class="font-medium dark:text-gray-400">/mo</span>
+                </p>
+              </th>
+              <th scope="col">
+                <h2 class="px-2 text-lg font-medium">Premium</h2>
+                <p class="mb-3">
+                  <span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">49€</span>
+                  <span class="font-medium dark:text-gray-400">/mo</span>
+                </p>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="space-y-6 text-center divide-y divide-gray-700">
+            <tr>
+              <th scope="row" class="text-left">
+                <h3 class="py-3">Euismod</h3>
+              </th>
+              <td>
+                <span class="block text-sm">1</span>
+              </td>
+              <td>
+                <span class="block text-sm">10</span>
+              </td>
+              <td>
+                <span class="block text-sm">100</span>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" class="text-left">
+                <h3 class="py-3">Principes et</h3>
+              </th>
+              <td>
+                <span class="block text-sm">0,5 GB</span>
+              </td>
+              <td>
+                <span class="block text-sm">5 GB</span>
+              </td>
+              <td>
+                <span class="block text-sm">500 GB</span>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" class="text-left">
+                <h3 class="py-3">Et mel porro</h3>
+              </th>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Free plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Standard plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" class="text-left">
+                <h3 class="py-3">Veniam suscipiantur</h3>
+              </th>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
+                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Standard plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" class="text-left">
+                <h3 class="py-3">Ornatus tacimates</h3>
+              </th>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
+                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Standard plan" class="w-5 h-5 mx-auto dark:text-gray-600">
+                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600" >
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" class="text-left">
+                <h3 class="py-3">Aliquam fastidii in mei</h3>
+              </th>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
+                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Standard plan" class="w-5 h-5 mx-auto dark:text-gray-600">
+                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+              <td>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                </svg>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    
+    <!-- pricing 12 end -->
+
+
+
+    <!-- faq 2 start -->
+    <section class="dark:bg-gray-900 dark:text-gray-100 bg-gray-300 ">
+      <div class="container flex flex-col items-center p-4 mx-auto md:p-8">
+          <h1 class="text-3xl font-bold leading-none text-center sm:text-4xl">Help Center</h1>
+          <div class="relative mt-6 mb-12">
+              <span class="absolute inset-y-0 flex items-center pl-2 mx-auto">
+                  <button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
+                      <svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-gray-100">
+                          <path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
+                      </svg>
+                  </button>
+              </span>
+              <input type="search" name="Search" placeholder="Search..." class="w-full py-3 pl-12 text-sm rounded-full border-2 sm:w-96 focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
+          </div>
+          <div class="flex flex-col w-full divide-y sm:flex-row sm:divide-y-0 sm:divide-x sm:px-8 lg:px-12 xl:px-32 divide-gray-700">
+              <div class="flex flex-col w-full divide-y divide-gray-700">
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Billing</a>
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Support</a>
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Account</a>
+              </div>
+              <div class="flex flex-col w-full divide-y divide-gray-700">
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Features</a>
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Contact us</a>
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">My orders</a>
+              </div>
+              <div class="hidden w-full divide-y sm:flex-col sm:flex divide-gray-700">
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Enterprise</a>
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Privacy</a>
+                  <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Developers</a>
+              </div>
+          </div>
+      </div>
+    </section>
+
+    <!-- faq 2 end -->
+
+
+
+
+    <!-- footer 12 start --> 
+    <div class="bg-gray-800">
+      <div class="px-4 pt-24 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+        <div class="grid row-gap-10 mb-8 lg:grid-cols-6">
+          <div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
+            <div>
+              <p class="font-medium tracking-wide text-gray-300">Category</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">News</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">World</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Games</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">References</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-medium tracking-wide text-gray-300">Apples</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Web</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">eCommerce</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Business</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Entertainment</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Portfolio</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-medium tracking-wide text-gray-300">Cherry</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Media</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Brochure</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Nonprofit</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Educational</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Projects</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <p class="font-medium tracking-wide text-gray-300">Business</p>
+              <ul class="mt-2 space-y-2">
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Infopreneur</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Personal</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Wiki</a>
+                </li>
+                <li>
+                  <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-200">Forum</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="md:max-w-md lg:col-span-2">
+            <span class="text-base font-medium tracking-wide text-gray-300">Subscribe for updates</span>
+            <form class="flex flex-col mt-4 md:flex-row">
+              <input
+                placeholder="Email"
+                required=""
+                type="text"
+                class="flex-grow w-full h-12 px-4 mb-3 transition duration-200 bg-white border border-gray-300 rounded shadow-sm appearance-none md:mr-2 md:mb-0 focus:border-purple-400 focus:outline-none focus:shadow-outline"
+              />
+              <button
+                type="submit"
+                class="inline-flex items-center justify-center h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+              >
+                Subscribe
+              </button>
+            </form>
+            <p class="mt-4 text-sm text-gray-500">
+              Bacon ipsum dolor amet short ribs pig sausage prosciuto chicken spare ribs salami.
+            </p>
+          </div>
+        </div>
+        <div class="flex flex-col justify-between pt-5 pb-10 border-t border-gray-800 sm:flex-row">
+          <p class="text-sm text-gray-500">
+            © Copyright 2020 Lorem Inc. All rights reserved.
+          </p>
+          <div class="flex items-center mt-4 space-x-4 sm:mt-0">
+            <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-400">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                <path
+                  d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
+                ></path>
+              </svg>
+            </a>
+            <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-400">
+              <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+                <circle cx="15" cy="15" r="4"></circle>
+                <path
+                  d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
+                ></path>
+              </svg>
+            </a>
+            <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-teal-400">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                <path
+                  d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--footer 12 end-->
+  
+
 
 
 

public/template/26_template.html

@@ -0,0 +1,649 @@
+<!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>Template 26</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+    
+
+
+    <!-- header 13 start --> 
+
+    <nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
+      <div class="container px-6 py-3 mx-auto md:flex">
+          <div class="flex items-center justify-between">
+              <div>
+                  <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+              </div>
+              
+              <!-- Mobile menu button -->
+              <div class="flex md:hidden">
+                  <button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                      <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                          <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                      </svg>
+                  </button>
+              </div>
+          </div>
+
+          <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+          <div  :class="mobile_nav_status ? 'block w-full md:flex md:items-center md:justify-between' : 'hidden w-full md:flex md:items-center md:justify-between '"  >
+              <div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
+              </div>
+              
+              <div class="relative">
+                  <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                      <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                          <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                  </span>
+
+                  <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
+              </div>
+          </div>
+      </div>
+    </nav>
+    <!-- header 13 end -->
+
+
+    
+
+    <!-- hero 19 start --> 
+    <section class="bg-white dark:bg-gray-800">
+
+      <div class="container px-6 py-16 mx-auto">
+          <div class="items-center lg:flex">
+              <div class="w-full lg:w-1/2">
+                  <div class="lg:max-w-lg text-left">
+                      <h1 class="text-2xl font-semibold text-gray-800 dark:text-white lg:text-3xl">Subscribe To The <span class="text-blue-500">Newsletter</span></h1>
+
+                      <p class="mt-4 text-gray-600 dark:text-gray-400">be the first to knows when our <span class="font-medium text-blue-500">Brand</span> is live</p>
+
+                      <div class="flex flex-col mt-8 space-y-3 lg:space-y-0 lg:flex-row">
+                          <input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Email Address">
+                          
+                          <button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-lg lg:w-auto lg:mx-4 hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
+                              Subscribe
+                          </button>
+                      </div>
+                  </div>
+              </div>
+      
+              <div class="flex items-center justify-center w-full mt-6 lg:mt-0 lg:w-1/2">
+                  <img class="w-full h-full max-w-md" src="https://merakiui.com/_nuxt/img/Email-campaign-bro.882e33f.svg" alt="#">
+              </div>
+          </div>
+      </div>
+    </section>
+
+    <!-- hero 19 end -->
+
+
+
+    <!-- feature 7 start --> 
+    <section class="bg-white dark:bg-gray-900">
+        <div class="container px-6 py-24 mx-auto">
+            <div class="lg:flex lg:items-center">
+                <div class="w-full space-y-12 lg:w-1/2 ">
+                    <div>
+                        <h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome Components</h1>
+                    
+                        <div class="mt-2">
+                            <span class="inline-block w-40 h-1 rounded-full bg-blue-500"></span>
+                            <span class="inline-block w-3 h-1 ml-1 rounded-full bg-blue-500"></span>
+                            <span class="inline-block w-1 h-1 ml-1 rounded-full bg-blue-500"></span>
+                        </div>
+                    </div>
+
+                    <div class="md:flex md:items-start md:-mx-4">
+                        <span class="inline-block p-2 text-blue-500 bg-blue-100 rounded-xl md:mx-4 dark:text-white dark:bg-blue-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                            </svg>
+                        </span>
+
+                        <div class="mt-4 md:mx-4 md:mt-0">
+                            <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Copy & paste components</h1>
+
+                            <p class="mt-3 text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="md:flex md:items-start md:-mx-4">
+                        <span class="inline-block p-2 text-blue-500 bg-blue-100 rounded-xl md:mx-4 dark:text-white dark:bg-blue-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                            </svg>
+                        </span>
+
+                        <div class="mt-4 md:mx-4 md:mt-0">
+                            <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Zero Configrations</h1>
+
+                            <p class="mt-3 text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="md:flex md:items-start md:-mx-4">
+                        <span class="inline-block p-2 text-blue-500 bg-blue-100 rounded-xl md:mx-4 dark:text-white dark:bg-blue-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
+                            </svg>
+                        </span>
+
+                        <div class="mt-4 md:mx-4 md:mt-0">
+                            <h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">elegant Dark Mode</h1>
+
+                            <p class="mt-3 text-gray-500 dark:text-gray-300">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="hidden lg:flex lg:items-center lg:w-1/2 lg:justify-center">
+                    <img class="w-[28rem] h-[28rem] object-cover xl:w-[34rem] xl:h-[34rem] rounded-full" src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=755&q=80" alt="">
+                </div>
+            </div>
+
+            <hr class="border-gray-200 my-12 dark:border-gray-700">
+
+            <div class="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
+                <div class="flex items-center justify-center col-span-1 md:col-span-2 lg:col-span-1">
+                    <svg class="h-12 text-gray-500 fill-current dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266 100"><path fill="none" d="M0 0h266v100H0z"></path><path d="M140.021 49.597c-1.784 0-3.07.585-4.374 1.181v13.486c1.249.119 1.965.119 3.15.119 4.282 0 4.869-1.961 4.869-4.699v-6.441c0-2.022-.671-3.646-3.645-3.646zm-28.438-.736c-2.971 0-3.649 1.631-3.649 3.651v1.135h7.294v-1.135c0-2.02-.678-3.651-3.645-3.651zm-55.09 14.037c0 1.598.754 2.428 2.418 2.428 1.785 0 2.842-.582 4.145-1.18v-3.199h-3.903c-1.848 0-2.66.344-2.66 1.951zm111.191-13.301c-2.976 0-4.007 1.624-4.007 3.646v7.379c0 2.027 1.031 3.656 4.007 3.656 2.968 0 4.007-1.629 4.007-3.656v-7.379c-.001-2.022-1.04-3.646-4.007-3.646zM41.909 71.172h-8.748V49.998H28.79v-7.296h4.372V38.32c0-5.953 2.467-9.492 9.479-9.492h5.838v7.298H44.83c-2.73 0-2.91 1.02-2.91 2.923l-.011 3.652h6.61l-.773 7.296h-5.837v21.175zm29.897.055h-7.291l-.315-1.844c-3.329 1.844-6.3 2.143-8.26 2.143-5.347 0-8.193-3.572-8.193-8.512 0-5.828 3.321-7.908 9.262-7.908h6.047v-1.26c0-2.975-.341-3.848-4.916-3.848h-7.48l.731-7.296h8.176c10.038 0 12.239 3.171 12.239 11.203v17.322zm24.793-20.694c-4.537-.778-5.84-.949-8.023-.949-3.921 0-5.106.865-5.106 4.195v6.299c0 3.33 1.185 4.199 5.106 4.199 2.183 0 3.486-.174 8.023-.955v7.117c-3.974.891-6.563 1.125-8.751 1.125-9.392 0-13.125-4.939-13.125-12.074v-5.111c0-7.141 3.733-12.089 13.125-12.089 2.188 0 4.777.235 8.751 1.13v7.113zm27.376 8.957h-16.042v.588c0 3.33 1.186 4.199 5.106 4.199 3.524 0 5.675-.174 10.204-.955v7.117c-4.368.891-6.644 1.125-10.929 1.125-9.393 0-13.128-4.939-13.128-12.074v-5.844c0-6.243 2.771-11.356 12.396-11.356s12.393 5.054 12.393 11.356v5.844zm28.437.135c0 6.896-1.971 11.926-13.911 11.926-4.312 0-6.841-.379-11.6-1.111V31.02l8.745-1.459V43.35c1.89-.702 4.336-1.059 6.562-1.059 8.746 0 10.203 3.921 10.203 10.222v7.112zm28.033.15c0 5.949-2.456 11.719-12.732 11.719-10.281 0-12.783-5.77-12.783-11.719v-5.744c0-5.952 2.502-11.723 12.783-11.723 10.276 0 12.732 5.771 12.732 11.723v5.744zm28.014 0c0 5.949-2.459 11.719-12.733 11.719-10.281 0-12.783-5.77-12.783-11.719v-5.744c0-5.952 2.502-11.723 12.783-11.723 10.274 0 12.733 5.771 12.733 11.723v5.744zm28.749 11.397h-9.479l-8.017-13.383v13.383h-8.748V31.019l8.748-1.459v25.849l8.017-12.707h9.479l-8.752 13.867 8.752 14.603zm-41.512-21.575c-2.971 0-4.002 1.624-4.002 3.646v7.379c0 2.027 1.031 3.656 4.002 3.656 2.967 0 4.017-1.629 4.017-3.656v-7.379c0-2.022-1.05-3.646-4.017-3.646zm46.505 16.581c1.473 0 2.646 1.201 2.646 2.701 0 1.523-1.174 2.711-2.657 2.711-1.476 0-2.673-1.188-2.673-2.711 0-1.5 1.197-2.701 2.673-2.701h.011zm-.011.42c-1.187 0-2.158 1.021-2.158 2.281 0 1.283.972 2.291 2.169 2.291 1.198.012 2.155-1.008 2.155-2.279s-.957-2.293-2.155-2.293h-.011zm-.503 3.853h-.48v-3.014c.252-.035.492-.07.852-.07.456 0 .754.096.937.227.177.133.272.336.272.623 0 .398-.262.637-.585.734v.023c.263.049.442.287.503.73.07.469.143.648.19.746h-.503c-.071-.098-.144-.373-.204-.77-.07-.383-.264-.527-.648-.527h-.333v1.298zm0-1.668h.348c.394 0 .729-.145.729-.518 0-.264-.19-.527-.729-.527-.157 0-.266.012-.348.023v1.022z"></path></svg>
+                </div>
+
+                <div class="flex items-center justify-center col-span-1 md:col-span-2 lg:col-span-1">
+                    <svg class="h-10 text-gray-500 fill-current dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 316 60"><g transform="translate(9.259 4.552) scale(.4941)"><path d="M52.1 102.1V82.5c20.8 0 36.8-20.6 28.9-42.4-3-8.1-9.4-14.6-17.5-17.5-21.8-7.9-42.4 8.1-42.4 28.9H1.5c0-33.1 32-58.9 66.7-48.1 15.2 4.7 27.2 16.8 31.9 31.9 10.8 34.8-14.9 66.8-48 66.8z"></path><path d="M32.6 63h19.5v19.5H32.6zm-15 34.5v-15h15v15h-15zM5 70h12.6v12.5H5z" fill-rule="evenodd"></path><path d="M181.5 30.2c-5.8-4-13-6.1-21.4-6.1h-18.3v58.1h18.3c8.4 0 15.6-2.1 21.4-6.4 3.2-2.2 5.7-5.4 7.4-9.3s2.6-8.5 2.6-13.7c0-5.1-.9-9.7-2.6-13.6-1.7-3.8-4.2-6.9-7.4-9zm-29 3.8h5.8c6.4 0 11.7 1.3 15.7 3.7 4.4 2.7 6.7 7.8 6.7 15.1 0 7.6-2.3 12.9-6.7 15.8-3.8 2.5-9.1 3.8-15.6 3.8h-5.8V34z"></path><use xlink:href="#A"></use><path d="M199 41.3h10.3v41H199zm47.8 3.4c-3.1-2.8-6.6-4.4-10.3-4.4-5.7 0-10.4 2-14.1 5.8s-5.5 8.8-5.5 14.7c0 5.8 1.8 10.7 5.5 14.7 3.7 3.8 8.4 5.8 14.1 5.8 4 0 7.4-1.1 10.2-3.3v1c0 3.4-.9 6-2.7 7.9-1.8 1.8-4.3 2.7-7.4 2.7-4.8 0-7.7-1.9-11.4-6.8l-7 6.7.2.3c1.5 2.1 3.8 4.2 6.9 6.2s6.9 3 11.5 3c6.1 0 11.1-1.9 14.7-5.6 3.7-3.7 5.5-8.7 5.5-14.9V41.3h-10.1v3.4zm-2.7 24.2c-1.8 2-4.1 3-7.1 3s-5.3-1-7-3c-1.8-2-2.7-4.7-2.7-8s.9-6.1 2.7-8.1 4.1-3.1 7-3.1c3 0 5.3 1 7.1 3.1 1.8 2 2.7 4.8 2.7 8.1s-1 6-2.7 8zm21.6-27.6H276v41h-10.3z"></path><use xlink:href="#A" x="66.7"></use><path d="M298.6 30.3h-10.1v11.1h-5.9v9.4h5.9v17c0 5.3 1.1 9.1 3.2 11.3s5.8 3.3 11.1 3.3c1.7 0 3.4-.1 5-.2h.5v-9.4l-3.5.2c-2.5 0-4.1-.4-4.9-1.3s-1.2-2.7-1.2-5.4V50.7h9.6v-9.4h-9.6v-11zm57.9-6.2h10.3v58.1h-10.3zm114.4 43.5c-1.8 2.1-3.7 3.9-5.2 4.8-1.4.9-3.2 1.4-5.3 1.4-3 0-5.5-1.1-7.5-3.4s-3-5.2-3-8.7 1-6.4 2.9-8.6c2-2.3 4.4-3.4 7.4-3.4 3.3 0 6.8 2.1 9.8 5.6l6.8-6.5c-4.4-5.8-10.1-8.5-16.9-8.5-5.7 0-10.6 2.1-14.6 6.1s-6 9.2-6 15.3 2 11.2 6 15.3 8.9 6.1 14.6 6.1c7.5 0 13.5-3.2 17.5-9.1l-6.5-6.4zM513.2 47c-1.5-2-3.5-3.7-5.9-4.9-2.5-1.2-5.3-1.8-8.5-1.8-5.8 0-10.5 2.1-14 6.3-3.4 4.2-5.2 9.3-5.2 15.4 0 6.2 1.9 11.3 5.7 15.3 3.7 3.9 8.8 5.9 14.9 5.9 6.9 0 12.7-2.8 16.9-8.4l.2-.3-6.7-6.5c-.6.8-1.5 1.6-2.3 2.4-1 1-2 1.7-3 2.2-1.5.8-3.3 1.1-5.2 1.1-2.9 0-5.2-.8-7-2.5-1.7-1.5-2.7-3.6-2.9-6.2h27.3l.1-3.8c0-2.7-.4-5.2-1.1-7.6-.7-2.3-1.8-4.5-3.3-6.6zm-22.5 9.7c.5-2 1.4-3.6 2.7-4.9 1.4-1.4 3.2-2.1 5.4-2.1 2.5 0 4.4.7 5.7 2.1 1.2 1.3 1.9 2.9 2.1 4.8h-15.9zm62.1-12.3c-3.1-2.7-7.4-4-12.8-4-3.4 0-6.6.8-9.5 2.2-2.7 1.4-5.3 3.6-7 6.6l.1.1 6.6 6.3c2.7-4.3 5.7-5.8 9.7-5.8 2.2 0 3.9.6 5.3 1.7s2 2.6 2 4.4v2c-2.6-.8-5.1-1.2-7.6-1.2-5.1 0-9.3 1.2-12.4 3.6s-4.7 5.9-4.7 10.2c0 3.8 1.3 7 4 9.3 2.7 2.2 6 3.4 9.9 3.4s7.6-1.6 10.9-4.3v3.4h10.1V55.9c.2-4.9-1.4-8.8-4.6-11.5zm-18.3 22.2c1.2-.8 2.8-1.2 4.9-1.2 2.5 0 5.1.5 7.8 1.5v4C545 73 542 74 538.3 74c-1.8 0-3.2-.4-4.1-1.2s-1.4-1.7-1.4-3 .6-2.4 1.7-3.2zm62.7-21.4c-2.9-3.2-6.9-4.8-12-4.8-4.1 0-7.4 1.2-9.9 3.5v-2.5h-10.1v41h10.3V59.7c0-3.1.7-5.6 2.2-7.3 1.5-1.8 3.4-2.6 6.1-2.6 2.3 0 4.1.8 5.4 2.3 1.3 1.6 2 3.7 2 6.4v23.7h10.3V58.5c0-5.6-1.4-10.1-4.3-13.3zm-253.6-.8c-3.1-2.7-7.4-4-12.8-4-3.4 0-6.6.8-9.5 2.2-2.7 1.4-5.3 3.6-7 6.6l.1.1 6.6 6.3c2.7-4.3 5.7-5.8 9.7-5.8 2.2 0 3.9.6 5.3 1.7s2 2.6 2 4.4v2c-2.6-.8-5.1-1.2-7.6-1.2-5.1 0-9.3 1.2-12.4 3.6s-4.7 5.9-4.7 10.2c0 3.8 1.3 7 4 9.3 2.7 2.2 6 3.4 9.9 3.4s7.6-1.6 10.9-4.3v3.4h10.1V55.9c.1-4.9-1.5-8.8-4.6-11.5zm-18.3 22.2c1.2-.8 2.8-1.2 4.9-1.2 2.5 0 5.1.5 7.8 1.5v4c-2.2 2.1-5.2 3.1-8.9 3.1-1.8 0-3.2-.4-4.1-1.2s-1.4-1.7-1.4-3 .5-2.4 1.7-3.2zm78.9 16.5c-16.5 0-30-13.4-30-30s13.4-30 30-30c16.5 0 30 13.4 30 30s-13.5 30-30 30zm0-49.3c-10.7 0-19.4 8.7-19.4 19.4s8.7 19.4 19.4 19.4 19.4-8.7 19.4-19.4-8.7-19.4-19.4-19.4z"></path></g><defs><path d="M204.3 23.4c-1.8 0-3.3.6-4.5 1.8s-1.9 2.7-1.9 4.4c0 1.8.6 3.3 1.9 4.5 1.2 1.2 2.7 1.9 4.5 1.9s3.3-.6 4.5-1.9c1.2-1.2 1.9-2.8 1.9-4.5 0-1.8-.6-3.3-1.9-4.4-1.2-1.2-2.8-1.8-4.5-1.8z"></path></defs></svg>
+                </div>
+
+                <div class="flex items-center justify-center col-span-1 md:col-span-2 lg:col-span-1">
+                    <svg class="h-8 mt-2 text-gray-500 fill-current dark:text-gray-300" viewBox="0 0 398 120" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero"><path d="M247.292 94.106C224.124 111.016 190.526 120 161.608 120c-40.544 0-77.046-14.822-104.673-39.476-2.164-1.936-.235-4.583 2.369-3.082 29.806 17.15 66.66 27.475 104.731 27.475 25.677 0 53.906-5.271 79.884-16.163 3.923-1.646 7.21 2.545 3.373 5.352"></path><path d="M256.533 82.534c-2.965-3.771-19.551-1.787-27.003-.897-2.254.277-2.605-1.692-.57-3.122 13.233-9.265 34.922-6.587 37.447-3.487 2.54 3.13-.666 24.802-13.073 35.147-1.91 1.59-3.718.744-2.877-1.357 2.782-6.952 9.04-22.505 6.076-26.284zM230.05 13.058V4.063c.015-1.378 1.04-2.29 2.291-2.283l40.493-.007c1.295 0 2.335.94 2.335 2.268v7.726c-.015 1.29-1.113 2.983-3.053 5.668l-20.97 29.843c7.78-.182 16.022.985 23.093 4.939 1.596.897 2.027 2.217 2.152 3.516v9.607c0 1.32-1.457 2.86-2.987 2.057-12.458-6.507-29-7.214-42.776.08-1.405.745-2.884-.765-2.884-2.086v-9.133c0-1.459.03-3.961 1.508-6.186l24.302-34.738h-21.162c-1.295 0-2.327-.927-2.342-2.276zM82.354 69.294H70.042c-1.171-.08-2.108-.956-2.203-2.072l.014-63.006c0-1.262 1.062-2.268 2.38-2.268L81.71 1.94c1.2.059 2.159.963 2.232 2.116v8.221h.234C87.163 4.326 92.8.613 100.39.613c7.708 0 12.539 3.713 15.98 11.664C119.361 4.326 126.14.613 133.393.613c5.175 0 10.804 2.123 14.251 6.893 3.916 5.311 3.111 12.993 3.111 19.755l-.015 39.764c0 1.255-1.061 2.262-2.379 2.262h-12.304c-1.23-.08-2.203-1.05-2.203-2.262l-.007-33.41c0-2.648.234-9.28-.344-11.796-.923-4.246-3.675-5.435-7.24-5.435-2.986 0-6.09 1.985-7.356 5.165-1.266 3.188-1.15 8.484-1.15 12.066v33.403c0 1.255-1.06 2.262-2.378 2.262h-12.297c-1.237-.08-2.21-1.051-2.21-2.262l-.015-33.41c0-7.025 1.142-17.362-7.59-17.362-8.858 0-8.506 10.074-8.506 17.362l-.007 33.403c-.022 1.276-1.084 2.283-2.401 2.283zm227.788-55.82c-9.084 0-9.662 12.328-9.662 20.017s-.117 24.131 9.545 24.131c9.545 0 10.006-13.262 10.006-21.345 0-5.303-.234-11.664-1.845-16.705-1.383-4.377-4.143-6.098-8.044-6.098zM310.025.613c18.284 0 28.173 15.647 28.173 35.533 0 19.222-10.92 34.468-28.173 34.468-17.933 0-27.712-15.647-27.712-35.132C282.305 15.86 292.2.612 310.025.612zm51.882 68.681h-12.275c-1.23-.08-2.211-1.05-2.211-2.261l-.015-63.028c.103-1.16 1.12-2.057 2.365-2.057l11.426-.008c1.076.059 1.961.788 2.188 1.766v9.636h.234c3.448-8.622 8.279-12.73 16.785-12.73 5.519 0 10.92 1.992 14.375 7.427C398 13.072 398 21.556 398 27.662v39.64c-.14 1.117-1.142 1.985-2.364 1.985h-12.349c-1.141-.073-2.064-.912-2.188-1.984V33.097c0-6.894.805-16.968-7.708-16.968-2.993 0-5.753 1.984-7.13 5.033-1.72 3.845-1.953 7.69-1.953 11.935v33.928c-.03 1.262-1.091 2.27-2.401 2.27zm-151.715-.16c-.813.73-1.991.78-2.913.284-4.092-3.385-4.824-4.953-7.064-8.177-6.756 6.864-11.543 8.921-20.305 8.921-10.372 0-18.438-6.376-18.438-19.134 0-9.965 5.424-16.742 13.139-20.061 6.683-2.925 16.023-3.458 23.167-4.253v-1.598c0-2.925.234-6.375-1.5-8.9-1.501-2.26-4.378-3.195-6.918-3.195-4.692 0-8.871 2.4-9.904 7.375-.212 1.11-1.024 2.204-2.137 2.262l-11.938-1.291c-1.01-.234-2.13-1.029-1.838-2.568C166.288 4.362 179.37 0 191.087 0c5.995 0 13.827 1.59 18.556 6.113 5.995 5.58 5.416 13.021 5.416 21.126v19.127c0 5.756 2.401 8.28 4.648 11.373.79 1.116.967 2.444-.036 3.26-2.518 2.102-6.983 5.968-9.443 8.15l-.036-.015zm-12.414-29.931v-2.656c-8.908 0-18.322 1.897-18.322 12.35 0 5.319 2.767 8.908 7.488 8.908 3.455 0 6.566-2.123 8.528-5.58 2.423-4.254 2.306-8.237 2.306-13.022zM48.72 69.133c-.813.73-1.991.781-2.913.285-4.092-3.385-4.824-4.953-7.064-8.177-6.763 6.864-11.55 8.921-20.305 8.921C8.06 70.162 0 63.786 0 51.028c0-9.965 5.417-16.742 13.139-20.061 6.683-2.925 16.015-3.458 23.16-4.253v-1.598c0-2.925.233-6.375-1.501-8.9-1.5-2.26-4.377-3.195-6.91-3.195-4.7 0-8.879 2.4-9.904 7.375-.212 1.11-1.024 2.204-2.137 2.262L3.91 21.367c-1.01-.234-2.13-1.029-1.845-2.568C4.81 4.362 17.89.007 29.615.007c5.995 0 13.827 1.59 18.556 6.113 5.995 5.581 5.416 13.022 5.416 21.126v19.128c0 5.755 2.401 8.28 4.648 11.372.79 1.116.967 2.444-.036 3.261-2.518 2.101-6.99 5.967-9.45 8.148l-.03-.021zm-12.422-29.93v-2.656c-8.908 0-18.32 1.897-18.32 12.35 0 5.319 2.766 8.908 7.487 8.908 3.462 0 6.573-2.123 8.528-5.58 2.422-4.254 2.305-8.237 2.305-13.022z"></path></g></svg>
+                </div>
+
+                <div class="flex items-center justify-center col-span-1 md:col-span-3 lg:col-span-1">
+                    <svg class="h-5 mt-1 text-gray-500 fill-current dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278.7 36.3"><g><path class="st0" d="M238.1 14.4v21.9h7V21.7h25.6v14.6h7V14.4h-39.6m6.2-7.1h27c3.8-.7 6.5-4.1 7.3-7.3H237c.8 3.2 3.6 6.5 7.3 7.3m-27.5 29c3.5-1.5 5.4-4.1 6.2-7.1h-31.5V.1h-7.1v36.2h32.4M131.9 7.2h25c3.8-1.1 6.9-4 7.7-7.1H125v21.4h32.4V29H132c-4 1.1-7.4 3.8-9.1 7.3h41.5V14.4H132l-.1-7.2m-61.6.1h27c3.8-.7 6.6-4.1 7.3-7.3H62.9c.8 3.2 3.6 6.5 7.4 7.3m0 14.3h27c3.8-.7 6.6-4.1 7.3-7.3H62.9c.8 3.2 3.6 6.5 7.4 7.3m0 14.7h27c3.8-.7 6.6-4.1 7.3-7.3H62.9c.8 3.2 3.6 6.6 7.4 7.3M0 .1c.8 3.2 3.6 6.4 7.3 7.2h11.4l.6.2v28.7h7.1V7.5l.6-.2h11.4c3.8-1 6.5-4 7.3-7.2V0L0 .1"></path></g></svg>
+                </div>
+                
+                <div class="flex items-center justify-center col-span-2 md:col-span-3 lg:col-span-1">
+                    <svg class="h-8 text-gray-500 fill-current dark:text-gray-300" viewBox="0 0 2270 546" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M888.413 394.397l-31.127 144.717h-71.593L903.977 14.642h84.81l111.28 524.472h-72.371l-30.35-144.717H888.413zm100.373-58.364l-24.124-125.3c-7.003-35.797-14.007-82.463-19.441-119.828h-3.126c-5.434 38.13-13.242 86.365-20.22 119.827l-24.902 125.301h91.813zM1373.34.648v441.205c0 28.806 1.556 70.828 3.1 97.274h-63.02l-4.67-45.9h-2.334c-12.451 26.445-41.244 52.138-79.362 52.138-70.037 0-112.837-76.275-112.837-193.755 0-133.848 56.794-196.881 116.728-196.881 30.336 0 54.46 14.02 67.689 42.8h1.556V.648h73.15zm-73.163 304.258c0-6.991 0-15.551-.778-23.359-3.89-34.227-23.345-63.798-49.79-63.798-45.927 0-61.477 63.798-61.477 133.848 0 77.818 20.232 132.278 59.142 132.278 16.342 0 38.118-8.56 50.569-53.681 1.556-6.226 2.334-15.577 2.334-24.111V304.906zm247.399 240.446c-75.471 0-129.957-64.59-129.957-194.52 0-137.752 64.576-196.116 133.835-196.116 74.705 0 128.387 66.924 128.387 194.546 0 150.19-73.927 196.09-131.5 196.09h-.765zm2.321-57.573c45.122 0 55.251-80.153 55.251-137.726 0-56.82-10.116-137.739-56.794-137.739-48.26 0-57.586 80.919-57.586 137.74 0 63.02 10.895 137.725 58.364 137.725h.765zM1723.938.648h73.137V203.74h1.556c19.455-34.227 45.913-49.025 79.375-49.025 64.577 0 105.055 73.15 105.055 189.099 0 135.391-55.25 201.537-117.506 201.537-37.353 0-58.364-20.246-74.719-53.708h-3.086l-3.904 47.47h-63.02c1.556-25.668 3.112-68.468 3.112-97.274V.648zm73.137 404.618c0 8.586.778 17.146 3.113 23.358 11.66 45.926 34.24 55.251 49.012 55.251 43.579 0 59.92-57.572 59.92-135.391 0-72.371-17.106-130.735-60.698-130.735-24.124 0-43.578 28.793-49.025 56.03-1.557 7.781-2.335 17.91-2.335 25.68v105.807h.013zm293.92-40.453c.779 97.273 42.788 121.384 87.145 121.384 26.458 0 49.025-6.213 65.367-14.007l10.895 52.916c-22.568 11.673-56.808 17.912-90.27 17.912-94.925 0-144.73-71.594-144.73-188.321 0-123.732 56.795-199.994 135.392-199.994s115.172 75.484 115.172 170.435c0 18.664-.792 30.35-1.557 40.453l-177.413-.778zm109.712-52.126c.778-66.924-22.567-102.707-51.347-102.707-38.144 0-55.264 55.251-57.586 102.707h108.933z" fill-rule="nonzero"></path><path d="M373.462 16.043h218.501v523.07L373.462 16.044zm-153.926 0H.88v523.07l218.657-523.07zm76.976 192.77l139.218 330.3H344.5l-41.633-105.197H200.964l95.548-225.103z"></path></g></svg>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- feature 7 end -->
+
+
+
+    <!-- pricing 15 start --> 
+    <section class="bg-white dark:bg-gray-800">
+      <div class="container px-6 py-24 mx-auto">
+          <div class="sm:flex sm:items-center sm:justify-between">
+              <div>
+                  <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Simple, transparent pricing</h2>
+                  <p class="mt-4 text-gray-500 dark:text-gray-400">No Contracts. No surorise fees.</p>
+              </div>
+
+              <div class="overflow-hidden p-0.5 mt-6 border rounded-lg dark:border-gray-700">
+                  <div class="sm:-mx-0.5 flex">
+                      <button class=" focus:outline-none px-3 w-1/2 sm:w-auto py-1 sm:mx-0.5 text-white bg-blue-500 rounded-lg">Monthly</button>
+                      <button class=" focus:outline-none px-3 w-1/2 sm:w-auto py-1 sm:mx-0.5 text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 bg-transparent rounded-lg hover:bg-gray-200">Yearly</button>
+                  </div>
+              </div>
+          </div>
+
+          <div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              <div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
+                  <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Intro</p>
+                  <h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$19 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
+                  <p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
+
+                  <div class="mt-8 space-y-8">
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
+                      </div>
+                  </div>
+
+                  <button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
+                      Choose plan
+                  </button>
+              </div>
+
+              <div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
+                  <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Base</p>
+                  <h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$39 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
+                  <p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
+
+                  <div class="mt-8 space-y-8">
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
+                      </div>
+                  </div>
+
+                  <button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
+                      Choose plan
+                  </button>
+              </div>
+
+              <div class="px-6 py-4 transition-colors duration-200 transform bg-gray-700 rounded-lg dark:bg-gray-600">
+                  <p class="text-lg font-medium text-gray-100">Popular</p>
+                  <h4 class="mt-2 text-4xl font-semibold text-gray-100">$99 <span class="text-base font-normal text-gray-400">/ Month</span></h4>
+                  <p class="mt-4 text-gray-300">For most businesses that want to optimaize web queries.</p>
+
+                  <div class="mt-8 space-y-8">
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-300">All limited links</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-300">Own analytics platform</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-300">Chat support</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-300">Optimize hashtags</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-300">Unlimited users</span>
+                      </div>
+                  </div>
+
+                  <button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
+                      Choose plan
+                  </button>
+              </div>
+
+              <div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
+                  <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Exterprise</p>
+                  <h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$199 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
+                  <p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
+
+                  <div class="mt-8 space-y-8">
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
+                      </div>
+
+                      <div class="flex items-center">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                          </svg>
+
+                          <span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
+                      </div>
+                  </div>
+
+                  <button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
+                      Choose plan
+                  </button>
+              </div>
+          </div>
+      </div>
+    </section>
+    
+    <!-- pricing 15 end -->
+
+
+    <!-- testimonial 8 start  --> 
+    <div class="bg-gray-100 dark:bg-gray-900">
+      <div class="max-w-6xl px-6 py-24 mx-auto md:px-12">
+          <div class="items-center -mx-6 md:flex md:-mx-12">
+              <div class="w-full px-10 mt-16 md:w-1/2 md:mt-0">
+                  <div class="overflow-hidden bg-white dark:bg-gray-800 dark:border-2 dark:border-emerald-500 rounded-lg shadow-xl">
+                      <img class="w-full" loading="lazy"
+                          src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"
+                          alt="Portrait of Irene Sims, VP of Sales">
+                      <div class="p-12">
+                          <blockquote class="text-lg italic dark:text-emerald-400 text-gray-800">
+                              <div class="absolute -mt-2 -ml-2 pin-t pin-l">
+                                  <svg class="w-8 h-8" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                      <path
+                                          d="M15.264 19.552C15.264 23.2 17.664 25.12 20.352 25.12C23.328 25.12 26.112 22.624 26.112 19.456C26.112 16.864 24.288 15.136 22.08 15.136C21.888 15.136 21.408 15.136 21.312 15.136C22.368 12.064 25.824 8.8 29.376 7.072L26.4 4C20.448 6.976 15.264 13.504 15.264 19.552ZM0 19.552C0 23.2 2.304 25.12 5.088 25.12C8.064 25.12 10.848 22.624 10.848 19.456C10.848 16.864 8.928 15.136 6.72 15.136C6.528 15.136 6.048 15.136 5.952 15.136C7.008 12.064 10.56 8.8 14.016 7.072L11.136 4C5.184 6.976 0 13.504 0 19.552Z"
+                                          class="text-gray-300 dark:text-emerald-300 dark:opacity-25 fill-current"></path>
+                                  </svg>
+                              </div>
+                              <div class="relative">
+                                  <p>
+                                      This service rocks on a whole new level. You've got to try it out for yourself.
+                                  </p>
+                              </div>
+                          </blockquote>
+                          <div class="mt-10">
+                              <div>
+                                  <div class="font-semibold tracking-wider text-gray-900 dark:text-white uppercase">
+                                      Irene Sims
+                                  </div>
+                                  <div class="text-gray-700 dark:text-emerald-400">VP of Sales, SomeCompany</div>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div class="w-full px-6 md:w-1/2 md:px-12 pt-5 md:pt-0">
+                  <h2 class="text-2xl font-bold text-gray-900 dark:text-white dark:border-b-2 dark:text-center dark:border-emerald-400">Crafted with Awesomeness</h2>
+                  <div class="flex mt-10 dark:text-emerald-500">
+                      <div>
+                          <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z">
+                              </path>
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>
+                          </svg>
+                      </div>
+                      <div class="mt-2 ml-4">
+                          <div class="text-lg font-semibold">Radical Feature Set</div>
+                          <p class="mt-2 text-gray-700 dark:text-gray-300">
+                              Filled to the rim with radical features and rock'n sock'n tools. You'll be glad you signed
+                              up.
+                          </p>
+                      </div>
+                  </div>
+                  <div class="flex mt-10 dark:text-emerald-500">
+                      <div>
+                          <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M13 10V3L4 14h7v7l9-11h-7z">
+                              </path>
+                          </svg>
+                      </div>
+                      <div class="mt-2 ml-4">
+                          <div class="text-lg font-semibold">Lightning Fast Speed</div>
+                          <p class="mt-2 text-gray-700 dark:text-gray-300">
+                              Built and crafted with speed to take your game back to the next-level. 1.21 GigaWatts!
+                          </p>
+                      </div>
+                  </div>
+                  <div class="flex mt-10 dark:text-emerald-500">
+                      <div>
+                          <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z">
+                              </path>
+                          </svg>
+                      </div>
+                      <div class="mt-2 ml-4">
+                          <div class="text-lg font-semibold">Fully Customizable</div>
+                          <p class="mt-2 text-gray-700 dark:text-gray-300">
+                              Every element and component is customizable to fit the needs of your application.
+                          </p>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+    </div>
+  
+    <!-- testimonial 8 end  -->
+
+
+    <!-- footer 11 start --> 
+    <footer class="bg-gray-800">
+        <div class="grid max-w-screen-xl grid-cols-1 mx-auto lg:grid-cols-2">
+          <div class="px-4 py-16 border-b border-gray-800 md:border-b-0 md:border-l lg:pl-12 lg:order-last">
+            <div class="block lg:hidden">
+              <span class="inline-block w-32 h-10 bg-gray-700 rounded-lg"> </span>
+              
+            </div>
+      
+            <div class="mt-12 space-y-4 lg:mt-0">
+              <span class="block w-10 h-1 bg-indigo-500 rounded"></span>
+      
+              <div>
+                <h5 class="text-2xl font-medium text-white">
+                  Request a Demo
+                </h5>
+      
+                <p class="max-w-xs mt-1 text-xs text-gray-500">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro voluptatum debitis quia pariatur iusto in nisi expedita placeat vero magni.
+                </p>
+              </div>
+      
+              <form>
+                <div class="relative max-w-lg">
+                  <label class="sr-only" for="email"> Email </label>
+      
+                  <input class="w-full py-4 pl-3 pr-16 text-sm bg-gray-800 border-none rounded-lg" id="email" type="email" placeholder="Enter your email">
+      
+                  <button class="absolute p-3 text-white -translate-y-1/2 bg-blue-600 rounded-md top-1/2 right-1.5" type="button">
+                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+      
+          <div class="px-4 py-16 lg:pr-12">
+            <div class="hidden lg:block">
+              <span class="inline-block w-32 p-4 bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+            </div>
+      
+            <div class="grid grid-cols-3 gap-8 lg:mt-12">
+              <div>
+                <p class="font-bold text-white">
+                  Helpful
+                </p>
+      
+                <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                  <a class="hover:opacity-75" href=""> Contact </a>
+                  <a class="hover:opacity-75" href=""> Live Chat </a>
+                  <a class="hover:opacity-75" href=""> Resources </a>
+                </nav>
+              </div>
+      
+              <div>
+                <p class="font-bold text-white">
+                  Solutions
+                </p>
+      
+                <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                  <a class="hover:opacity-75" href=""> Instant Checkout </a>
+                  <a class="hover:opacity-75" href=""> Product Upsells </a>
+                  <a class="hover:opacity-75" href=""> Slideout Cart </a>
+                  <a class="hover:opacity-75" href=""> User Dashboards </a>
+                </nav>
+              </div>
+      
+              <div>
+                <p class="font-bold text-white">
+                  About
+                </p>
+      
+                <nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
+                  <a class="hover:opacity-75" href=""> About Us </a>
+                  <a class="hover:opacity-75" href=""> Meet the Team </a>
+                  <a class="hover:opacity-75" href=""> History </a>
+                  <a class="hover:opacity-75" href=""> Careers </a>
+                </nav>
+              </div>
+            </div>
+      
+            <div class="flex mt-12 space-x-6 text-xs text-white">
+              <p> © 2022 Company Name </p>
+              <a class="underline hover:opacity-75" href=""> Privacy Policy </a>
+              <a class="underline hover:opacity-75" href=""> Terms &amp; Conditions </a>
+              <a class="underline hover:opacity-75" href=""> Cookies </a>
+            </div>
+          </div>
+        </div>
+    </footer>
+    <!-- footer 11 end -->
+
+    
+
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>

public/template/27_template.html

@@ -0,0 +1,350 @@
+<!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>Template 27</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+    
+
+
+    <!-- header 15 start --> 
+    <nav x-data="{mobile_nav_status:false}" class="bg-gray-300 shadow dark:bg-gray-900">
+      <div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
+          <div class="lg:flex lg:items-center">
+              <div class="flex items-center justify-between">
+                  <div>
+                      <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                  </div>
+
+                  <!-- Mobile menu button -->
+                  <div class="flex lg:hidden">
+                      <button @click="mobile_nav_status=!mobile_nav_status"  type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                          <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                              <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                          </svg>
+                      </button>
+                  </div>
+              </div>
+
+              <div :class="mobile_nav_status ? 'block flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center ' : 'hidden flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center'" >
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">features</a>
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">downloads</a>
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">docs</a>
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">support</a>
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">blog</a>
+
+                  <div class="relative mt-4 lg:mt-0 lg:mx-4">
+                      <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                          <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
+                              <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                          </svg>
+                      </span>
+
+                      <input type="text" class="w-full py-1 pl-10 pr-4 text-gray-700 placeholder-gray-600 bg-white border-b border-gray-600 dark:placeholder-gray-300 dark:focus:border-gray-300 lg:w-56 lg:border-transparent dark:bg-gray-800 dark:text-gray-300 focus:outline-none focus:border-gray-600" placeholder="Search">
+                  </div>
+              </div>
+          </div>
+
+          <div class="flex justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
+              <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
+                  <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                          d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                      </path>
+                  </svg>
+              </a>
+
+              <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300"
+                  aria-label="Facebook">
+                  <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                          d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                      </path>
+                  </svg>
+              </a>
+
+              <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Github">
+                  <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                          d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                      </path>
+                  </svg>
+              </a>
+          </div>
+      </div>
+    </nav>
+    
+    <!-- header 15 end -->
+
+
+
+    <!-- hero 29 start  -->
+    <div class="flex flex-wrap pb-24 items-center h-screen">
+      <div class="bg-white dark:bg-gray-800 w-full md:w-1/2 h-screen">
+        <div class="mx-32 text-left pt-10">
+          <h1 class="text-6xl font-bold mt-16">Tokyo</h1>
+
+          <!-- country region island -->
+          <div class="flex mt-16 font-light text-gray-500 ">
+            <div class="mr-10">
+              <span class="uppercase">Country</span>
+              <p class="text-2xl text-gray-900 font-semibold pt-2 ">Japan</p>
+            </div>
+            <div class="pr-4">
+              <span class="uppercase">Region</span>
+              <p class="text-2xl text-gray-900 font-semibold pt-2">Kanto</p>
+            </div>
+            <div class="pr-4">
+              <span class="uppercase">island</span>
+              <p class="text-2xl text-gray-900 font-semibold pt-2">Honshu</p>
+            </div>
+          </div>
+
+          <!-- description -->
+          <div
+            class="description w-full sm: md:w-2/3 mt-16 text-gray-500 text-sm"
+          >
+            Tokyo, Japan’s busy capital, mixes the ultramodern and the
+            traditional, from neon-lit skyscrapers to historic temples. The
+            opulent Meiji Shinto Shrine is known for its towering gate and
+            surrounding woods. The Imperial Palace sits amid large public
+            gardens
+          </div>
+
+          <button class="uppercase mt-5 text-sm font-semibold hover:underline">
+            read more
+          </button>
+        </div>
+      </div>
+      <div class="bg-red-600 w-full md:w-1/2 h-screen">
+        <img
+          src="https://source.unsplash.com/7H77FWkK_x4/1600x900"
+          class="h-screen w-full"
+          alt=""
+        />
+      </div>
+    </div>
+    
+    <!-- hero 29 end  -->
+
+
+    <!-- feature 13 start -->
+    <section class="px-4 py-24 lg:p-8 dark:bg-gray-800 dark:text-gray-100">
+        <div class="container mx-auto space-y-12">
+            <div class="flex flex-col overflow-hidden rounded-md shadow-sm lg:flex-row">
+                <img src="https://source.unsplash.com/640x480/?tree" alt="" class="h-80 dark:bg-gray-500 aspect-video">
+                <div class="flex flex-col justify-center flex-1 p-6 bg-gray-300 dark:bg-gray-900">
+                    <span class="text-xs uppercase dark:text-gray-400">Join, it's free</span>
+                    <h3 class="text-3xl font-bold">We're not reinventing the wheel</h3>
+                    <p class="my-6 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquam possimus quas, error esse quos.</p>
+                    <button type="button" class="self-start">Action</button>
+                </div>
+            </div>
+            <div class="flex flex-col overflow-hidden rounded-md shadow-sm lg:flex-row-reverse">
+                <img src="https://source.unsplash.com/640x480/?forest" alt="" class="h-80 dark:bg-gray-500 aspect-video">
+                <div class="flex flex-col justify-center flex-1 p-6 bg-gray-300 dark:bg-gray-900">
+                    <span class="text-xs uppercase dark:text-gray-400">Join, it's free</span>
+                    <h3 class="text-3xl font-bold">We're not reinventing the wheel</h3>
+                    <p class="my-6 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquam possimus quas, error esse quos.</p>
+                    <button type="button" class="self-start">Action</button>
+                </div>
+            </div>
+            <div class="flex flex-col overflow-hidden rounded-md shadow-sm lg:flex-row">
+                <img src="https://source.unsplash.com/640x480/?rain" alt="" class="h-80 dark:bg-gray-500 aspect-video">
+                <div class="flex flex-col justify-center flex-1 p-6 bg-gray-300 dark:bg-gray-900">
+                    <span class="text-xs uppercase dark:text-gray-400">Join, it's free</span>
+                    <h3 class="text-3xl font-bold">We're not reinventing the wheel</h3>
+                    <p class="my-6 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquam possimus quas, error esse quos.</p>
+                    <button type="button" class="self-start">Action</button>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- feature 13 end -->
+
+
+    
+    <!-- timeline 1 start --> 
+    <section class="dark:bg-gray-900 dark:text-gray-100 bg-gray-300">
+        <div class="container max-w-5xl px-4 py-24 mx-auto">
+            <div class="grid gap-4 mx-4 sm:grid-cols-12">
+                <div class="col-span-12 sm:col-span-3">
+                    <div class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:dark:bg-green-400">
+                        <h3 class="text-3xl font-semibold">Morbi tempor</h3>
+                        <span class="text-sm font-bold tracking-wider uppercase dark:text-gray-400">Vestibulum diam nunc</span>
+                    </div>
+                </div>
+                <div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
+                    <div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-700">
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
+                            <h3 class="text-xl font-semibold tracking-wide">Donec porta enim vel </h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Dec 2020</time>
+                            <p class="mt-3">Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+                        </div>
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
+                            <h3 class="text-xl font-semibold tracking-wide">Aliquam sit amet nunc ut</h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Jul 2019</time>
+                            <p class="mt-3">Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.</p>
+                        </div>
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
+                            <h3 class="text-xl font-semibold tracking-wide">Pellentesque habitant morbi</h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Jan 2016</time>
+                            <p class="mt-3">Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.</p>
+                        </div><!---->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- timeline 1 end -->
+
+
+    
+    <!-- contact 6 start --> 
+    <section class="text-gray-600 body-font relative dark:bg-gray-800">
+        <div class="container px-5 py-24 mx-auto">
+          <div class="flex flex-col text-center w-full mb-12">
+            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900 dark:text-emerald-300">Contact Us</h1>
+            <p class="lg:w-2/3 mx-auto leading-relaxed text-base dark:text-emerald-100">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>
+          </div>
+          <div class="lg:w-1/2 md:w-2/3 mx-auto">
+            <div class="flex flex-wrap -m-2">
+              <div class="p-2 w-1/2">
+                <div class="relative">
+                  <label for="name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
+                  <input type="text" id="name" name="name" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+                </div>
+              </div>
+              <div class="p-2 w-1/2">
+                <div class="relative">
+                  <label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
+                  <input type="email" id="email" name="email" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+                </div>
+              </div>
+              <div class="p-2 w-full">
+                <div class="relative">
+                  <label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
+                  <textarea id="message" name="message" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
+                </div>
+              </div>
+              <div class="p-2 w-full">
+                <button class="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-400 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
+              </div>
+              <div class="p-2 w-full pt-8 mt-8 border-t border-gray-200 dark:border-cyan-100 text-center">
+                <a class="text-indigo-500 dark:text-emerald-300">example@email.com</a>
+                <p class="leading-normal my-5 dark:text-cyan-100">49 Smith St.
+                  <br>Saint Cloud, MN 56301
+                </p>
+                <span class="inline-flex">
+                  <a class="text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
+                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                      <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                    </svg>
+                  </a>
+                  <a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
+                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                      <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                    </svg>
+                  </a>
+                  <a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
+                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                      <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+                      <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+                    </svg>
+                  </a>
+                  <a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
+                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                    </svg>
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+    </section>
+    
+    <!-- contact 6 end -->
+
+
+    
+    <!-- footer 27 start --> 
+   <footer class="flex justify-center px-4 text-gray-800 bg-white dark:text-white dark:bg-gray-900">
+     <div class="container py-6">
+         <h1 class="text-lg font-bold text-center lg:text-2xl">
+             Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
+         </h1>
+
+         <div class="flex justify-center mt-6">
+             <div class="bg-white border rounded-md focus-within:ring dark:bg-gray-800 dark:border-gray-600 focus-within:border-blue-400 focus-within:ring-blue-300 focus-within:ring-opacity-40 dark:focus-within:border-blue-300">
+                 <div class="flex flex-wrap justify-between md:flex-row">
+                     <input type="email" class="p-2 m-1 text-sm text-gray-700 bg-transparent appearance-none focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
+                     <button class="w-full px-3 py-2 m-1 text-sm font-medium tracking-wider text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded-md dark:hover:bg-gray-600 dark:bg-gray-700 lg:w-auto hover:bg-gray-700">subscribe</button>
+                 </div>
+             </div>
+         </div>
+
+         <hr class="h-px mt-6 border-gray-300 border-none dark:bg-gray-700">
+
+         <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
+             <div>
+                 <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
+             </div>
+
+             <div class="flex mt-4 md:m-0">
+                 <div class="-mx-4">
+                     <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
+                     <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
+                     <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
+                     <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
+                 </div>
+             </div>
+         </div>
+     </div>
+   </footer>
+   <!-- footer 27 end -->
+
+
+
+<!-- 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>

public/template/28_template.html

@@ -0,0 +1,49 @@
+<!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>Template 28</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>

public/template/29_template.html

@@ -0,0 +1,49 @@
+<!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>Template 29</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>

public/template/30_template.html

@@ -0,0 +1,49 @@
+<!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>Template 30</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>