diff --git a/dist/tailshape.css b/dist/tailshape.css
index c931d89..b83e0cf 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -518,6 +518,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   pointer-events: none;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -543,6 +547,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   right: 0px;
 }
 
+.top-0 {
+  top: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
 .top-1\/2 {
   top: 50%;
 }
@@ -555,10 +571,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   right: 0.25rem;
 }
 
-.top-0 {
-  top: 0px;
-}
-
 .bottom-auto {
   bottom: auto;
 }
@@ -567,14 +579,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   left: 0px;
 }
 
-.right-0 {
-  right: 0px;
-}
-
-.bottom-0 {
-  bottom: 0px;
-}
-
 .right-4 {
   right: 1rem;
 }
@@ -603,6 +607,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   top: 4rem;
 }
 
+.-bottom-5 {
+  bottom: -1.25rem;
+}
+
+.right-1\/2 {
+  right: 50%;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -679,6 +691,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   float: left;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
 .m-1 {
   margin: 0.25rem;
 }
@@ -703,6 +719,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin: 2.5rem;
 }
 
+.-m-4 {
+  margin: -1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -723,6 +743,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 1.25rem;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -813,11 +838,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: 0.375rem;
 }
 
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .mx-10 {
   margin-left: 2.5rem;
   margin-right: 2.5rem;
@@ -833,6 +853,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: -0.75rem;
 }
 
+.mx-20 {
+  margin-left: 5rem;
+  margin-right: 5rem;
+}
+
+.-mx-6 {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+.my-20 {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -849,20 +884,36 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 2.25rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
+.mb-2 {
+  margin-bottom: 0.5rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
 }
 
 .mt-2 {
   margin-top: 0.5rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
 }
 
 .mt-4 {
@@ -889,10 +940,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 0.75rem;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -937,10 +984,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 0.25rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .ml-6 {
   margin-left: 1.5rem;
 }
@@ -961,10 +1004,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: 7rem;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
 .mt-24 {
   margin-top: 6rem;
 }
@@ -1109,6 +1148,38 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: 2.5rem;
 }
 
+.mb-\[60px\] {
+  margin-bottom: 60px;
+}
+
+.-mr-16 {
+  margin-right: -4rem;
+}
+
+.-mt-8 {
+  margin-top: -2rem;
+}
+
+.-mt-6 {
+  margin-top: -1.5rem;
+}
+
+.-mt-3 {
+  margin-top: -0.75rem;
+}
+
+.mr-11 {
+  margin-right: 2.75rem;
+}
+
+.-ml-20 {
+  margin-left: -5rem;
+}
+
+.-mt-48 {
+  margin-top: -12rem;
+}
+
 .block {
   display: block;
 }
@@ -1125,6 +1196,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: inline-flex;
 }
 
+.table {
+  display: table;
+}
+
 .grid {
   display: grid;
 }
@@ -1225,6 +1300,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 6rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -1361,6 +1444,38 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 20%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-72 {
+  width: 18rem;
+}
+
+.w-2\/6 {
+  width: 33.333333%;
+}
+
+.w-10\/12 {
+  width: 83.333333%;
+}
+
+.w-9\/12 {
+  width: 75%;
+}
+
+.w-0 {
+  width: 0px;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1369,6 +1484,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 32rem;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .max-w-screen-xl {
   max-width: 1280px;
 }
@@ -1405,10 +1524,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 768px;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
 .max-w-\[480px\] {
   max-width: 480px;
 }
@@ -1425,6 +1540,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 56rem;
 }
 
+.max-w-\[520px\] {
+  max-width: 520px;
+}
+
+.max-w-\[40px\] {
+  max-width: 40px;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-\[1340px\] {
+  max-width: 1340px;
+}
+
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -1441,6 +1572,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   flex-shrink: 0;
 }
 
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -1449,6 +1588,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   flex-grow: 1;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
 .-translate-y-1\/2 {
   --tw-translate-y: -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));
@@ -1479,21 +1622,31 @@ 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-45 {
-  --tw-rotate: 45deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .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-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .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-0 {
+  --tw-rotate: 0deg;
+  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));
+}
+
 .-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));
@@ -1511,6 +1664,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-75 {
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  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));
+}
+
+.scale-110 {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  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));
+}
+
 .transform {
   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));
 }
@@ -1526,10 +1691,18 @@ Ensure the default browser behavior of the `hidden` attribute.
           user-select: none;
 }
 
+.resize {
+  resize: both;
+}
+
 .list-none {
   list-style-type: none;
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1576,6 +1749,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   place-items: center;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1588,6 +1765,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .items-stretch {
   align-items: stretch;
 }
@@ -1596,6 +1777,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   justify-content: flex-start;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1608,6 +1793,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   justify-content: space-evenly;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -1662,12 +1851,23 @@ Ensure the default browser behavior of the `hidden` attribute.
        column-gap: 1rem;
 }
 
+.gap-x-16 {
+  -moz-column-gap: 4rem;
+       column-gap: 4rem;
+}
+
 .space-x-5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.25rem * var(--tw-space-x-reverse));
   margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1680,12 +1880,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1770,6 +1964,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.125rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-reverse > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 1;
 }
@@ -1801,6 +2001,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(243 244 246 / var(--tw-divide-opacity));
 }
 
+.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
+}
+
 .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 0.5;
 }
@@ -1863,14 +2068,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 0.25rem;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded-sm {
   border-radius: 0.125rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -1879,6 +2084,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 1rem;
 }
 
+.rounded-none {
+  border-radius: 0px;
+}
+
 .rounded-b-none {
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -1889,10 +2098,54 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-top-right-radius: 0.25rem;
 }
 
+.rounded-t-xl {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}
+
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-r-full {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .border {
   border-width: 1px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-0 {
   border-width: 0px;
 }
@@ -1901,14 +2154,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-width: 2px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1933,6 +2190,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-width: 4px;
 }
 
+.border-b-0 {
+  border-bottom-width: 0px;
+}
+
+.border-t-0 {
+  border-top-width: 0px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
 .border-none {
   border-style: none;
 }
@@ -1952,6 +2221,31 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-purple-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 51 234 / var(--tw-border-opacity));
+}
+
+.border-yellow-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+}
+
+.border-purple-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(216 180 254 / var(--tw-border-opacity));
+}
+
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
 .border-gray-800 {
   --tw-border-opacity: 1;
   border-color: rgb(31 41 55 / var(--tw-border-opacity));
@@ -1967,11 +2261,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
-.border-gray-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity));
-}
-
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -2044,6 +2333,36 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
+.border-\[\#F3F4FE\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 254 / var(--tw-border-opacity));
+}
+
+.border-pink-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 39 119 / var(--tw-border-opacity));
+}
+
+.border-purple-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(192 132 252 / var(--tw-border-opacity));
+}
+
+.border-purple-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 33 168 / var(--tw-border-opacity));
+}
+
+.border-purple-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(233 213 255 / var(--tw-border-opacity));
+}
+
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+}
+
 .border-b-gray-800 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(31 41 55 / var(--tw-border-opacity));
@@ -2054,6 +2373,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
+.border-opacity-50 {
+  --tw-border-opacity: 0.5;
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2099,11 +2422,51 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(238 242 255 / var(--tw-bg-opacity));
 }
 
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
+.bg-purple-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.bg-red-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
 .bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -2114,11 +2477,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -2138,11 +2496,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
 .bg-cyan-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(207 250 254 / var(--tw-bg-opacity));
@@ -2168,11 +2521,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
-.bg-red-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-}
-
 .bg-purple-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(147 51 234 / var(--tw-bg-opacity));
@@ -2198,11 +2546,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.bg-blue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
 .bg-blue-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(30 58 138 / var(--tw-bg-opacity));
@@ -2303,6 +2646,36 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.bg-purple-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 180 252 / var(--tw-bg-opacity));
+}
+
+.bg-teal-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(45 212 191 / var(--tw-bg-opacity));
+}
+
+.bg-teal-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 94 89 / var(--tw-bg-opacity));
+}
+
+.bg-teal-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -2319,6 +2692,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-bg-opacity: 0.05;
 }
 
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2335,6 +2712,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-image: url(https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80);
 }
 
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
 .from-purple-100 {
   --tw-gradient-from: #f3e8ff;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(243 232 255 / 0));
@@ -2355,6 +2736,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(74 222 128 / 0));
 }
 
+.from-blue-500 {
+  --tw-gradient-from: #3b82f6;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(59 130 246 / 0));
+}
+
 .via-red-300 {
   --tw-gradient-stops: var(--tw-gradient-from), #fca5a5, var(--tw-gradient-to, rgb(252 165 165 / 0));
 }
@@ -2379,14 +2765,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-to: #a855f7;
 }
 
+.to-blue-600 {
+  --tw-gradient-to: #2563eb;
+}
+
 .bg-cover {
   background-size: cover;
 }
 
+.bg-contain {
+  background-size: contain;
+}
+
 .bg-fixed {
   background-attachment: fixed;
 }
 
+.bg-clip-border {
+  background-clip: border-box;
+}
+
 .bg-clip-text {
   -webkit-background-clip: text;
           background-clip: text;
@@ -2396,6 +2794,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-position: center;
 }
 
+.bg-top {
+  background-position: top;
+}
+
 .bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2428,6 +2830,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   stroke: #6b7280;
 }
 
+.stroke-current {
+  stroke: currentColor;
+}
+
+.stroke-2 {
+  stroke-width: 2;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2446,26 +2856,30 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding: 2.5rem;
 }
 
-.p-6 {
-  padding: 1.5rem;
+.p-4 {
+  padding: 1rem;
 }
 
 .p-3 {
   padding: 0.75rem;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
-.p-1 {
-  padding: 0.25rem;
+.p-20 {
+  padding: 5rem;
 }
 
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -2474,14 +2888,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding: 7rem;
 }
 
-.p-20 {
-  padding: 5rem;
-}
-
 .p-0 {
   padding: 0px;
 }
 
+.p-16 {
+  padding: 4rem;
+}
+
+.p-12 {
+  padding: 3rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2532,6 +2950,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 1.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -2542,11 +2965,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 4rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .py-10 {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
@@ -2612,6 +3030,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 12rem;
 }
 
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
+.px-7 {
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
+}
+
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
 .pl-8 {
   padding-left: 2rem;
 }
@@ -2628,6 +3061,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 2.25rem;
 }
 
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2760,18 +3197,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 1.25rem;
 }
 
-.pr-10 {
-  padding-right: 2.5rem;
+.pl-6 {
+  padding-left: 1.5rem;
 }
 
 .pl-24 {
   padding-left: 6rem;
 }
 
-.pl-6 {
-  padding-left: 1.5rem;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2796,6 +3229,34 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 14rem;
 }
 
+.pl-\[62px\] {
+  padding-left: 62px;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pl-11 {
+  padding-left: 2.75rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pb-64 {
+  padding-bottom: 16rem;
+}
+
+.pb-0 {
+  padding-bottom: 0px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2824,6 +3285,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -2891,20 +3356,20 @@ Ensure the default browser behavior of the `hidden` attribute.
   font-weight: 300;
 }
 
-.font-bold {
-  font-weight: 700;
-}
-
-.font-normal {
-  font-weight: 400;
+.font-black {
+  font-weight: 900;
 }
 
 .font-extrabold {
   font-weight: 800;
 }
 
-.font-black {
-  font-weight: 900;
+.font-bold {
+  font-weight: 700;
+}
+
+.font-normal {
+  font-weight: 400;
 }
 
 .font-thin {
@@ -2919,6 +3384,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   text-transform: capitalize;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-loose {
   line-height: 2;
 }
@@ -3012,9 +3481,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-blue-500 {
+.text-purple-700 {
   --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
+  color: rgb(126 34 206 / var(--tw-text-opacity));
 }
 
 .text-gray-900 {
@@ -3022,16 +3491,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-pink-600 {
-  --tw-text-opacity: 1;
-  color: rgb(219 39 119 / var(--tw-text-opacity));
-}
-
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+.text-pink-600 {
+  --tw-text-opacity: 1;
+  color: rgb(219 39 119 / var(--tw-text-opacity));
+}
+
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -3042,11 +3516,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(192 132 252 / var(--tw-text-opacity));
 }
 
-.text-purple-700 {
-  --tw-text-opacity: 1;
-  color: rgb(126 34 206 / var(--tw-text-opacity));
-}
-
 .text-teal-400 {
   --tw-text-opacity: 1;
   color: rgb(45 212 191 / var(--tw-text-opacity));
@@ -3226,6 +3695,45 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(20 184 166 / var(--tw-text-opacity));
 }
 
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
+.text-indigo-100 {
+  --tw-text-opacity: 1;
+  color: rgb(224 231 255 / var(--tw-text-opacity));
+}
+
+.text-indigo-200 {
+  --tw-text-opacity: 1;
+  color: rgb(199 210 254 / var(--tw-text-opacity));
+}
+
+.text-yellow-300 {
+  --tw-text-opacity: 1;
+  color: rgb(253 224 71 / var(--tw-text-opacity));
+}
+
+.text-yellow-100 {
+  --tw-text-opacity: 1;
+  color: rgb(254 249 195 / var(--tw-text-opacity));
+}
+
+.text-teal-900 {
+  --tw-text-opacity: 1;
+  color: rgb(19 78 74 / var(--tw-text-opacity));
+}
+
+.text-purple-800 {
+  --tw-text-opacity: 1;
+  color: rgb(107 33 168 / var(--tw-text-opacity));
+}
+
+.text-opacity-50 {
+  --tw-text-opacity: 0.5;
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -3309,6 +3817,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   opacity: 0.75;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -3351,6 +3871,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-gray-800 {
   --tw-shadow-color: #1f2937;
   --tw-shadow: var(--tw-shadow-colored);
@@ -3361,6 +3887,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   outline-offset: 2px;
 }
 
+.outline {
+  outline-style: solid;
+}
+
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3372,6 +3902,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
 
+.brightness-125 {
+  --tw-brightness: brightness(1.25);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.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);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -3390,6 +3930,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
@@ -3398,6 +3944,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 150ms;
 }
 
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -3410,14 +3962,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 200ms;
 }
 
-.duration-100 {
-  transition-duration: 100ms;
-}
-
 .duration-500 {
   transition-duration: 500ms;
 }
 
+.duration-100 {
+  transition-duration: 100ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -3574,6 +4126,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(238 242 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -3713,6 +4270,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-pink-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 39 119 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-90:hover {
   --tw-bg-opacity: 0.9;
 }
@@ -3886,6 +4453,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.hover\:text-indigo-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
+}
+
 .hover\:text-opacity-75:hover {
   --tw-text-opacity: 0.75;
 }
@@ -3895,6 +4467,11 @@ Ensure the default browser behavior of the `hidden` attribute.
           text-decoration-line: underline;
 }
 
+.hover\:no-underline:hover {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
 .hover\:opacity-75:hover {
   opacity: 0.75;
 }
@@ -3923,6 +4500,17 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-2xl:hover {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:outline-none:hover {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .hover\:ring-2:hover {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3993,6 +4581,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.focus\:border-blue-600:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
+
+.focus\:bg-red-700:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
 .focus\:bg-transparent:focus {
   background-color: transparent;
 }
@@ -4037,6 +4635,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-purple-800:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
+}
+
 .focus\:text-white:focus {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -4057,6 +4660,11 @@ Ensure the default browser behavior of the `hidden` attribute.
           text-decoration-line: underline;
 }
 
+.focus\:no-underline:focus {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
 .focus\:placeholder-transparent:focus::-moz-placeholder {
   color: transparent;
 }
@@ -4080,6 +4688,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   outline-offset: 2px;
 }
 
+.focus\:outline-black:focus {
+  outline-color: #000;
+}
+
 .focus\:ring:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -4098,6 +4710,12 @@ 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);
 }
 
+.focus\:ring-4:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-gray-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
@@ -4143,6 +4761,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-gray-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-blue-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-opacity-40:focus {
   --tw-ring-opacity: 0.4;
 }
@@ -4193,6 +4821,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.active\:bg-purple-800:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
+}
+
 .active\:text-gray-300:active {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -4249,6 +4882,20 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.group:focus .group-focus\:max-h-screen {
+  max-height: 100vh;
+}
+
+.group:focus .group-focus\:-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));
+}
+
+.group:focus .group-focus\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-divide-opacity));
@@ -4652,6 +5299,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .dark .dark\:placeholder-white::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(255 255 255 / var(--tw-placeholder-opacity));
@@ -4944,6 +5596,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(8 145 178 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-purple-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(192 132 252 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hover\:ring-2:hover {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5015,6 +5672,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
 }
 
+.dark .dark\:focus\:ring-gray-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-blue-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:relative {
     position: relative;
@@ -5057,6 +5724,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 1.25rem;
   }
 
+  .sm\:my-0 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -5133,10 +5805,22 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 2.5rem;
   }
 
+  .sm\:ml-5 {
+    margin-left: 1.25rem;
+  }
+
+  .sm\:mr-auto {
+    margin-right: auto;
+  }
+
   .sm\:block {
     display: block;
   }
 
+  .sm\:inline-block {
+    display: inline-block;
+  }
+
   .sm\:flex {
     display: flex;
   }
@@ -5157,6 +5841,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 18rem;
   }
 
+  .sm\:w-10\/12 {
+    width: 83.333333%;
+  }
+
   .sm\:w-10 {
     width: 2.5rem;
   }
@@ -5197,6 +5885,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 33.333333%;
   }
 
+  .sm\:w-7\/12 {
+    width: 58.333333%;
+  }
+
+  .sm\:w-24 {
+    width: 6rem;
+  }
+
+  .sm\:w-16 {
+    width: 4rem;
+  }
+
   .sm\:max-w-xl {
     max-width: 36rem;
   }
@@ -5205,6 +5905,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 100%;
   }
 
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
+  .sm\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
+  .sm\:flex-initial {
+    flex: 0 1 auto;
+  }
+
   .sm\:flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -5225,18 +5937,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     flex-direction: row;
   }
 
-  .sm\:flex-col {
-    flex-direction: column;
-  }
-
-  .sm\:flex-wrap {
-    flex-wrap: wrap;
-  }
-
   .sm\:items-start {
     align-items: flex-start;
   }
 
+  .sm\:items-end {
+    align-items: flex-end;
+  }
+
   .sm\:items-center {
     align-items: center;
   }
@@ -5261,6 +5969,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     justify-content: space-around;
   }
 
+  .sm\:gap-16 {
+    gap: 4rem;
+  }
+
+  .sm\:gap-8 {
+    gap: 2rem;
+  }
+
   .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -5279,6 +5995,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
   .sm\:border-none {
     border-style: none;
   }
@@ -5291,6 +6011,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding: 2.5rem;
   }
 
+  .sm\:p-8 {
+    padding: 2rem;
+  }
+
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -5336,6 +6060,21 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 8rem;
   }
 
+  .sm\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .sm\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .sm\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
   .sm\:pt-12 {
     padding-top: 3rem;
   }
@@ -5364,6 +6103,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 2.5rem;
   }
 
+  .sm\:pl-6 {
+    padding-left: 1.5rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -5411,6 +6154,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.25rem;
   }
 
+  .sm\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .sm\:leading-none {
     line-height: 1;
   }
@@ -5420,6 +6168,12 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+
+  .sm\:shadow-md {
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
 }
 
 @media (min-width: 768px) {
@@ -5439,6 +6193,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     bottom: 2.5rem;
   }
 
+  .md\:-right-3 {
+    right: -0.75rem;
+  }
+
   .md\:order-1 {
     order: 1;
   }
@@ -5529,6 +6287,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 0.25rem;
   }
 
+  .md\:-mx-12 {
+    margin-left: -3rem;
+    margin-right: -3rem;
+  }
+
+  .md\:my-24 {
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+  }
+
   .md\:mx-auto {
     margin-left: auto;
     margin-right: auto;
@@ -5634,6 +6402,26 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 2.5rem;
   }
 
+  .md\:-mt-1 {
+    margin-top: -0.25rem;
+  }
+
+  .md\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .md\:ml-20 {
+    margin-left: 5rem;
+  }
+
+  .md\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .md\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -5678,14 +6466,26 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 6rem;
   }
 
-  .md\:w-1\/4 {
-    width: 25%;
+  .md\:h-9 {
+    height: 2.25rem;
+  }
+
+  .md\:h-40 {
+    height: 10rem;
+  }
+
+  .md\:h-16 {
+    height: 4rem;
   }
 
   .md\:w-1\/2 {
     width: 50%;
   }
 
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
   .md\:w-auto {
     width: auto;
   }
@@ -5742,6 +6542,38 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 58.333333%;
   }
 
+  .md\:w-3\/5 {
+    width: 60%;
+  }
+
+  .md\:w-4\/5 {
+    width: 80%;
+  }
+
+  .md\:w-9 {
+    width: 2.25rem;
+  }
+
+  .md\:w-40 {
+    width: 10rem;
+  }
+
+  .md\:w-64 {
+    width: 16rem;
+  }
+
+  .md\:w-16 {
+    width: 4rem;
+  }
+
+  .md\:w-60 {
+    width: 15rem;
+  }
+
+  .md\:w-2\/5 {
+    width: 40%;
+  }
+
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -5770,8 +6602,13 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 72rem;
   }
 
-  .md\:max-w-7xl {
-    max-width: 80rem;
+  .md\:flex-shrink {
+    flex-shrink: 1;
+  }
+
+  .md\:translate-x-0 {
+    --tw-translate-x: 0px;
+    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));
   }
 
   .md\:grid-cols-4 {
@@ -5830,6 +6667,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     justify-content: flex-start;
   }
 
+  .md\:justify-end {
+    justify-content: flex-end;
+  }
+
   .md\:justify-center {
     justify-content: center;
   }
@@ -5962,6 +6803,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     background-color: transparent;
   }
 
+  .md\:bg-opacity-100 {
+    --tw-bg-opacity: 1;
+  }
+
   .md\:p-8 {
     padding: 2rem;
   }
@@ -5974,8 +6819,8 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding: 0px;
   }
 
-  .md\:p-4 {
-    padding: 1rem;
+  .md\:p-10 {
+    padding: 2.5rem;
   }
 
   .md\:px-24 {
@@ -6058,6 +6903,31 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 10rem;
   }
 
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .md\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .md\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .md\:px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  .md\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
   .md\:pl-20 {
     padding-left: 5rem;
   }
@@ -6122,6 +6992,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 16rem;
   }
 
+  .md\:pl-12 {
+    padding-left: 3rem;
+  }
+
+  .md\:pl-14 {
+    padding-left: 3.5rem;
+  }
+
+  .md\:pb-2 {
+    padding-bottom: 0.5rem;
+  }
+
   .md\:text-left {
     text-align: left;
   }
@@ -6169,10 +7051,28 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.25rem;
   }
 
+  .md\:text-\[40px\] {
+    font-size: 40px;
+  }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .md\:font-medium {
     font-weight: 500;
   }
 
+  .md\:font-extrabold {
+    font-weight: 800;
+  }
+
   .md\:leading-snug {
     line-height: 1.375;
   }
@@ -6253,6 +7153,22 @@ Ensure the default browser behavior of the `hidden` attribute.
     order: 0;
   }
 
+  .lg\:order-1 {
+    order: 1;
+  }
+
+  .lg\:order-2 {
+    order: 2;
+  }
+
+  .lg\:order-3 {
+    order: 3;
+  }
+
+  .lg\:order-4 {
+    order: 4;
+  }
+
   .lg\:col-span-4 {
     grid-column: span 4 / span 4;
   }
@@ -6281,6 +7197,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     grid-column-end: 13;
   }
 
+  .lg\:row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+
+  .lg\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
+  .lg\:row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+
   .lg\:my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -6311,6 +7239,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: -0.5rem;
   }
 
+  .lg\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .lg\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
   .lg\:mt-16 {
     margin-top: 4rem;
   }
@@ -6391,10 +7329,78 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 2.5rem;
   }
 
+  .lg\:mb-20 {
+    margin-bottom: 5rem;
+  }
+
+  .lg\:mr-0 {
+    margin-right: 0px;
+  }
+
+  .lg\:ml-3 {
+    margin-left: 0.75rem;
+  }
+
+  .lg\:-mt-11 {
+    margin-top: -2.75rem;
+  }
+
+  .lg\:-mt-4 {
+    margin-top: -1rem;
+  }
+
+  .lg\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .lg\:-ml-0 {
+    margin-left: -0px;
+  }
+
+  .lg\:-mt-5 {
+    margin-top: -1.25rem;
+  }
+
+  .lg\:-mt-3 {
+    margin-top: -0.75rem;
+  }
+
+  .lg\:-mt-6 {
+    margin-top: -1.5rem;
+  }
+
+  .lg\:-ml-4 {
+    margin-left: -1rem;
+  }
+
+  .lg\:-mt-12 {
+    margin-top: -3rem;
+  }
+
+  .lg\:-mt-0 {
+    margin-top: -0px;
+  }
+
+  .lg\:-mt-1 {
+    margin-top: -0.25rem;
+  }
+
+  .lg\:-ml-28 {
+    margin-left: -7rem;
+  }
+
+  .lg\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
   .lg\:block {
     display: block;
   }
 
+  .lg\:inline-block {
+    display: inline-block;
+  }
+
   .lg\:inline {
     display: inline;
   }
@@ -6423,6 +7429,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 100vh;
   }
 
+  .lg\:h-10 {
+    height: 2.5rem;
+  }
+
+  .lg\:h-11 {
+    height: 2.75rem;
+  }
+
+  .lg\:h-12 {
+    height: 3rem;
+  }
+
   .lg\:w-1\/4 {
     width: 25%;
   }
@@ -6499,6 +7517,26 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 75%;
   }
 
+  .lg\:w-4\/6 {
+    width: 66.666667%;
+  }
+
+  .lg\:w-10 {
+    width: 2.5rem;
+  }
+
+  .lg\:w-11 {
+    width: 2.75rem;
+  }
+
+  .lg\:w-12 {
+    width: 3rem;
+  }
+
+  .lg\:w-32 {
+    width: 8rem;
+  }
+
   .lg\:max-w-4xl {
     max-width: 56rem;
   }
@@ -6531,6 +7569,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 64rem;
   }
 
+  .lg\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
+  .lg\:max-w-screen-md {
+    max-width: 768px;
+  }
+
   .lg\:flex-1 {
     flex: 1 1 0%;
   }
@@ -6580,6 +7626,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     flex-direction: row;
   }
 
+  .lg\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
   .lg\:items-start {
     align-items: flex-start;
   }
@@ -6608,6 +7658,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     justify-content: space-between;
   }
 
+  .lg\:justify-evenly {
+    justify-content: space-evenly;
+  }
+
   .lg\:gap-20 {
     gap: 5rem;
   }
@@ -6620,6 +7674,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     gap: 6rem;
   }
 
+  .lg\:gap-4 {
+    gap: 1rem;
+  }
+
   .lg\:gap-y-16 {
     row-gap: 4rem;
   }
@@ -6640,6 +7698,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     border-color: transparent;
   }
 
+  .lg\:border-gray-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  }
+
   .lg\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -6653,6 +7716,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding: 0px;
   }
 
+  .lg\:p-8 {
+    padding: 2rem;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -6723,6 +7790,31 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 1.25rem;
   }
 
+  .lg\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .lg\:px-9 {
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
+  }
+
+  .lg\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .lg\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .lg\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
   .lg\:pl-12 {
     padding-left: 3rem;
   }
@@ -6775,6 +7867,70 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 5rem;
   }
 
+  .lg\:pt-\[120px\] {
+    padding-top: 120px;
+  }
+
+  .lg\:pb-\[90px\] {
+    padding-bottom: 90px;
+  }
+
+  .lg\:pl-8 {
+    padding-left: 2rem;
+  }
+
+  .lg\:pr-0 {
+    padding-right: 0px;
+  }
+
+  .lg\:pl-0 {
+    padding-left: 0px;
+  }
+
+  .lg\:pl-16 {
+    padding-left: 4rem;
+  }
+
+  .lg\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
+  .lg\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .lg\:pl-14 {
+    padding-left: 3.5rem;
+  }
+
+  .lg\:pl-3 {
+    padding-left: 0.75rem;
+  }
+
+  .lg\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .lg\:pb-14 {
+    padding-bottom: 3.5rem;
+  }
+
+  .lg\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .lg\:pl-1 {
+    padding-left: 0.25rem;
+  }
+
+  .lg\:pr-3 {
+    padding-right: 0.75rem;
+  }
+
+  .lg\:pb-3 {
+    padding-bottom: 0.75rem;
+  }
+
   .lg\:text-left {
     text-align: left;
   }
@@ -6817,6 +7973,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.5rem;
   }
 
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .lg\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
   .lg\:text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -6843,6 +8009,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     grid-column: span 3 / span 3;
   }
 
+  .xl\:m-auto {
+    margin: auto;
+  }
+
   .xl\:mt-28 {
     margin-top: 7rem;
   }
@@ -6867,10 +8037,26 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: -3rem;
   }
 
+  .xl\:ml-1 {
+    margin-left: 0.25rem;
+  }
+
+  .xl\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .xl\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
   .xl\:inline {
     display: inline;
   }
 
+  .xl\:h-24 {
+    height: 6rem;
+  }
+
   .xl\:w-11\/12 {
     width: 91.666667%;
   }
@@ -6891,6 +8077,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 83.333333%;
   }
 
+  .xl\:w-24 {
+    width: 6rem;
+  }
+
   .xl\:max-w-screen-xl {
     max-width: 1280px;
   }
@@ -6911,6 +8101,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 100%;
   }
 
+  .xl\:max-w-screen-lg {
+    max-width: 1024px;
+  }
+
   .xl\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -6919,14 +8113,35 @@ Ensure the default browser behavior of the `hidden` attribute.
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .xl\:flex-row {
     flex-direction: row;
   }
 
+  .xl\:bg-gradient-to-r {
+    background-image: linear-gradient(to right, var(--tw-gradient-stops));
+  }
+
+  .xl\:bg-contain {
+    background-size: contain;
+  }
+
+  .xl\:bg-clip-text {
+    -webkit-background-clip: text;
+            background-clip: text;
+  }
+
   .xl\:p-6 {
     padding: 1.5rem;
   }
 
+  .xl\:p-20 {
+    padding: 5rem;
+  }
+
   .xl\:px-20 {
     padding-left: 5rem;
     padding-right: 5rem;
@@ -6952,6 +8167,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 10rem;
   }
 
+  .xl\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .xl\:pt-8 {
     padding-top: 2rem;
   }
@@ -6984,6 +8204,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 0px;
   }
 
+  .xl\:text-left {
+    text-align: left;
+  }
+
   .xl\:text-center {
     text-align: center;
   }
@@ -7016,11 +8240,162 @@ Ensure the default browser behavior of the `hidden` attribute.
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
+
+  .xl\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .xl\:text-transparent {
+    color: transparent;
+  }
 }
 
 @media (min-width: 1536px) {
+  .\32xl\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
+  .\32xl\:row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+
+  .\32xl\:mx-10 {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+
+  .\32xl\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .\32xl\:my-2 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .\32xl\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .\32xl\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .\32xl\:-mt-4 {
+    margin-top: -1rem;
+  }
+
+  .\32xl\:-mt-20 {
+    margin-top: -5rem;
+  }
+
+  .\32xl\:-mt-16 {
+    margin-top: -4rem;
+  }
+
+  .\32xl\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .\32xl\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .\32xl\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .\32xl\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .\32xl\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .\32xl\:h-20 {
+    height: 5rem;
+  }
+
+  .\32xl\:h-screen {
+    height: 100vh;
+  }
+
+  .\32xl\:w-20 {
+    width: 5rem;
+  }
+
+  .\32xl\:gap-6 {
+    gap: 1.5rem;
+  }
+
   .\32xl\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+
+  .\32xl\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .\32xl\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
+  .\32xl\:pl-20 {
+    padding-left: 5rem;
+  }
+
+  .\32xl\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .\32xl\:pl-24 {
+    padding-left: 6rem;
+  }
+
+  .\32xl\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
+  .\32xl\:pt-2 {
+    padding-top: 0.5rem;
+  }
+
+  .\32xl\:pb-20 {
+    padding-bottom: 5rem;
+  }
+
+  .\32xl\:pb-64 {
+    padding-bottom: 16rem;
+  }
+
+  .\32xl\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .\32xl\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .\32xl\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .\32xl\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .\32xl\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
\ No newline at end of file
diff --git a/public/componets/accordion/10_accordion.html b/public/componets/accordion/10_accordion.html
new file mode 100644
index 0000000..f468d6e
--- /dev/null
+++ b/public/componets/accordion/10_accordion.html
@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Accordion 10</title>
+</head>
+<body>
+
+
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
+
+<!-- accordion 10 start -->
+<section class="section_divider">
+    <div>Accordion 10</div>
+</section>
+<!-- ====== FAQ Section Start -->
+<section
+   x-data="
+   {
+   openFaq1: false, 
+   openFaq2: false, 
+   openFaq3: false, 
+   openFaq4: false, 
+   openFaq5: false, 
+   openFaq6: false
+   }
+   "
+   class="
+   dark:bg-gray-800
+   bg-gray-300
+   pt-20
+   lg:pt-[120px]
+   pb-12
+   lg:pb-[90px]
+   relative
+   z-20
+   overflow-hidden
+
+   "
+   >
+   <div class="mx-20  ">
+      <div class="flex flex-wrap -mx-4">
+         <div class="w-full px-4">
+            <div class="text-center mx-auto mb-[60px] lg:mb-20 max-w-[520px]">
+               <span class="font-semibold text-lg text-primary mb-2 block">
+               FAQ
+               </span>
+               <h2
+                  class="
+                  font-bold
+                  text-3xl
+                  sm:text-4xl
+                  md:text-[40px]
+                  text-dark
+                  mb-4
+                  "
+                  >
+                  Any Questions? Look Here
+               </h2>
+               <p class="text-base text-body-color">
+                  There are many variations of passages of Lorem Ipsum available
+                  but the majority have suffered alteration in some form.
+               </p>
+            </div>
+         </div>
+      </div>
+      <div class="flex flex-wrap -mx-4">
+         <div class="w-full lg:w-1/2 px-4">
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq1 = !openFaq1"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq1" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq2 = !openFaq2"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq2" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq3 = !openFaq3"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq3" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+         </div>
+         <div class="w-full lg:w-1/2 px-4">
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq4 = !openFaq4"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq4" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq5 = !openFaq5"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq5" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq6 = !openFaq6"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq6" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+   <div class="absolute bottom-0 right-0 z-[-1]">
+      <svg
+         width="1440"
+         height="886"
+         viewBox="0 0 1440 886"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+         >
+         <path
+            opacity="0.5"
+            d="M193.307 -273.321L1480.87 1014.24L1121.85 1373.26C1121.85 1373.26 731.745 983.231 478.513 729.927C225.976 477.317 -165.714 85.6993 -165.714 85.6993L193.307 -273.321Z"
+            fill="url(#paint0_linear)"
+            />
+         <defs>
+            <linearGradient
+               id="paint0_linear"
+               x1="1308.65"
+               y1="1142.58"
+               x2="602.827"
+               y2="-418.681"
+               gradientUnits="userSpaceOnUse"
+               >
+               <stop stop-color="#3056D3" stop-opacity="0.36" />
+               <stop offset="1" stop-color="#F5F2FD" stop-opacity="0" />
+               <stop offset="1" stop-color="#F5F2FD" stop-opacity="0.096144" />
+            </linearGradient>
+         </defs>
+      </svg>
+   </div>
+</section>
+<!-- ====== FAQ Section End -->
+<!-- accordion 10 end -->
+
+<!-- start of script section -->
+<script type="text/javascript">
+   let toogler = document.getElementById("dark_mood_toogler");
+   let doc_html_el = document.getElementsByTagName('html')[0];
+ 
+   doc_html_el.addEventListener('keyup',(e)=>{
+       // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+       if(e.ctrlKey && e.keyCode =='220'){
+         doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+ 
+       }
+   })
+   doc_html_el.addEventListener('keyup',(e)=>{
+       // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+       if(e.ctrlKey && e.keyCode =='191'){
+         toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+ 
+       }
+   })
+   toogler.addEventListener('click',()=>{
+     doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+     console.log(doc_html_el.className);
+   })
+ </script>
+ <!-- end of script section -->
+ 
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/accordion/11_accordion.html b/public/componets/accordion/11_accordion.html
new file mode 100644
index 0000000..26be2c3
--- /dev/null
+++ b/public/componets/accordion/11_accordion.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Accordion 10</title>
+</head>
+<body>
+
+
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
+
+<!-- accordion 11 start  -->
+<section class="section_divider">
+    <div>Accordion 11</div>
+</section>
+
+<!-- component -->
+<!-- This is an example component -->
+<div class="max-w-2xl mx-auto bg-white p-16 rounded">
+
+	<div id="accordion-collapse" data-accordion="collapse">
+		<h2 id="accordion-collapse-heading-1">
+			<button type="button" class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium text-left border border-gray-200 dark:border-gray-700 border-b-0 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-xl" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
+      <span>What is Flowbite?</span>
+      <svg data-accordion-icon class="w-6 h-6 shrink-0 rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+		</h2>
+		<div id="accordion-collapse-body-1" aria-labelledby="accordion-collapse-heading-1">
+			<div class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900 border-b-0">
+				<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive
+					components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+				<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a
+						href="https://flowbite.com/docs/getting-started/introduction/" target="_blank"
+						class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing
+					websites even faster with components on top of Tailwind CSS.</p>
+			</div>
+		</div>
+		<h2 id="accordion-collapse-heading-2">
+			<button type="button" class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 border-b-0 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
+      <span>Is there a Figma file available?</span>
+      <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+		</h2>
+		<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
+			<div class="p-5 border border-gray-200 dark:border-gray-700 border-b-0">
+				<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the
+					Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+				<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/"
+						target="_blank" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a>
+					based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+			</div>
+		</div>
+		<h2 id="accordion-collapse-heading-3">
+			<button type="button" class="flex items-center border focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 border-gray-200 dark:border-gray-700 justify-between p-5 w-full font-medium text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
+      <span>What are the differences between Flowbite and Tailwind UI?</span>
+      <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+		</h2>
+		<div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
+			<div class="p-5 border border-gray-200 dark:border-gray-700 border-t-0">
+				<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from
+					Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another
+					difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers
+					sections of pages.</p>
+				<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite,
+					Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best
+					of two worlds.</p>
+				<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
+				<ul class="list-disc pl-5 dark:text-gray-400 text-gray-500">
+					<li><a href="https://flowbite.com/pro/" target="_blank"
+							class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
+					<li><a href="https://tailwindui.com/" rel="nofollow" target="_blank"
+							class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	
+	<script src="https://unpkg.com/flowbite@1.3.3/dist/flowbite.js"></script>
+</div>
+    
+
+<!-- accordion 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>
\ No newline at end of file
diff --git a/public/componets/accordion/4_accordion.html b/public/componets/accordion/4_accordion.html
index 2f2be6e..e7db3f7 100644
--- a/public/componets/accordion/4_accordion.html
+++ b/public/componets/accordion/4_accordion.html
@@ -142,5 +142,31 @@
 
 <!-- accordion 4 end -->
 
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/accordion/5_accordion.html b/public/componets/accordion/5_accordion.html
new file mode 100644
index 0000000..398fe4d
--- /dev/null
+++ b/public/componets/accordion/5_accordion.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Accordion 5</title>
+</head>
+<body>
+
+
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
+
+
+<!-- accordion 5 start -->
+<section class="section_divider">
+    <div>Accordion 5</div>
+</section>
+<!-- component -->
+<!-- This is an example component --> 
+  
+ 
+
+<style>
+    .accordion {
+    width: 100%;
+    }
+    
+    .panel {
+      display: none;
+      overflow: hidden;
+    }
+    </style>
+    <div class='flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto'>
+     
+    
+    <div class="bg-blue-200  mx-auto my-2"> 
+        
+    <h2 class="bg-dark-800 p-4 text-center font-black">Accordion</h2>
+    <button class="border-solid border-4 border-light-blue-500  text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 1</button>
+    <div class="panel bg-blue-100 p-4">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
+    </div>
+    
+    <button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 2</button>
+    <div class="panel bg-blue-100 p-4">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
+    </div>
+    
+    <button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 3</button>
+      <div class="panel bg-blue-100 p-4">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
+    </div>
+  </div>
+
+    </div>
+
+    <script>
+      
+    var accordElement = document.getElementsByClassName("accordion");
+        
+    for (i = 0; i < accordElement.length; i++) {
+      accordElement[i].addEventListener("click", function() {
+        this.classList.toggle("active");
+        var panel = this.nextElementSibling;
+        if (panel.style.display === "block") {
+          panel.style.display = "none";
+        } else {
+          panel.style.display = "block";
+        }
+      });
+    }
+    </script>
+
+<!-- accordion 5 end -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
+
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
+</script>
+<!-- end of script section -->
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/accordion/6_accordion.html b/public/componets/accordion/6_accordion.html
new file mode 100644
index 0000000..89f30b1
--- /dev/null
+++ b/public/componets/accordion/6_accordion.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Accordion 6</title>
+</head>
+<body>
+
+
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
+
+<!-- accordion 6 start -->
+<section class="section_divider">
+    <div>Accordion 6</div>
+</section>
+
+    <main class="p-5 bg-light-blue">
+      <div class="flex justify-center items-start my-2">
+        <div class="w-full sm:w-10/12 md:w-1/2 my-1">
+          <h2 class="text-xl font-semibold text-vnet-blue mb-2">FAQ - Order, Shipping, Etc.</h2>
+          <ul class="flex flex-col">
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(1)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>When will my order arrive?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                x-ref="tab"
+                :style="handleToggle()"
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+              >
+                <p class="p-3 text-gray-900">
+                  Shipping time is set by our delivery partners, according to the delivery method chosen by you. Additional details can be found in the order confirmation
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(2)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>How do I track my order?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  Once shipped, you’ll get a confirmation email that includes a tracking number and additional information regarding tracking your order.
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(3)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>What’s your return policy?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  We allow the return of all items within 30 days of your original order’s date. If you’re interested in returning your items, send us an email with your order number and we’ll ship a return label.
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(4)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>How do I make changes to an existing order?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  Changes to an existing order can be made as long as the order is still in “processing” status. Please contact our team via email and we’ll make sure to apply the needed changes. If your order has already been shipped, we cannot apply any changes to it. If you are unhappy with your order when it arrives, please contact us for any changes you may require.
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(5)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>What shipping options do you have?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  For USA domestic orders we offer FedEx and USPS shipping.
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(6)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>What payment methods do you accept?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  Any method of payments acceptable by you. For example: We accept MasterCard, Visa, American Express, PayPal, JCB Discover, Gift Cards, etc.
+                </p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
+  <script>
+    document.addEventListener('alpine:init', () => {
+      Alpine.store('accordion', {
+        tab: 0
+      });
+      
+      Alpine.data('accordion', (idx) => ({
+        init() {
+          this.idx = idx;
+        },
+        idx: -1,
+        handleClick() {
+          this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
+        },
+        handleRotate() {
+          return this.$store.accordion.tab === this.idx ? 'rotate-180' : '';
+        },
+        handleToggle() {
+          return this.$store.accordion.tab === this.idx ? `max-height: ${this.$refs.tab.scrollHeight}px` : '';
+        }
+      }));
+    })
+  </script>
+
+<!-- accordion 6 end -->
+
+<!-- start of script section -->
+<script type="text/javascript">
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
+
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
+</script>
+<!-- end of script section -->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/accordion/7_accordion.html b/public/componets/accordion/7_accordion.html
new file mode 100644
index 0000000..64164bb
--- /dev/null
+++ b/public/componets/accordion/7_accordion.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Accordion 7</title>
+</head>
+<body>
+
+
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
+
+<!-- accordion 7 start -->
+<section class="section_divider">
+    <div>Accordion 7</div>
+</section>
+<!-- component -->
+<div class=" p-20 flex items-center justify-center bg-gray-100">
+    <div class="flex flex-col px-6 py-8 bg-white shadow-lg">
+      <h1 class="mb-8 font-extrabold text-gray-800 leading-6">Coronavirus - Facts,<br/> advice and measures</h1>
+      <ul class="flex flex-col space-y-4 text-gray-900">
+        <div class="bg-yellow-100 border-l-4 border-yellow-300 rounded-md w-full px-6 py-4 cursor-pointer">Facts and knowledge about COVID19</div>
+        <div class="bg-purple-100 border-l-4 border-purple-300 rounded-md w-full px-6 py-4 cursor-pointer">For the public</div>
+        <div class="bg-red-100 border-l-4 border-red-300 rounded-md w-full px-6 py-4 cursor-pointer">For the government</div>
+        <ul>
+    </div>
+</div>
+
+<!-- accordion 7 end -->
+
+<!-- start of script section -->
+<script type="text/javascript">
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
+
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
+</script>
+<!-- end of script section -->
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/accordion/8_accordion.html b/public/componets/accordion/8_accordion.html
new file mode 100644
index 0000000..10af490
--- /dev/null
+++ b/public/componets/accordion/8_accordion.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Accordion 8</title>
+</head>
+<body>
+
+
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
+
+<!-- accordion 8 start  -->
+<section class="section_divider">
+    <div>Accordion 8</div>
+</section>
+
+    <div class="container mx-auto">
+      <div class="m-8 rounded overflow-hidden">
+        <!-- accordion-tab  -->
+        <div class="group outline-none accordion-section" tabindex="1">
+          <div
+            class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
+          >
+            <div class="group-focus:text-white transition ease duration-500">
+              Title for Tab - 1
+            </div>
+            <div
+              class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
+            >
+              <i class="fas fa-chevron-down"></i>
+            </div>
+          </div>
+          <div
+            class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
+          >
+            <p class="p-2 text-gray-400 text-justify">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
+              repellat amet doloribus consequuntur eos similique provident
+              tempora voluptates iure quia fuga dicta voluptatibus culpa
+              mollitia recusandae delectus id suscipit labore?
+            </p>
+          </div>
+        </div>
+        <!-- accordion-tab -->
+        <!-- accordion-tab  -->
+        <div class="group outline-none accordion-section" tabindex="2">
+          <div
+            class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
+          >
+            <div class="group-focus:text-white transition ease duration-500">
+              Title for Tab - 2
+            </div>
+            <div
+              class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
+            >
+              <i class="fas fa-chevron-down"></i>
+            </div>
+          </div>
+          <div
+            class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
+          >
+            <p class="p-2 text-gray-400 text-justify">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
+              repellat amet doloribus consequuntur eos similique provident
+              tempora voluptates iure quia fuga dicta voluptatibus culpa
+              mollitia recusandae delectus id suscipit labore?
+            </p>
+          </div>
+        </div>
+        <!-- accordion-tab -->
+        <!-- accordion-tab  -->
+        <div class="group outline-none accordion-section" tabindex="3">
+          <div
+            class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
+          >
+            <div class="group-focus:text-white transition ease duration-500">
+              Title for Tab - 3
+            </div>
+            <div
+              class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
+            >
+              <i class="fas fa-chevron-down"></i>
+            </div>
+          </div>
+          <div
+            class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
+          >
+            <p class="p-2 text-gray-400 text-justify">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
+              repellat amet doloribus consequuntur eos similique provident
+              tempora voluptates iure quia fuga dicta voluptatibus culpa
+              mollitia recusandae delectus id suscipit labore?
+            </p>
+          </div>
+        </div>
+        <!-- accordion-tab -->
+      </div>
+    </div>
+
+    
+<!-- accordion 8 end -->
+
+<!-- start of script section -->
+<script type="text/javascript">
+  let toogler = document.getElementById("dark_mood_toogler");
+  let doc_html_el = document.getElementsByTagName('html')[0];
+
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+      if(e.ctrlKey && e.keyCode =='220'){
+        doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+
+      }
+  })
+  doc_html_el.addEventListener('keyup',(e)=>{
+      // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+      if(e.ctrlKey && e.keyCode =='191'){
+        toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+
+      }
+  })
+  toogler.addEventListener('click',()=>{
+    doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+    console.log(doc_html_el.className);
+  })
+</script>
+<!-- end of script section -->
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/accordion/9_accordion.html b/public/componets/accordion/9_accordion.html
new file mode 100644
index 0000000..353d4ff
--- /dev/null
+++ b/public/componets/accordion/9_accordion.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Accordion 9</title>
+</head>
+<body>
+
+
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
+
+<!-- accordion 9 start -->
+<section class="section_divider">
+    <div>Accordion 9</div>
+</section>
+
+<div x-data="accordion" class="max-w-md border border-gray-300 divide-y divide-gray-300">
+    <h3 class="text-lg">
+        <button x-bind="header('general')" class="flex items-center justify-between w-full px-4 py-2 font-medium focus:outline-black focus:border-blue-600">
+            <span>General</span>
+            <!-- Active: `transform rotate-180`, Inactive: `transform rotate-0` -->
+            <svg x-bind="headerIcon('general')" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
+            </svg>
+        </button>
+    </h3>
+
+    <div x-bind="section('general')" class="px-4 py-2">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim quis ante ut pellentesque. Quisque bibendum dapibus laoreet. Aliquam eget consectetur sem. Suspendisse massa lectus, rhoncus sed sollicitudin sed, auctor vel velit.
+    </div>
+
+    <h3 class="text-lg">
+        <button x-bind="header('settings')" class="flex items-center justify-between w-full px-4 py-2 font-medium focus:outline-black focus:border-blue-600">
+            <span>Settings</span>
+            <!-- Active: `transform rotate-180`, Inactive: `transform rotate-0` -->
+            <svg x-bind="headerIcon('settings')" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
+            </svg>
+        </button>
+    </h3>
+    
+    <div x-bind="section('settings')" class="px-4 py-2">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim quis ante ut pellentesque. Quisque bibendum dapibus laoreet. Aliquam eget consectetur sem. Suspendisse massa lectus, rhoncus sed sollicitudin sed, auctor vel velit.
+    </div>
+</div>
+
+<!-- accordion 9 end -->
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/accordion/accordion.html b/public/componets/accordion/accordion.html
index b24030c..5347702 100644
--- a/public/componets/accordion/accordion.html
+++ b/public/componets/accordion/accordion.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="./../../../dist/tailshape.css">
     <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <script defer src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js"></script>
     <title>Accordion</title>
 </head>
 <body>
@@ -356,6 +357,936 @@
 <!-- accordion 4 end -->
 
 
+<!-- accordion 5 start -->
+<section class="section_divider">
+    <div>Accordion 5</div>
+</section>
+<!-- component -->
+<!-- This is an example component --> 
+  
+ 
+
+<style>
+    .accordion {
+    width: 100%;
+    }
+    
+    .panel {
+      display: none;
+      overflow: hidden;
+    }
+    </style>
+    <div class='flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto'>
+     
+    
+    <div class="bg-blue-200  mx-auto my-2"> 
+        
+    <h2 class="bg-dark-800 p-4 text-center font-black">Accordion</h2>
+    <button class="border-solid border-4 border-light-blue-500  text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 1</button>
+    <div class="panel bg-blue-100 p-4">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
+    </div>
+    
+    <button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 2</button>
+    <div class="panel bg-blue-100 p-4">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
+    </div>
+    
+    <button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 3</button>
+      <div class="panel bg-blue-100 p-4">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
+    </div>
+  </div>
+
+    </div>
+
+    <script>
+      
+    var accordElement = document.getElementsByClassName("accordion");
+        
+    for (i = 0; i < accordElement.length; i++) {
+      accordElement[i].addEventListener("click", function() {
+        this.classList.toggle("active");
+        var panel = this.nextElementSibling;
+        if (panel.style.display === "block") {
+          panel.style.display = "none";
+        } else {
+          panel.style.display = "block";
+        }
+      });
+    }
+    </script>
+
+<!-- accordion 5 end -->
+
+
+<!-- accordion 6 start -->
+<section class="section_divider">
+    <div>Accordion 6</div>
+</section>
+
+    <main class="p-5 bg-light-blue">
+      <div class="flex justify-center items-start my-2">
+        <div class="w-full sm:w-10/12 md:w-1/2 my-1">
+          <h2 class="text-xl font-semibold text-vnet-blue mb-2">FAQ - Order, Shipping, Etc.</h2>
+          <ul class="flex flex-col">
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(1)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>When will my order arrive?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                x-ref="tab"
+                :style="handleToggle()"
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+              >
+                <p class="p-3 text-gray-900">
+                  Shipping time is set by our delivery partners, according to the delivery method chosen by you. Additional details can be found in the order confirmation
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(2)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>How do I track my order?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  Once shipped, you’ll get a confirmation email that includes a tracking number and additional information regarding tracking your order.
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(3)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>What’s your return policy?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  We allow the return of all items within 30 days of your original order’s date. If you’re interested in returning your items, send us an email with your order number and we’ll ship a return label.
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(4)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>How do I make changes to an existing order?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  Changes to an existing order can be made as long as the order is still in “processing” status. Please contact our team via email and we’ll make sure to apply the needed changes. If your order has already been shipped, we cannot apply any changes to it. If you are unhappy with your order when it arrives, please contact us for any changes you may require.
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(5)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>What shipping options do you have?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  For USA domestic orders we offer FedEx and USPS shipping.
+                </p>
+              </div>
+            </li>
+            <li class="bg-white my-2 shadow-lg" x-data="accordion(6)">
+              <h2
+                @click="handleClick()"
+                class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
+              >
+                <span>What payment methods do you accept?</span>
+                <svg
+                  :class="handleRotate()"
+                  class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
+                </svg>
+              </h2>
+              <div
+                class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
+                x-ref="tab"
+                :style="handleToggle()"
+              >
+                <p class="p-3 text-gray-900">
+                  Any method of payments acceptable by you. For example: We accept MasterCard, Visa, American Express, PayPal, JCB Discover, Gift Cards, etc.
+                </p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
+  <script>
+    document.addEventListener('alpine:init', () => {
+      Alpine.store('accordion', {
+        tab: 0
+      });
+      
+      Alpine.data('accordion', (idx) => ({
+        init() {
+          this.idx = idx;
+        },
+        idx: -1,
+        handleClick() {
+          this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
+        },
+        handleRotate() {
+          return this.$store.accordion.tab === this.idx ? 'rotate-180' : '';
+        },
+        handleToggle() {
+          return this.$store.accordion.tab === this.idx ? `max-height: ${this.$refs.tab.scrollHeight}px` : '';
+        }
+      }));
+    })
+  </script>
+
+<!-- accordion 6 end -->
+
+<!-- accordion 7 start -->
+<section class="section_divider">
+    <div>Accordion 7</div>
+</section>
+<!-- component -->
+<div class=" p-20 flex items-center justify-center bg-gray-100">
+    <div class="flex flex-col px-6 py-8 bg-white shadow-lg">
+      <h1 class="mb-8 font-extrabold text-gray-800 leading-6">Coronavirus - Facts,<br/> advice and measures</h1>
+      <ul class="flex flex-col space-y-4 text-gray-900">
+        <div class="bg-yellow-100 border-l-4 border-yellow-300 rounded-md w-full px-6 py-4 cursor-pointer">Facts and knowledge about COVID19</div>
+        <div class="bg-purple-100 border-l-4 border-purple-300 rounded-md w-full px-6 py-4 cursor-pointer">For the public</div>
+        <div class="bg-red-100 border-l-4 border-red-300 rounded-md w-full px-6 py-4 cursor-pointer">For the government</div>
+        <ul>
+    </div>
+</div>
+
+<!-- accordion 7 end -->
+
+<!-- accordion 8 start  -->
+<section class="section_divider">
+    <div>Accordion 8</div>
+</section>
+
+    <div class="container mx-auto">
+      <div class="m-8 rounded overflow-hidden">
+        <!-- accordion-tab  -->
+        <div class="group outline-none accordion-section" tabindex="1">
+          <div
+            class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
+          >
+            <div class="group-focus:text-white transition ease duration-500">
+              Title for Tab - 1
+            </div>
+            <div
+              class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
+            >
+              <i class="fas fa-chevron-down"></i>
+            </div>
+          </div>
+          <div
+            class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
+          >
+            <p class="p-2 text-gray-400 text-justify">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
+              repellat amet doloribus consequuntur eos similique provident
+              tempora voluptates iure quia fuga dicta voluptatibus culpa
+              mollitia recusandae delectus id suscipit labore?
+            </p>
+          </div>
+        </div>
+        <!-- accordion-tab -->
+        <!-- accordion-tab  -->
+        <div class="group outline-none accordion-section" tabindex="2">
+          <div
+            class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
+          >
+            <div class="group-focus:text-white transition ease duration-500">
+              Title for Tab - 2
+            </div>
+            <div
+              class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
+            >
+              <i class="fas fa-chevron-down"></i>
+            </div>
+          </div>
+          <div
+            class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
+          >
+            <p class="p-2 text-gray-400 text-justify">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
+              repellat amet doloribus consequuntur eos similique provident
+              tempora voluptates iure quia fuga dicta voluptatibus culpa
+              mollitia recusandae delectus id suscipit labore?
+            </p>
+          </div>
+        </div>
+        <!-- accordion-tab -->
+        <!-- accordion-tab  -->
+        <div class="group outline-none accordion-section" tabindex="3">
+          <div
+            class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
+          >
+            <div class="group-focus:text-white transition ease duration-500">
+              Title for Tab - 3
+            </div>
+            <div
+              class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
+            >
+              <i class="fas fa-chevron-down"></i>
+            </div>
+          </div>
+          <div
+            class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
+          >
+            <p class="p-2 text-gray-400 text-justify">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
+              repellat amet doloribus consequuntur eos similique provident
+              tempora voluptates iure quia fuga dicta voluptatibus culpa
+              mollitia recusandae delectus id suscipit labore?
+            </p>
+          </div>
+        </div>
+        <!-- accordion-tab -->
+      </div>
+    </div>
+
+    
+<!-- accordion 8 end -->
+
+<!-- accordion 9 start -->
+<section class="section_divider">
+    <div>Accordion 9</div>
+</section>
+
+<div x-data="accordion" class="max-w-md border border-gray-300 divide-y divide-gray-300">
+    <h3 class="text-lg">
+        <button x-bind="header('general')" class="flex items-center justify-between w-full px-4 py-2 font-medium focus:outline-black focus:border-blue-600">
+            <span>General</span>
+            <!-- Active: `transform rotate-180`, Inactive: `transform rotate-0` -->
+            <svg x-bind="headerIcon('general')" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
+            </svg>
+        </button>
+    </h3>
+
+    <div x-bind="section('general')" class="px-4 py-2">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim quis ante ut pellentesque. Quisque bibendum dapibus laoreet. Aliquam eget consectetur sem. Suspendisse massa lectus, rhoncus sed sollicitudin sed, auctor vel velit.
+    </div>
+
+    <h3 class="text-lg">
+        <button x-bind="header('settings')" class="flex items-center justify-between w-full px-4 py-2 font-medium focus:outline-black focus:border-blue-600">
+            <span>Settings</span>
+            <!-- Active: `transform rotate-180`, Inactive: `transform rotate-0` -->
+            <svg x-bind="headerIcon('settings')" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
+            </svg>
+        </button>
+    </h3>
+    
+    <div x-bind="section('settings')" class="px-4 py-2">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim quis ante ut pellentesque. Quisque bibendum dapibus laoreet. Aliquam eget consectetur sem. Suspendisse massa lectus, rhoncus sed sollicitudin sed, auctor vel velit.
+    </div>
+</div>
+
+<!-- accordion 9 end -->
+
+
+<!-- accordion 10 start -->
+<section class="section_divider">
+    <div>Accordion 10</div>
+</section>
+<!-- ====== FAQ Section Start -->
+<section
+   x-data="
+   {
+   openFaq1: false, 
+   openFaq2: false, 
+   openFaq3: false, 
+   openFaq4: false, 
+   openFaq5: false, 
+   openFaq6: false
+   }
+   "
+   class="
+   dark:bg-gray-800
+   bg-gray-300
+   pt-20
+   lg:pt-[120px]
+   pb-12
+   lg:pb-[90px]
+   relative
+   z-20
+   overflow-hidden
+
+   "
+   >
+   <div class="mx-20  ">
+      <div class="flex flex-wrap -mx-4">
+         <div class="w-full px-4">
+            <div class="text-center mx-auto mb-[60px] lg:mb-20 max-w-[520px]">
+               <span class="font-semibold text-lg text-primary mb-2 block">
+               FAQ
+               </span>
+               <h2
+                  class="
+                  font-bold
+                  text-3xl
+                  sm:text-4xl
+                  md:text-[40px]
+                  text-dark
+                  mb-4
+                  "
+                  >
+                  Any Questions? Look Here
+               </h2>
+               <p class="text-base text-body-color">
+                  There are many variations of passages of Lorem Ipsum available
+                  but the majority have suffered alteration in some form.
+               </p>
+            </div>
+         </div>
+      </div>
+      <div class="flex flex-wrap -mx-4">
+         <div class="w-full lg:w-1/2 px-4">
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq1 = !openFaq1"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq1" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq2 = !openFaq2"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq2" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq3 = !openFaq3"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq3" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+         </div>
+         <div class="w-full lg:w-1/2 px-4">
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq4 = !openFaq4"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq4" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq5 = !openFaq5"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq5" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+            <div
+               class="
+               single-faq
+               w-full
+               bg-white
+               border border-[#F3F4FE]
+               rounded-lg
+               p-4
+               sm:p-8
+               lg:px-6
+               xl:px-8
+               mb-8
+               "
+               >
+               <button
+                  class="faq-btn flex w-full text-left"
+                  @click="openFaq6 = !openFaq6"
+                  >
+                  <div
+                     class="
+                     w-full
+                     max-w-[40px]
+                     h-10
+                     flex
+                     items-center
+                     justify-center
+                     rounded-lg
+                     bg-primary
+                     text-primary
+                     bg-opacity-5
+                     mr-5
+                     "
+                     >
+                     <svg
+                        width="17"
+                        height="10"
+                        viewBox="0 0 17 10"
+                        class="fill-current icon"
+                        >
+                        <path
+                           d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
+                           fill="#3056D3"
+                           stroke="#3056D3"
+                           />
+                     </svg>
+                  </div>
+                  <div class="w-full">
+                     <h4 class="text-lg font-semibold text-black">
+                        How long we deliver your first blog post?
+                     </h4>
+                  </div>
+               </button>
+               <div x-show="openFaq6" class="faq-content pl-[62px]">
+                  <p class="text-base text-body-color leading-relaxed py-3">
+                     It takes 2-3 weeks to get your first blog post ready. That
+                     includes the in-depth research & creation of your monthly
+                     content marketing strategy that we do before writing your
+                     first blog post, Ipsum available .
+                  </p>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+   <div class="absolute bottom-0 right-0 z-[-1]">
+      <svg
+         width="1440"
+         height="886"
+         viewBox="0 0 1440 886"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg"
+         >
+         <path
+            opacity="0.5"
+            d="M193.307 -273.321L1480.87 1014.24L1121.85 1373.26C1121.85 1373.26 731.745 983.231 478.513 729.927C225.976 477.317 -165.714 85.6993 -165.714 85.6993L193.307 -273.321Z"
+            fill="url(#paint0_linear)"
+            />
+         <defs>
+            <linearGradient
+               id="paint0_linear"
+               x1="1308.65"
+               y1="1142.58"
+               x2="602.827"
+               y2="-418.681"
+               gradientUnits="userSpaceOnUse"
+               >
+               <stop stop-color="#3056D3" stop-opacity="0.36" />
+               <stop offset="1" stop-color="#F5F2FD" stop-opacity="0" />
+               <stop offset="1" stop-color="#F5F2FD" stop-opacity="0.096144" />
+            </linearGradient>
+         </defs>
+      </svg>
+   </div>
+</section>
+<!-- ====== FAQ Section End -->
+<!-- accordion 10 end -->
+
+<!-- accordion 11 start  -->
+<section class="section_divider">
+    <div>Accordion 11</div>
+</section>
+
+<!-- component -->
+<!-- This is an example component -->
+<div class="max-w-2xl mx-auto bg-white p-16 rounded">
+
+	<div id="accordion-collapse" data-accordion="collapse">
+		<h2 id="accordion-collapse-heading-1">
+			<button type="button" class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium text-left border border-gray-200 dark:border-gray-700 border-b-0 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-xl" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
+      <span>What is Flowbite?</span>
+      <svg data-accordion-icon class="w-6 h-6 shrink-0 rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+		</h2>
+		<div id="accordion-collapse-body-1" aria-labelledby="accordion-collapse-heading-1">
+			<div class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900 border-b-0">
+				<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive
+					components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+				<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a
+						href="https://flowbite.com/docs/getting-started/introduction/" target="_blank"
+						class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing
+					websites even faster with components on top of Tailwind CSS.</p>
+			</div>
+		</div>
+		<h2 id="accordion-collapse-heading-2">
+			<button type="button" class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 border-b-0 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
+      <span>Is there a Figma file available?</span>
+      <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+		</h2>
+		<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
+			<div class="p-5 border border-gray-200 dark:border-gray-700 border-b-0">
+				<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the
+					Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+				<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/"
+						target="_blank" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a>
+					based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+			</div>
+		</div>
+		<h2 id="accordion-collapse-heading-3">
+			<button type="button" class="flex items-center border focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 border-gray-200 dark:border-gray-700 justify-between p-5 w-full font-medium text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
+      <span>What are the differences between Flowbite and Tailwind UI?</span>
+      <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+		</h2>
+		<div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
+			<div class="p-5 border border-gray-200 dark:border-gray-700 border-t-0">
+				<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from
+					Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another
+					difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers
+					sections of pages.</p>
+				<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite,
+					Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best
+					of two worlds.</p>
+				<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
+				<ul class="list-disc pl-5 dark:text-gray-400 text-gray-500">
+					<li><a href="https://flowbite.com/pro/" target="_blank"
+							class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
+					<li><a href="https://tailwindui.com/" rel="nofollow" target="_blank"
+							class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	
+	<script src="https://unpkg.com/flowbite@1.3.3/dist/flowbite.js"></script>
+</div>
+    
+
+<!-- accordion 11 end -->
+
+
 <!-- start of script section -->
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");
diff --git a/public/componets/pricing/pricing.html b/public/componets/pricing/pricing.html
new file mode 100644
index 0000000..e2b69d2
--- /dev/null
+++ b/public/componets/pricing/pricing.html
@@ -0,0 +1,1265 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Pricing</title>
+</head>
+<body>
+
+
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
+
+    <!-- pricing 1 start -->
+    <section class="section_divider">
+        <div>
+            Pricing 1
+        </div>
+    </section>
+
+
+    <section class="dark:bg-gray-800">
+        
+        <div class="text-center transform scale-75 " >
+            <div class="xl:p-18 xl:m-auto ">
+                <div class="grid xl:grid-cols-3">
+                    <div class="z-10 pb-20 mt-20 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
+                        <div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
+                            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
+                                style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
+                                <path
+                                    d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
+                                        c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
+                                        c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
+                                        c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
+                                        c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
+                                        c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
+                                        c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
+                            </svg>
+                        </div>
+                        <h3 class="mt-8 text-4xl font-bold">Free</h3>
+                        <h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400">$0 / Month</h3>
+                        <ul class="space-y-6 text-xl">
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">30-Day Trial</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">500GB Bandwidth</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">200H DiskSpaces&#8482;</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">5 Course Submissions</li>
+                        </ul>
+                        <button
+                            class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order</button>
+                    </div>
+                    <div
+                        class="z-10 pb-20 mt-20 transform scale-110 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
+                        <div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
+                            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
+                                style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
+                                <path
+                                    d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
+                                        c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
+                                        c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
+                                        c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
+                                        c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
+                                        c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
+                                        c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
+                            </svg>
+                        </div>
+                        <h3 class="mt-8 text-3xl font-bold">Medium</h3>
+                        <h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400">$25 / Month</h3>
+                        <ul class="space-y-6 text-xl">
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">Incl. Free package</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">1TB Bandwidth</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">1TB DiskSpaces&#8482;</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">15 Course Submissions</li>
+                        </ul>
+                        <button class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order
+                            Now</button>
+                    </div>
+                    <div class="pb-20 mt-20 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
+                        <div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
+                            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
+                                style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
+                                <path
+                                    d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
+                                        c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
+                                        c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
+                                        c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
+                                        c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
+                                        c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
+                                        c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
+                            </svg>
+                        </div>
+                        <h3 class="mt-8 text-3xl font-bold">Large</h3>
+                        <h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400 ">$50 / Month</h3>
+                        <ul class="space-y-6 text-xl ">
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">Incl. Medium package</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">Unlimited Bandwidth</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">2.4TB DiskSpaces&#8482;</li>
+                            <li class="dark:hover:text-purple-400 transition-color duration-300">Unlimited Submissions</li>
+                        </ul>
+                        <button
+                            class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </section>
+
+    <!-- pricing 1 end -->
+
+
+
+    <!-- pricing 2 start -->
+    <section class="section_divider">
+        <div>Pricing 2</div>
+    </section>
+
+    <section x-data="{ toggle: 'basic' }"
+    class="relative min-h-screen py-16 bg-gray-200 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 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
+                <div class="flex-grow px-8 py-5">
+                    <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 bg-opacity-25 rounded-r md:flex-shrink"
+                    style="background: url('https://picsum.photos/400/400?grayscale');"></div>
+            </div>
+            <div x-show="toggle === 'silver'"
+                class="flex w-full mt-10 bg-white rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
+                <div class="flex-grow px-8 py-5">
+                    <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 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 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
+                <div class="flex-grow px-8 py-5">
+                    <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 rounded-r md:flex-shrink"
+                    style="background: url('https://picsum.photos/400/400?grayscale');"></div>
+            </div>
+        </div>
+    </div>
+</section>
+
+    
+    <!-- pricing 2 end -->
+    
+    <!-- pricing 3 start  -->
+    <section class="section_divider">
+        <div>Pricing 3</div>
+    </section>
+    <div class="relative w-full h-full">
+        <div class="absolute hidden w-full bg-gray-50 lg:block h-96"></div>
+        <div class="relative 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">
+          <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+            <h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
+              <span class="relative inline-block">
+                <svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-gray-400 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
+                  <defs>
+                    <pattern id="2c67e949-4a23-49f7-bf27-ca140852cf21" x="0" y="0" width=".135" height=".30">
+                      <circle cx="1" cy="1" r=".7"></circle>
+                    </pattern>
+                  </defs>
+                  <rect fill="url(#2c67e949-4a23-49f7-bf27-ca140852cf21)" width="52" height="24"></rect>
+                </svg>
+                <span class="relative">Affordable</span>
+              </span>
+              for everyone
+            </h2>
+            <p class="text-base text-gray-700 md:text-lg">
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.
+            </p>
+          </div>
+          <div class="grid max-w-screen-md gap-10 md:grid-cols-2 sm:mx-auto">
+            <div>
+              <div class="p-8 bg-gray-900 rounded">
+                <div class="mb-4 text-center">
+                  <p class="text-xl font-medium tracking-wide text-white">
+                    Starter Plan
+                  </p>
+                  <div class="flex items-center justify-center">
+                    <p class="mr-2 text-5xl font-semibold text-white lg:text-6xl">
+                      $39
+                    </p>
+                    <p class="text-lg text-gray-500">/ month</p>
+                  </div>
+                </div>
+                <ul class="mb-8 space-y-2">
+                  <li class="flex items-center">
+                    <div class="mr-3">
+                      <svg class="w-4 h-4 text-teal-accent-400" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-300">10 deploys per day</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-3">
+                      <svg class="w-4 h-4 text-teal-accent-400" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-300">10 GB of storage</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-3">
+                      <svg class="w-4 h-4 text-teal-accent-400" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-300">3 domains</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-3">
+                      <svg class="w-4 h-4 text-teal-accent-400" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-300">SSL Certificates</p>
+                  </li>
+                </ul>
+                <button
+                  type="submit"
+                  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-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
+                >
+                  Get Now
+                </button>
+              </div>
+              <div class="w-11/12 h-2 mx-auto bg-gray-900 rounded-b opacity-75"></div>
+              <div class="w-10/12 h-2 mx-auto bg-gray-900 rounded-b opacity-50"></div>
+              <div class="w-9/12 h-2 mx-auto bg-gray-900 rounded-b opacity-25"></div>
+            </div>
+            <div>
+              <div class="p-8 bg-gray-900 rounded">
+                <div class="mb-4 text-center">
+                  <p class="text-xl font-medium tracking-wide text-white">Pro Plan</p>
+                  <div class="flex items-center justify-center">
+                    <p class="mr-2 text-5xl font-semibold text-white lg:text-6xl">
+                      $59
+                    </p>
+                    <p class="text-lg text-gray-500">/ month</p>
+                  </div>
+                </div>
+                <ul class="mb-8 space-y-2">
+                  <li class="flex items-center">
+                    <div class="mr-3">
+                      <svg class="w-4 h-4 text-teal-accent-400" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-300">100 deploys per day</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-3">
+                      <svg class="w-4 h-4 text-teal-accent-400" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-300">50 GB of storage</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-3">
+                      <svg class="w-4 h-4 text-teal-accent-400" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-300">Unlimited domains</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-3">
+                      <svg class="w-4 h-4 text-teal-accent-400" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-300">SSL Certificates</p>
+                  </li>
+                </ul>
+                <button
+                  type="submit"
+                  class="inline-flex items-center justify-center w-full h-12 px-6 font-semibold tracking-wide text-gray-900 transition duration-200 rounded shadow-md bg-teal-600 hover:bg-teal-accent-700 focus:shadow-outline focus:outline-none"
+                >
+                  Get Now
+                </button>
+              </div>
+              <div class="w-11/12 h-2 mx-auto bg-gray-900 rounded-b opacity-75"></div>
+              <div class="w-10/12 h-2 mx-auto bg-gray-900 rounded-b opacity-50"></div>
+              <div class="w-9/12 h-2 mx-auto bg-gray-900 rounded-b opacity-25"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    
+    <!-- pricing 3 end -->
+
+    <!-- pricing 4 start  -->
+    <section class="section_divider">
+        <div>Pricing 4</div>
+    </section>
+    <div class="px-4 py-16 mx-auto dark:bg-gray-800">
+        <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12 ">
+          <div>
+            <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
+              Our Pricing
+            </p>
+          </div>
+          <h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
+            <span class="relative inline-block">
+              <svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
+                <defs>
+                  <pattern id="7e5e8ff8-1960-4094-a63a-2a0c0f922d69" x="0" y="0" width=".135" height=".30">
+                    <circle cx="1" cy="1" r=".7"></circle>
+                  </pattern>
+                </defs>
+                <rect fill="url(#7e5e8ff8-1960-4094-a63a-2a0c0f922d69)" width="52" height="24"></rect>
+              </svg>
+              <span class="relative">Transparent</span>
+            </span>
+            pricing. Pay as you grow.
+          </h2>
+          <p class="text-base text-gray-700 md:text-lg">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.
+          </p>
+        </div>
+        <div class="grid max-w-md gap-10 row-gap-5 lg:max-w-screen-lg sm:row-gap-10 lg:grid-cols-3 xl:max-w-screen-lg sm:mx-auto">
+          <div class="flex flex-col justify-between p-8 transition-shadow duration-300 bg-white border rounded shadow-sm sm:items-center hover:shadow">
+            <div class="text-center">
+              <div class="text-lg font-semibold">Start</div>
+              <div class="flex items-center justify-center mt-2">
+                <div class="mr-1 text-5xl font-bold">Free</div>
+              </div>
+              <div class="mt-2 space-y-3">
+                <div class="text-gray-700">10 deploys per day</div>
+                <div class="text-gray-700">10 GB of storage</div>
+                <div class="text-gray-700">20 domains</div>
+              </div>
+            </div>
+            <div>
+              <a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 bg-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
+                Start for free
+              </a>
+              <p class="max-w-xs mt-6 text-xs text-gray-600 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
+                Sed ut unde omnis iste natus accusantium doloremque.
+              </p>
+            </div>
+          </div>
+          <div class="relative flex flex-col justify-between p-8 transition-shadow duration-300 bg-white border rounded shadow-sm sm:items-center hover:shadow border-purple-800">
+            <div class="absolute inset-x-0 top-0 flex justify-center -mt-3">
+              <div class="inline-block px-3 py-1 text-xs font-medium tracking-wider text-white uppercase rounded bg-purple-800">
+                Most Popular
+              </div>
+            </div>
+            <div class="text-center">
+              <div class="text-lg font-semibold">Pro</div>
+              <div class="flex items-center justify-center mt-2">
+                <div class="mr-1 text-5xl font-bold">$38</div>
+                <div class="text-gray-700">/ mo</div>
+              </div>
+              <div class="mt-2 space-y-3">
+                <div class="text-gray-700">200 deploys per day</div>
+                <div class="text-gray-700">80 GB of storage</div>
+                <div class="text-gray-700">Global CDN</div>
+              </div>
+            </div>
+            <div>
+              <a
+                href="/"
+                class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
+              >
+                Buy Pro
+              </a>
+              <p class="max-w-xs mt-6 text-xs text-gray-600 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
+                Sed ut unde omnis iste natus accusantium doloremque.
+              </p>
+            </div>
+          </div>
+          <div class="flex flex-col justify-between p-8 transition-shadow duration-300 bg-white border rounded shadow-sm sm:items-center hover:shadow">
+            <div class="text-center">
+              <div class="text-lg font-semibold">Business</div>
+              <div class="flex items-center justify-center mt-2">
+                <div class="mr-1 text-5xl font-bold">$78</div>
+                <div class="text-gray-700">/ mo</div>
+              </div>
+              <div class="mt-2 space-y-3">
+                <div class="text-gray-700">500 GB of storage</div>
+                <div class="text-gray-700">Unlimited domains</div>
+                <div class="text-gray-700">24/7 Support</div>
+              </div>
+            </div>
+            <div>
+              <a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 bg-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
+                Buy Business
+              </a>
+              <p class="max-w-xs mt-6 text-xs text-gray-600 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
+                Sed ut unde omnis iste natus accusantium doloremque.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    
+    <!-- pricing 4 end -->
+
+
+    <!-- pricing 5 start  -->
+    <section class="section_divider">
+        <div>Pricing 5</div>
+    </section>
+    <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">
+        <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+          <div>
+            <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
+              Brand new
+            </p>
+          </div>
+          <h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
+            <span class="relative inline-block">
+              <svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
+                <defs>
+                  <pattern id="ace59d72-08d5-4850-b9e4-d9d0b86c0525" x="0" y="0" width=".135" height=".30">
+                    <circle cx="1" cy="1" r=".7"></circle>
+                  </pattern>
+                </defs>
+                <rect fill="url(#ace59d72-08d5-4850-b9e4-d9d0b86c0525)" width="52" height="24"></rect>
+              </svg>
+              <span class="relative">Transparent</span>
+            </span>
+            pricing. Pay as you grow.
+          </h2>
+          <p class="text-base text-gray-700 md:text-lg">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.
+          </p>
+        </div>
+        <div class="grid max-w-md gap-10 row-gap-5 sm:row-gap-10 lg:max-w-screen-md lg:grid-cols-2 sm:mx-auto">
+          <div class="flex flex-col justify-between p-5 bg-white border rounded shadow-sm">
+            <div class="mb-6">
+              <div class="flex items-center justify-between pb-6 mb-6 border-b">
+                <div>
+                  <p class="text-sm font-bold tracking-wider uppercase">
+                    Personal use
+                  </p>
+                  <p class="text-5xl font-extrabold">Free</p>
+                </div>
+                <div class="flex items-center justify-center w-24 h-24 rounded-full bg-blue-gray-50">
+                  <svg class="w-10 h-10 text-gray-600" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                    <path d="M12,7L12,7 c-1.657,0-3-1.343-3-3v0c0-1.657,1.343-3,3-3h0c1.657,0,3,1.343,3,3v0C15,5.657,13.657,7,12,7z" fill="none" stroke="currentColor"></path>
+                    <path d="M15,23H9v-5H7v-6 c0-1.105,0.895-2,2-2h6c1.105,0,2,0.895,2,2v6h-2V23z" fill="none" stroke="currentColor"></path>
+                  </svg>
+                </div>
+              </div>
+              <div>
+                <p class="mb-2 font-bold tracking-wide">Features</p>
+                <ul class="space-y-2">
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">10 deploys per day</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">10 GB of storage</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">Unlimited domains</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">SSL Certificates</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div>
+              <a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mb-4 font-medium tracking-wide text-white transition duration-200 bg-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
+                Start for free
+              </a>
+              <p class="text-sm text-gray-600">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+              </p>
+            </div>
+          </div>
+          <div class="flex flex-col justify-between p-5 bg-white border rounded shadow-sm">
+            <div class="mb-6">
+              <div class="flex items-center justify-between pb-6 mb-6 border-b">
+                <div>
+                  <p class="text-sm font-bold tracking-wider uppercase">
+                    For your team
+                  </p>
+                  <p class="text-5xl font-extrabold">$39</p>
+                </div>
+                <div class="flex items-center justify-center w-24 h-24 rounded-full bg-indigo-50">
+                  <svg class="w-10 h-10 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                    <path d="M4,7L4,7 C2.895,7,2,6.105,2,5v0c0-1.105,0.895-2,2-2h0c1.105,0,2,0.895,2,2v0C6,6.105,5.105,7,4,7z" fill="none" stroke="currentColor"></path>
+                    <path d="M6,21H3v-4 l-2,0v-5c0-1.105,0.895-2,2-2h1" fill="none" stroke="currentColor"></path>
+                    <path d="M20,7L20,7 c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h0c-1.105,0-2,0.895-2,2v0C18,6.105,18.895,7,20,7z" fill="none" stroke="currentColor"></path>
+                    <path d="M18,21h3v-4 l2,0v-5c0-1.105-0.895-2-2-2h-1" fill="none" stroke="currentColor"></path>
+                    <path d="M12,7L12,7 c-1.657,0-3-1.343-3-3v0c0-1.657,1.343-3,3-3h0c1.657,0,3,1.343,3,3v0C15,5.657,13.657,7,12,7z" fill="none" stroke="currentColor"></path>
+                    <path d="M15,23H9v-6H7v-5 c0-1.105,0.895-2,2-2h6c1.105,0,2,0.895,2,2v6h-2V23z" fill="none" stroke="currentColor"></path>
+                  </svg>
+                </div>
+              </div>
+              <div>
+                <p class="mb-2 font-bold tracking-wide">Features</p>
+                <ul class="space-y-2">
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">Unlimited deploys</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">Up to 10 Team Members</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">100 GB of starge</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">24/7 support</p>
+                  </li>
+                  <li class="flex items-center">
+                    <div class="mr-2">
+                      <svg class="w-4 h-4 text-purple-800" viewBox="0 0 24 24" stroke-linecap="round" stroke-width="2">
+                        <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
+                        <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
+                      </svg>
+                    </div>
+                    <p class="font-medium text-gray-800">Global CDN</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div>
+              <a
+                href="/"
+                class="inline-flex items-center justify-center w-full h-12 px-6 mb-4 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
+              >
+                Get started
+              </a>
+              <p class="text-sm text-gray-600">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    
+    <!-- pricing 5 end  -->
+
+
+    <!-- pricing 6 start -->
+    <section class="section_divider">
+        <div>Pricing 6</div>
+    </section>
+    <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">
+        <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+          <div>
+            <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
+              Brand new
+            </p>
+          </div>
+          <h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
+            <span class="relative inline-block">
+              <svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
+                <defs>
+                  <pattern id="bc9273ce-29bb-4565-959b-714607d4d027" x="0" y="0" width=".135" height=".30">
+                    <circle cx="1" cy="1" r=".7"></circle>
+                  </pattern>
+                </defs>
+                <rect fill="url(#bc9273ce-29bb-4565-959b-714607d4d027)" width="52" height="24"></rect>
+              </svg>
+              <span class="relative">Choose</span>
+            </span>
+            your way. Advance everyday.
+          </h2>
+          <p class="text-base text-gray-700 md:text-lg">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.
+          </p>
+        </div>
+        <div class="grid max-w-md gap-10 row-gap-8 lg:max-w-screen-lg sm:row-gap-10 lg:grid-cols-3 xl:max-w-screen-lg sm:mx-auto">
+          <div class="flex flex-col transition duration-300 bg-white rounded shadow-sm hover:shadow">
+            <div class="relative w-full h-48">
+              <img src="https://images.pexels.com/photos/3184305/pexels-photo-3184305.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260" class="object-cover w-full h-full rounded-t" alt="Plan" />
+            </div>
+            <div class="flex flex-col justify-between flex-grow p-8 border border-t-0 rounded-b">
+              <div>
+                <div class="text-lg font-semibold">Basic</div>
+                <p class="text-sm text-gray-900">
+                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque.
+                </p>
+                <div class="mt-1 mb-4 mr-1 text-4xl font-bold sm:text-5xl">$12</div>
+              </div>
+              <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-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
+              >
+                Buy Basic
+              </a>
+            </div>
+          </div>
+          <div class="flex flex-col transition duration-300 bg-white rounded shadow-sm hover:shadow">
+            <div class="relative w-full h-48">
+              <img src="https://images.pexels.com/photos/3183181/pexels-photo-3183181.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260" class="object-cover w-full h-full rounded-t" alt="Plan" />
+            </div>
+            <div class="flex flex-col justify-between flex-grow p-8 border border-t-0 rounded-b">
+              <div>
+                <div class="text-lg font-semibold">Advanced</div>
+                <p class="text-sm text-gray-900">
+                  A flower in my garden, a mystery in my panties. Heart attack never was so close.
+                </p>
+                <div class="mt-1 mb-4 mr-1 text-4xl font-bold sm:text-5xl">$38</div>
+              </div>
+              <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-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
+              >
+                Buy Advanced
+              </a>
+            </div>
+          </div>
+          <div class="flex flex-col transition duration-300 bg-white rounded shadow-sm hover:shadow">
+            <div class="relative w-full h-48">
+              <img src="https://images.pexels.com/photos/3182743/pexels-photo-3182743.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260" class="object-cover w-full h-full rounded-t" alt="Plan" />
+            </div>
+            <div class="flex flex-col justify-between flex-grow p-8 border border-t-0 rounded-b">
+              <div>
+                <div class="text-lg font-semibold">Pro</div>
+                <p class="text-sm text-gray-900">
+                  We never had the chance to. Maybe it was the eleven months he spent in the womb.
+                </p>
+                <div class="mt-1 mb-4 mr-1 text-4xl font-bold sm:text-5xl">$78</div>
+              </div>
+              <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-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
+              >
+                Buy Pro
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    
+    <!-- pricing 6 end -->
+
+    <!-- pricing 7 start -->
+    <section class="section_divider">
+        <dvi>Pricing 7</dvi>
+    </section>
+
+    <div class="font-sans text-base text-gray-900 bg-gray-200 border-box">
+        <div class="mb-16 sm:mx-auto sm:my-0 sm:max-w-screen-lg">
+            <div class="px-6 py-4 bg-gray-200 divide-y divide-gray-400 sm:px-16 sm:py-8">
+                <div class="flex flex-col mb-4 items-between sm:flex-row sm:justify-between sm:items-end">
+                    <h2 class="mt-2 mb-4 text-xl font-light leading-tight tracking-wide text-center text-gray-900 sm:mr-auto sm:text-left sm:text-2xl">
+                        Choose the amount of storage
+                        <br>that's right for you.
+                    </h2>
+
+                    <div class="flex items-end justify-center">
+                        <span class="inline-block mr-2 text-xs text-gray-700">Bill yearly</span>
+                        <label for="toggle" class="inline-flex items-center mt-3 cursor-pointer">
+                            <span class="relative">
+                              <span class="block w-10 h-5 bg-indigo-600 rounded-full shadow-inner "></span>
+                              <span class="absolute inset-y-0 left-0 block w-3 h-3 mt-1 ml-1 bg-white rounded-full shadow">
+                                <input id="toggle" type="checkbox" class="absolute w-0 h-0 opacity-0" />
+                              </span>
+                            </span>
+                          </label>
+                        <span class="inline-block ml-2 text-xs text-gray-700">Bill monthly</span>
+                    </div>
+                </div>
+
+                <div class="flex flex-col-reverse justify-between sm:flex-row">
+                    <div class="w-full mt-6 mr-6 sm:w-1/2">
+
+                        <div class="flex items-center mb-6 text-gray-600 sm:hidden">
+                            <span class="flex-grow h-px bg-gray-400"></span>
+                             <span class="w-24 ml-1 -mr-1 text-sm">Pay with card</span>
+                            <span class="flex-grow h-px bg-gray-400"></span>
+                        </div>
+
+                        <form method="post" action="#">
+                            <input type="text" name="name" placeholder="Full name" class="w-full px-4 py-3 mb-5 font-normal text-gray-600 rounded text-md focus:outline-none" required>
+                            <input type="email" name="email" placeholder="Email" class="w-full px-4 py-3 mb-5 font-normal text-gray-600 rounded text-md focus:outline-none" required>
+                            <input type="password" name="password" placeholder="Password" class="w-full px-4 py-3 mb-5 font-normal text-gray-600 rounded text-md focus:outline-none" required>
+
+                            <input type="text" name="name" placeholder="Card number" maxlength="16" class="w-full px-4 py-3 mb-5 mr-3 font-normal text-gray-600 rounded text-md sm:w-7/12 focus:outline-none" required>
+                            <input type="text" name="name" placeholder="MM / YY" class="w-1/3 px-4 py-3 mb-5 font-normal text-gray-600 rounded text-md sm:w-24 focus:outline-none" required>
+                            <input type="text" name="name" maxlength="3" placeholder="CVV" class="w-1/4 px-4 py-3 mb-5 font-normal text-gray-600 rounded text-md sm:w-16 focus:outline-none" required>
+
+                            <button class="w-full mt-3 focus:outline-none">
+                               <span class="block px-4 py-3 text-white uppercase bg-indigo-600 rounded hover:bg-indigo-700">Create account</span>
+                            </button>
+                        </form>
+
+                    </div>
+                    <div class="w-full mt-6 mb-6 sm:w-1/2">
+                        <a href="#" class="block w-full px-4 py-3 mb-4 bg-white border-2 border-indigo-500 border-opacity-50 border-solid rounded-lg">
+                            <div class="flex justify-between mb-2">
+                                <span class="text-sm font-semibold text-gray-600 uppercase">Essential</span>
+                                <svg class="w-6 h-6 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                    <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"></path>
+                                </svg>
+                            </div>
+
+                            <div class="flex items-baseline justify-between">
+                                <h2>
+                                    <span class="mr-1 text-3xl font-semibold text-gray-700">200</span>
+                                    <span class="font-semibold text-gray-700">GB</span>
+                                    <span class="font-light text-gray-700">of storage</span>
+                                </h2>
+
+                                <span class="inline-block mr-2 font-semibold text-gray-700">$10 / mo</span>
+                            </div>
+                        </a>
+
+                        <a href="#" class="block w-full px-4 py-3 mb-4 bg-white rounded-lg">
+                            <div class="flex justify-between mb-2">
+                                <span class="text-sm font-semibold text-gray-600 uppercase">Pro</span>
+                                <!-- <svg class="w-6 h-6 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                    <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"></path>
+                                </svg> -->
+                            </div>
+
+                            <div class="flex items-baseline justify-between">
+                                <h2>
+                                    <span class="mr-1 text-3xl font-semibold text-gray-700">1</span>
+                                    <span class="font-semibold text-gray-700">TB</span>
+                                    <span class="font-light text-gray-700">of storage</span>
+                                </h2>
+
+                                <span class="inline-block mr-2 font-semibold text-gray-700">$20 / mo</span>
+                            </div>
+                        </a>
+
+                        <a href="#" class="block w-full px-4 py-3 bg-white rounded-lg">
+                            <div class="flex justify-between mb-2">
+                                <span class="text-sm font-semibold text-gray-600 uppercase">Premium</span>
+                                <!-- <svg class="w-6 h-6 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                    <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"></path>
+                                </svg> -->
+                            </div>
+
+                            <div class="flex items-baseline justify-between">
+                                <h2>
+                                    <span class="mr-1 text-3xl font-semibold text-gray-700">2</span>
+                                    <span class="font-semibold text-gray-700">TB</span>
+                                    <span class="font-light text-gray-700">of storage</span>
+                                </h2>
+
+                                <span class="inline-block mr-2 font-semibold text-gray-700">$40 / mo</span>
+                            </div>
+                        </a>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    
+    <!-- pricing 7 end -->
+
+    <!-- pricing 8 start -->
+    <section class="section_divider">
+        <div>Pricing 8</div>
+    </section>
+    <section x-data="{ selected: 'monthly' }">
+        <div class="pb-64 bg-gray-100">
+          <div class="  max-w-7xl px-4 pt-20 mx-auto text-center sm:text-left">
+            <h1 class="mb-3 text-4xl font-bold leading-tight text-gray-900 md:text-5xl md:font-extrabold">Plans & Pricing</h1>
+            <p class="mb-10 text-lg text-gray-600 md:text-xl">5 minute installation · Try Team plan features for 14 days · No credit card required</p>
+            <div class="w-64 mx-auto -mb-2 sm:mx-0">
+              <div class="flex justify-between p-2 text-center border border-purple-200 rounded-full">
+                <button  class="w-full rounded-full btn btn-primary text-purple-800 focus:text-white active:bg-purple-800 focus:bg-purple-800 text-md font-semibold" @click="selected = 'monthly'" :class="{ 'btn-primary': selected === 'monthly', 'btn-link': selected === 'yearly' }">Bill Monthly</button>
+                <button class="w-full rounded-full btn btn-link text-purple-800  focus:text-white active:bg-purple-800 focus:bg-purple-800 p-2" @click="selected = 'yearly'" :class="{ 'btn-link': selected === 'monthly', 'btn-primary': selected === 'yearly' }">Bill Yearly</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="max-w-7xl pb-20 mx-auto -mt-48">
+          <div class="grid grid-cols-1 gap-16 lg:grid-cols-3 sm:gap-8">
+            <div class="border-0 rounded-none shadow-none card sm:shadow-md sm:rounded-lg">
+              <div class="flex flex-col justify-between p-6 border-b border-gray-200">
+                <p class="mb-1 text-lg font-semibold text-gray-700">Free</p>
+                <p class="pb-0 my-2 font-mono text-4xl font-extrabold text-gray-900 md:pb-2">$0</p>
+                <a href="#" class="w-full mt-6 btn btn-primary btn-lg md:mt-16">Get Started</a>
+              </div>
+              <div class="flex flex-col flex-grow p-6 space-y-3">
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Email APIs, SMTP Relay, and Webhooks</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Suppression Management</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Email Tracking and Analytics</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">99.99% Guaranteed Uptime SLA</p>
+                </div>
+              </div>
+            </div>
+            <div class="border-0 rounded-none shadow-none card sm:shadow-md sm:rounded-lg">
+              <div class="flex flex-col justify-between p-6 border-b border-gray-200">
+                <div>
+                  <p class="mb-1 text-lg font-semibold text-gray-700">Team</p>
+                  <p class="my-2 font-mono text-4xl font-extrabold text-gray-900" x-text="selected === 'monthly' ? '$9' : '$89'">$9</p>
+                  <p class="text-base text-gray-600" x-text="selected === 'monthly' ? 'user / month' : 'user / year'">user / month</p>
+                  <p class="text-base text-gray-600" x-text="selected === 'monthly' ? 'billed monthly' : 'billed yearly'">billed monthly</p>
+                </div>
+                <a href="#" class="w-full mt-6 btn btn-light btn-lg">Try for free</a>
+              </div>
+              <div class="flex flex-col flex-grow p-6 space-y-3">
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Email APIs, SMTP Relay, and Webhooks</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Suppression Management</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Email Tracking and Analytics</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">99.99% Guaranteed Uptime SLA</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">5 Days of Log Retention</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Limited 24/7 Ticket Support</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">1 Dedicated IP (Foundation 100k and up)</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">1,000 Email Address Validations</p>
+                </div>
+              </div>
+            </div>
+            <div class="border-0 rounded-none shadow-none card sm:shadow-md sm:rounded-lg">
+              <div class="flex flex-col justify-between p-6 border-b border-gray-200">
+                <div>
+                  <p class="mb-1 text-lg font-semibold text-gray-700">Company</p>
+                  <p class="my-2 font-mono text-4xl font-extrabold text-gray-900" x-text="selected === 'monthly' ? '$21' : '$189'">$21</p>
+                  <p class="text-base text-gray-600" x-text="selected === 'monthly' ? 'user / month' : 'user / year'">user / month</p>
+                  <p class="text-base text-gray-600" x-text="selected === 'monthly' ? 'billed monthly' : 'billed yearly'">billed monthly</p>
+                </div>
+                <a href="#" class="w-full mt-6 btn btn-light btn-lg">Try for free</a>
+              </div>
+              <div class="flex flex-col flex-grow p-6 space-y-3">
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Email APIs, SMTP Relay, and Webhooks</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Suppression Management</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Email Tracking and Analytics</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">99.99% Guaranteed Uptime SLA</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">5 Days of Log Retention</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Limited 24/7 Ticket Support</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">1 Dedicated IP (Foundation 100k and up)</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">1,000 Email Address Validations</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Instant Chat Support</p>
+                </div>
+                <div class="flex items-start">
+                  <svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
+                  <p class="text-gray-700">Custom Features</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+    
+    <!-- pricing 8 end -->
+
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/testimonial/11_testimonial.html b/public/componets/testimonial/11_testimonial.html
new file mode 100644
index 0000000..1dd196d
--- /dev/null
+++ b/public/componets/testimonial/11_testimonial.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script>
+    <title>Testimonial 11</title>
+</head>
+<body>
+    
+    
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+    
+
+    <!-- testimonial 11 start -->
+    <section class="section_divider">
+        <div>Testimonail 11</div>
+    </section>
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+    
+    <section class="bg-white">
+      <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
+        <h2 class="text-4xl font-bold tracking-tight text-center sm:text-5xl">
+          Read trusted reviews from our customers
+        </h2>
+    
+        <div class="mt-12 swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <blockquote class="p-8 bg-gray-100 rounded-lg">
+                <div class="flex items-center">
+                  <img
+                    src="https://www.hyperui.dev/photos/man-4.jpeg"
+                    alt=""
+                    class="object-cover w-16 h-16 rounded-full"
+                  />
+    
+                  <div class="ml-4">
+                    <div class="flex space-x-0.5 justify-center text-green-500">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                    </div>
+    
+                    <p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
+                  </div>
+                </div>
+    
+                <p class="mt-4 text-gray-500">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
+                  voluptatem alias ut provident sapiente repellendus.
+                </p>
+              </blockquote>
+            </div>
+    
+            <div class="swiper-slide">
+              <blockquote class="p-8 bg-gray-100 rounded-lg">
+                <div class="flex items-center">
+                  <img
+                    src="https://www.hyperui.dev/photos/man-4.jpeg"
+                    alt=""
+                    class="object-cover w-16 h-16 rounded-full"
+                  />
+    
+                  <div class="ml-4">
+                    <div class="flex space-x-0.5 justify-center text-green-500">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                    </div>
+    
+                    <p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
+                  </div>
+                </div>
+    
+                <p class="mt-4 text-gray-500">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
+                  voluptatem alias ut provident sapiente repellendus.
+                </p>
+              </blockquote>
+            </div>
+    
+            <div class="swiper-slide">
+              <blockquote class="p-8 bg-gray-100 rounded-lg">
+                <div class="flex items-center">
+                  <img
+                    src="https://www.hyperui.dev/photos/man-4.jpeg"
+                    alt=""
+                    class="object-cover w-16 h-16 rounded-full"
+                  />
+    
+                  <div class="ml-4">
+                    <div class="flex space-x-0.5 justify-center text-green-500">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                    </div>
+    
+                    <p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
+                  </div>
+                </div>
+    
+                <p class="mt-4 text-gray-500">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
+                  voluptatem alias ut provident sapiente repellendus.
+                </p>
+              </blockquote>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <script>
+      const swiper = new Swiper('.swiper-container', {
+        loop: true,
+        slidesPerView: 1,
+        spaceBetween: 32,
+        centeredSlides: true,
+        autoplay: {
+          delay: 8000,
+        },
+        breakpoints: {
+          640: {
+            slidesPerView: 1.5,
+          },
+          1024: {
+            slidesPerView: 3,
+          },
+        },
+      })
+    </script>
+    <!-- testimonial 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');
+
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+</script>
+<!-- end of script section -->
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/testimonial/17_testimonial.html b/public/componets/testimonial/17_testimonial.html
new file mode 100644
index 0000000..965ea18
--- /dev/null
+++ b/public/componets/testimonial/17_testimonial.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Testimonial 1</title>
+</head>
+<body>
+    
+    
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+    
+<!-- testimonail 17 start  -->
+<section class="section_divider">
+    <div>Testimonial 17</div>
+</section>
+<section class="bg-indigo-100 dark:bg-gray-800 ">
+    <div class="w-full h-screen">
+      <div class="flex flex-col lg:grid lg:gap-4 2xl:gap-6 lg:grid-cols-4 2xl:row-span-2 2xl:pb-8 ml-2 pt-4 px-6">
+        <!-- Beginning of the component about Daniel Clifford -->
+        <div class="bg-indigo-600 lg:order-1 lg:row-span-1 2xl:row-span-1 lg:col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0">
+          <div class="mx-6 my-8 2xl:mx-10">
+            <img class="w-8 md:w-9 lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 ml-1 lg:ml-3 2xl:ml-0 md:-mt-1 2xl:-mt-4" src="https://images.pexels.com/photos/3775534/pexels-photo-3775534.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-20 2xl:mx-8">Daniel Clifford</h1>
+            <h2 class="text-white text-opacity-50 text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 2xl:my-2 2xl:mx-8">Verified Graduate</h2>
+          </div>
+          <div class="-mt-6 relative">
+            <p class="text-white text-xl 2xl:text-4xl font-bold px-7 lg:px-9 2xl:pt-6 2xl:mx-2">I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.</p>
+            <br />
+            <p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-7 lg:px-9 mb-3 2xl:pb-8 2xl:mx-2">“ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Daniel Clifford -->
+
+        <!-- Beginning of the component about Jonathan Walters -->
+        <div class="bg-gray-900 lg:order-2 lg:row-span-1 2xl:row-span-1 lg:col-span-1 rounded-lg shadow-xl pb-4 mb-5 lg:mb-0">
+          <div class="mx-8 2xl:mx-10 my-10">
+            <img class="w-8 md:w-9 2xl:w-20 h-8 md:h-9 2xl:h-20 rounded-full border-2 -ml-1 -mt-2 lg:-mt-4" src="https://images.pexels.com/photos/634021/pexels-photo-634021.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 2xl:pl-24 -mt-8 md:-mt-10 2xl:-mt-16">Jonathan Walters</h1>
+            <h2 class="text-white text-xs md:text-base 2xl:text-2xl text-opacity-50 pl-11 md:pl-12 2xl:pl-24">Verified Graduate</h2>
+          </div>
+          <div class="-mt-8 mx-1 lg:mx-2">
+            <p class="text-white text-lg lg:text-xl 2xl:text-4xl font-semibold pt-1 px-6 2xl:px-8 lg:pl-5 lg:pr-8">The team was very supportive and kept me motivated</p>
+            <br />
+            <p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl pl-6 lg:pl-5 pr-4 -mt-1 lg:mt-6 2xl:mt-2 2xl:px-8">“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Jonathan Walters -->
+
+        <!-- Beginning of the component about Jeanette Harmon -->
+        <div class="bg-primary-color-white lg:order-3 lg:row-span-2 2xl:row-span-1 lg:col-span-1 rounded-lg shadow-xl mb-5 lg:mb-0 2xl:mb-8">
+          <div class="mx-8 my-10 lg:my-8">
+            <img class="w-8 md:w-9 lg:w-11 2xl:w-20 h-8 md:h-9 lg:h-11 2xl:h-20 rounded-full border-2 -mt-3 -ml-1 lg:-ml-0" src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="primary-color-blackish-blue text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 lg:pl-14 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-16">Jeanette Harmon</h1>
+            <h2 class="primary-color-blackish-blue-opacity text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 lg:pl-14 2xl:pl-24">Verified Graduate</h2>
+          </div>
+          <div class="-mt-4 ml-5 mr-11">
+            <p class="primary-color-blackish-blue text-xl 2xl:text-4xl font-bold px-2 lg:px-3 -mt-6 lg:-mt-5 2xl:mt-12 2xl:pb-6">An overall wonderful and rewarding experience</p>
+            <br />
+            <p class="primary-color-blackish-blue-opacity font-medium md:text-sm 2xl:text-3xl pl-2 lg:pl-3 lg:pr-4 mb-6 2xl:pt-2 -mt-3">“ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love. ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Jeanette Harmon -->
+
+        <!-- Beginning of the component about Patrick Abrams -->
+        <div class="bg-purple-800 lg:order-4 lg:row-span-2 2xl:row-span-1 col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0 2xl:mb-8 lg:pb-14 2xl:pb-20">
+          <div class="mx-8 my-8">
+            <img class="w-8 md:w-9 lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 lg:-mt-3" src="https://images.pexels.com/photos/3778603/pexels-photo-3778603.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-12 md:pl-14 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-16">Patrick Abrams</h1>
+            <h2 class="text-white text-xs md:text-base 2xl:text-2xl text-opacity-50 pl-12 md:pl-14 2xl:pl-24">Verified Graduate</h2>
+          </div>
+          <div class="px-3 -mt-3 mb-5 lg:mb-0">
+            <p class="text-white text-lg 2xl:text-4xl font-semibold px-4 -mt-3 lg:-mt-6 2xl:mt-8">Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.</p>
+            <br />
+            <p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-4 mt-1 lg:-mt-3 2xl:mt-6">“ The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest. You will get the personal attention you need from an incredible community of lgart and amazing people. ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Patrick Abrams -->
+
+        <!-- Beginning of the component about Kira Whittle -->
+        <div class="bg-white lg:order-2 lg:row-span-4 lg:col-span-1 rounded-lg shadow-xl mb-5 lg:pb-4 ">
+          <div class="mx-8 my-8 lg:pl-1">
+            <img class="w-8 md:w-9 lg:w-12 2xl:w-20 h-8 md:h-9 lg:h-12 2xl:h-20 rounded-full border-2 lg:-mt-4 -ml-1 lg:-ml-4" src="https://images.pexels.com/photos/3762804/pexels-photo-3762804.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="primary-color-blackish-blue text-xs md:text-base 2xl:text-2xl pl-10 md:pl-12 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-12 2xl:-mt-16">Kira Whittle</h1>
+            <h2 class="primary-color-blackish-blue-opacity text-xs md:text-base 2xl:text-sm pl-10 md:pl-12 2xl:pl-24">Verified Graduate</h2>
+          </div>
+          <div class="px-3 lg:px-5 lg:-mt-4 mb-5 lg:mb-0">
+            <p class="primary-color-blackish-blue text-xl 2xl:text-4xl font-semibold px-4 lg:px-0 -mt-2 lg:-mt-0">Such a life-changing experience. Highly recommended!</p>
+            <br />
+            <p class="primary-color-blackish-blue-opacity font-medium md:text-sm 2xl:text-2xl px-4 lg:px-0 2xl:px-4 lg:pr-3 lg:pb-3 mt-2 lg:-mt-1 2xl:mt-2 2xl:pb-64">“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from professionals who can help me learn programming step by step. I was encouraged to enroll by a former student of theirs who can only say wonderful things about the program. The entire curriculum and staff did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial could ever have. In fact, I’ve often referred to it during interviews as an example of my developent experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 100% recommend! ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Kira Whittle -->
+      </div>
+    </div>
+</section>
+
+<!-- testimonail 17 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');
+
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+</script>
+<!-- end of script section -->
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/testimonial/1_testimonial.html b/public/componets/testimonial/1_testimonial.html
new file mode 100644
index 0000000..9cc2567
--- /dev/null
+++ b/public/componets/testimonial/1_testimonial.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Testimonial 1</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');
+
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+</script>
+<!-- end of script section -->
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/testimonial/testimonial.html b/public/componets/testimonial/testimonial.html
new file mode 100644
index 0000000..2866229
--- /dev/null
+++ b/public/componets/testimonial/testimonial.html
@@ -0,0 +1,1986 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Testimonial </title>
+</head>
+<body>
+    
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+    
+    
+    <!-- testimonial 1 start -->
+        
+    <section class="section_divider">
+        <div>Testimonial 1</div>
+    </section>
+    <section class="text-gray-600 body-font">
+        <div class="container px-5 py-24 mx-auto">
+          <h1 class="text-3xl font-medium title-font text-gray-900 mb-12 text-center">Testimonials</h1>
+          <div class="flex flex-wrap -m-4">
+            <div class="p-4 md:w-1/2 w-full">
+              <div class="h-full bg-gray-100 p-8 rounded">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="block w-5 h-5 text-gray-400 mb-4" viewBox="0 0 975.036 975.036">
+                  <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
+                </svg>
+                <p class="leading-relaxed mb-6">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
+                <a class="inline-flex items-center">
+                  <img alt="testimonial" src="https://dummyimage.com/106x106" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
+                  <span class="flex-grow flex flex-col pl-4">
+                    <span class="title-font font-medium text-gray-900">Holden Caulfield</span>
+                    <span class="text-gray-500 text-sm">UI DEVELOPER</span>
+                  </span>
+                </a>
+              </div>
+            </div>
+            <div class="p-4 md:w-1/2 w-full">
+              <div class="h-full bg-gray-100 p-8 rounded">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="block w-5 h-5 text-gray-400 mb-4" viewBox="0 0 975.036 975.036">
+                  <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
+                </svg>
+                <p class="leading-relaxed mb-6">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
+                <a class="inline-flex items-center">
+                  <img alt="testimonial" src="https://dummyimage.com/107x107" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
+                  <span class="flex-grow flex flex-col pl-4">
+                    <span class="title-font font-medium text-gray-900">Alper Kamu</span>
+                    <span class="text-gray-500 text-sm">DESIGNER</span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    <!-- testimonial 1 end -->
+
+      <!-- testimonial 2 start  -->
+      <section class="section_divider">
+          <div>Testimonial 2</div>
+      </section>
+      
+      <section class="text-gray-600 body-font">
+        <div class="container px-5 py-24 mx-auto">
+          <div class="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="inline-block w-8 h-8 text-gray-400 mb-8" viewBox="0 0 975.036 975.036">
+              <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
+            </svg>
+            <p class="leading-relaxed text-lg">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware. Man bun next level coloring book skateboard four loko knausgaard. Kitsch keffiyeh master cleanse direct trade indigo juice before they sold out gentrify plaid gastropub normcore XOXO 90's pickled cindigo jean shorts. Slow-carb next level shoindigoitch ethical authentic, yr scenester sriracha forage franzen organic drinking vinegar.</p>
+            <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-8 mb-6"></span>
+            <h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
+            <p class="text-gray-500">Senior Product Designer</p>
+          </div>
+        </div>
+      </section>
+      <!-- testimonial 2 end -->
+
+
+      <!-- testimonial 3 start  -->
+      <section class="section_divider">
+          <div>Testimonial 3</div>
+      </section>
+      <section class="text-gray-600 body-font">
+        <div class="container px-5 py-24 mx-auto">
+          <div class="flex flex-wrap -m-4">
+            <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
+              <div class="h-full text-center">
+                <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/302x302">
+                <p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+                <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
+                <h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
+                <p class="text-gray-500">Senior Product Designer</p>
+              </div>
+            </div>
+            <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
+              <div class="h-full text-center">
+                <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/300x300">
+                <p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+                <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
+                <h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
+                <p class="text-gray-500">UI Develeoper</p>
+              </div>
+            </div>
+            <div class="lg:w-1/3 lg:mb-0 p-4">
+              <div class="h-full text-center">
+                <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/305x305">
+                <p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+                <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
+                <h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
+                <p class="text-gray-500">CTO</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <!-- testimonial 3 end -->
+
+      <!-- testimonial 4 start -->
+      <section class="section_divider">
+          <div>Testimonial 4</div>
+      </section>
+      <section class="flex items-center justify-center py-20 bg-white min-w-screen">
+        <div class="px-16 bg-white">
+          <div class="container flex flex-col items-start mx-auto lg:items-center">
+            <p class="relative flex items-start justify-start w-full text-lg font-bold tracking-wider text-purple-500 uppercase lg:justify-center lg:items-center">Don't just take our word for it</p>
+      
+            <h2 class="relative flex items-start justify-start w-full max-w-3xl text-5xl font-bold lg:justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="absolute right-0 hidden w-12 h-12 -mt-2 -mr-16 text-gray-200 lg:inline-block" viewBox="0 0 975.036 975.036">
+                <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
+              </svg>
+              See what others are saying
+            </h2>
+            <div class="block w-full h-0.5 max-w-lg mt-6 bg-purple-100 rounded-full"></div>
+      
+            <div class="items-center justify-center w-full mt-12 mb-4 lg:flex">
+              <div class="flex flex-col items-start justify-start w-full h-auto mb-12 lg:w-1/3 lg:mb-0">
+                <div class="flex items-center justify-center">
+                  <div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
+                    <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1700&amp;q=80" class="object-cover w-full h-full">
+                  </div>
+                  <div class="flex flex-col items-start justify-center">
+                    <h4 class="font-bold text-gray-800">John Doe</h4>
+                    <p class="text-gray-600">CEO of Something</p>
+                  </div>
+                </div>
+                <blockquote class="mt-8 text-lg text-gray-500">
+                  "This is a no-brainer if you want to take your business to the next level. If you are looking for the ultimate toolset, this is it!"
+                </blockquote>
+              </div>
+              <div class="flex flex-col items-start justify-start w-full h-auto px-0 mx-0 mb-12 border-l border-r border-transparent lg:w-1/3 lg:mb-0 lg:px-8 lg:mx-8 lg:border-gray-200">
+                <div class="flex items-center justify-center">
+                  <div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
+                    <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2547&amp;q=80" class="object-cover w-full h-full">
+                  </div>
+                  <div class="flex flex-col items-start justify-center">
+                    <h4 class="font-bold text-gray-800">Jane Doe</h4>
+                    <p class="text-gray-600">CTO of Business</p>
+                  </div>
+                </div>
+                <blockquote class="mt-8 text-lg text-gray-500">"Thanks for creating this service. My life is so much easier. Thanks for making such a great product."</blockquote>
+              </div>
+              <div class="flex flex-col items-start justify-start w-full h-auto lg:w-1/3">
+                <div class="flex items-center justify-center">
+                  <div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
+                    <img src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1256&amp;q=80" class="object-cover w-full h-full">
+                  </div>
+                  <div class="flex flex-col items-start justify-center">
+                    <h4 class="font-bold text-gray-800">John Smith</h4>
+                    <p class="text-gray-600">Creator of Stuff</p>
+                  </div>
+                </div>
+                <blockquote class="mt-8 text-lg text-gray-500">"Packed with awesome content and exactly what I was looking for. I would highly recommend this to anyone."</blockquote>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <!-- testimonial 4 end -->
+
+
+      <!-- testimonial 5 start -->
+      <section class="section_divider">
+          <dvi>Testimonial 5</dvi>
+      </section>
+
+        <section class="flex items-center justify-center py-16 bg-gray-100 min-w-screen">
+            <div class="max-w-6xl px-12 mx-auto bg-gray-100 md:px-16 xl:px-10">
+                <div class="flex flex-col items-center lg:flex-row">
+                <div class="flex flex-col items-start justify-center w-full h-full pr-8 mb-10 lg:mb-0 lg:w-1/2">
+                    <p class="mb-2 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love our product</p>
+                    <h2 class="text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">Testimonials</h2>
+                    <p class="my-6 text-lg text-gray-600">Don't just take our word for it, read from our extensive list of case studies and customer testimonials.</p>
+                    <a href="#_" class="flex items-center justify-center px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10">View Case Studies</a>
+                </div>
+                <div class="w-full lg:w-1/2">
+                    <blockquote class="flex items-center justify-between w-full col-span-1 p-6 bg-white rounded-lg shadow">
+                    <div class="flex flex-col pr-8">
+                        <div class="relative pl-12">
+                        <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                            <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
+                        </svg>
+                        <p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">Awesome product! And the customer service is exceptionally well.</p>
+                        </div>
+
+                        <h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
+                        Jane Cooper
+                        <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
+                        </h3>
+                    </div>
+                    <img class="flex-shrink-0 w-20 h-20 bg-gray-300 rounded-full xl:w-24 xl:h-24" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
+                    </blockquote>
+                    <blockquote class="flex items-center justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
+                    <div class="flex flex-col pr-10">
+                        <div class="relative pl-12">
+                        <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                            <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
+                        </svg>
+                        <p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">I can't express enough, how amazing this service has been for my company.</p>
+                        </div>
+                        <h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
+                        John Doe
+                        <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
+                        </h3>
+                        <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                    </div>
+                    <img class="flex-shrink-0 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;aauto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
+                    </blockquote>
+                    <blockquote class="flex items-center justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
+                    <div class="flex flex-col pr-10">
+                        <div class="relative pl-12">
+                        <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                            <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
+                        </svg>
+                        <p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">I can't express enough, how amazing this service has been for my company.</p>
+                        </div>
+
+                        <h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
+                        John Smith
+                        <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
+                        </h3>
+                        <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                    </div>
+                    <img class="flex-shrink-0 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rrb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;aauto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
+                    </blockquote>
+                </div>
+                </div>
+            </div>
+        </section>
+      <!-- testimonial 5 end -->
+
+      <!-- testimonial 6 start  -->
+      <section class="section_divider">
+          <div>Testimonial 6</div>
+      </section>
+      <section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg')">
+        <div class="container px-4 mx-auto">
+          <div class="max-w-lg mx-auto mb-12 text-center">
+            <img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
+            <h2 class="my-2 text-3xl md:text-4xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
+            <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
+          </div>
+          <div class="flex flex-wrap max-w-5xl mx-auto mb-6">
+            <div class="w-full md:w-1/2 px-3 mb-6">
+              <div class="p-8 bg-white shadow rounded">
+                <div class="flex items-center mb-4">
+                  <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
+                  <div class="pl-4">
+                    <p class="text-xl">John Bailey</p>
+                    <p class="text-blue-600">CEO</p>
+                  </div>
+                </div>
+                <p class="leading-loose text-blueGray-400">
+                  Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
+                </p>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 px-3 mb-6">
+              <div class="p-8 bg-white shadow rounded">
+                <div class="flex items-center mb-4">
+                  <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
+                  <div class="pl-4">
+                    <p class="text-xl">Julie Bailey</p>
+                    <p class="text-blue-600">Head of Development</p>
+                  </div>
+                </div>
+                <p class="leading-loose text-blueGray-400">
+                  Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
+                </p>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 px-3 mb-6">
+              <div class="p-8 bg-white shadow rounded">
+                <div class="flex items-center mb-4">
+                  <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
+                  <div class="pl-4">
+                    <p class="text-xl">Julie Bailey</p>
+                    <p class="text-blue-600">Head of Operations</p>
+                  </div>
+                </div>
+                <p class="leading-loose text-blueGray-400">
+                  Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
+                </p>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 px-3 mb-6">
+              <div class="p-8 bg-white shadow rounded">
+                <div class="flex items-center mb-4">
+                  <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
+                  <div class="pl-4">
+                    <p class="text-xl">Tom Brown</p>
+                    <p class="text-blue-600">Head of Development</p>
+                  </div>
+                </div>
+                <p class="leading-loose text-blueGray-400">
+                  Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
+                </p>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 px-3 mb-6">
+              <div class="p-8 bg-white shadow rounded">
+                <div class="flex items-center mb-4">
+                  <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
+                  <div class="pl-4">
+                    <p class="text-xl">Tom Brown</p>
+                    <p class="text-blue-600">Head of Development</p>
+                  </div>
+                </div>
+                <p class="leading-loose text-blueGray-400">
+                  Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
+                </p>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 px-3 mb-6">
+              <div class="p-8 bg-white shadow rounded">
+                <div class="flex items-center mb-4">
+                  <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
+                  <div class="pl-4">
+                    <p class="text-xl">Julie Bailey</p>
+                    <p class="text-blue-600">Head of Development</p>
+                  </div>
+                </div>
+                <p class="leading-loose text-blueGray-400">
+                  Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
+                </p>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 px-3 mb-6">
+              <div class="p-8 bg-white shadow rounded">
+                <div class="flex items-center mb-4">
+                  <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
+                  <div class="pl-4">
+                    <p class="text-xl">Tom Brown</p>
+                    <p class="text-blue-600">Head of Development</p>
+                  </div>
+                </div>
+                <p class="leading-loose text-blueGray-400">
+                  Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
+                </p>
+              </div>
+            </div>
+            <div class="w-full md:w-1/2 px-3 mb-6">
+              <div class="p-8 bg-white shadow rounded">
+                <div class="flex items-center mb-4">
+                  <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
+                  <div class="pl-4">
+                    <p class="text-xl">Julie Bailey</p>
+                    <p class="text-blue-600">Head of Operations</p>
+                  </div>
+                </div>
+                <p class="leading-loose text-blueGray-400">
+                  Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="text-center"><a class="inline-block py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Show more Testimonials</a></div>
+        </div>
+      </section>
+      
+      <!-- testimonial 6 end -->
+
+
+      <!-- testimonial 7 start -->
+      <section class="section_divider">
+          <div>Testimonial 7</div>
+      </section>
+      <div class="flex items-center justify-center min-h-screen bg-white min-w-screen">
+        <div class="px-10 bg-white">
+            <div class="container flex flex-col items-center justify-center py-12 mx-auto">
+                <p class="text-lg font-medium tracking-wider text-teal-500 uppercase">Testimonials</p>
+                <h2 class="max-w-3xl pr-12 text-5xl font-bold text-center">People Like Us 🥰</h2>
+                <div class="items-center justify-center w-full mt-16 mb-4 lg:flex">
+                    <div class="flex flex-col items-start justify-start w-full h-auto mb-12 lg:w-1/3 lg:mb-0">
+                        <div class="flex items-center justify-center">
+                            <div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
+                                <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
+                                    class="object-cover w-full h-full">
+                            </div>
+                            <div class="flex flex-col items-start justify-center">
+                                <h4 class="font-bold text-gray-800">John Doe</h4>
+                                <p class="text-gray-600">CEO of Something</p>
+                            </div>
+                        </div>
+                        <blockquote class="mt-8 text-lg text-gray-500">"This is some rad shit! Pop lockin, Boom shockin
+                            radical. I
+                            immediately wet my pants after trying this service."</blockquote>
+                    </div>
+                    <div
+                        class="flex flex-col items-start justify-start w-full h-auto px-0 mx-0 mb-12 border-l border-r border-transparent lg:w-1/3 lg:mb-0 lg:px-8 lg:mx-8 lg:border-gray-200">
+                        <div class="flex items-center justify-center">
+                            <div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
+                                <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2547&q=80"
+                                    class="object-cover w-full h-full">
+                            </div>
+                            <div class="flex flex-col items-start justify-center">
+                                <h4 class="font-bold text-gray-800">Jane Doe</h4>
+                                <p class="text-gray-600">CTO of Business</p>
+                            </div>
+                        </div>
+                        <blockquote class="mt-8 text-lg text-gray-500">"Thanks for creating this service. My life is so much
+                            easier.
+                            Thanks for making such a great product."</blockquote>
+                    </div>
+                    <div class="flex flex-col items-start justify-start w-full h-auto lg:w-1/3">
+                        <div class="flex items-center justify-center">
+                            <div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
+                                <img src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1256&q=80"
+                                    class="object-cover w-full h-full">
+                            </div>
+                            <div class="flex flex-col items-start justify-center">
+                                <h4 class="font-bold text-gray-800">John Smith</h4>
+                                <p class="text-gray-600">Creator of Stuff</p>
+                            </div>
+                        </div>
+                        <blockquote class="mt-8 text-lg text-gray-500">"Packed with awesome content and exactly what I was
+                            looking
+                            for. I would highly recommend this to anyone."</blockquote>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+      <!-- testimonial 7 end -->
+
+      <!-- testimonial 8 start  -->
+      <section class="section_divider">
+          <div>Testimonial 8</div>
+      </section>
+      <div class="bg-gray-100">
+        <div class="max-w-6xl px-6 py-8 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 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 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 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 uppercase">
+                                        Irene Sims
+                                    </div>
+                                    <div class="text-gray-700">VP of Sales, SomeCompany</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-full px-6 md:w-1/2 md:px-12">
+                    <h2 class="text-2xl font-bold text-gray-900">Crafted with Awesomeness</h2>
+                    <div class="flex mt-10">
+                        <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">
+                                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">
+                        <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">
+                                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">
+                        <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">
+                                Every element and component is customizable to fit the needs of your application.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+      <!-- testimonial 8 end  -->
+
+      <!-- testimonial 9 start  -->
+      <section class="section_divider">
+          <div>Testimonial 9</div>
+      </section>
+        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+        <style>
+        .swiper-container {
+            overflow: hidden;
+        }
+        </style>
+
+        <section class="bg-gray-100">
+        <div class="px-4 py-16 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 max-w-[1340px]">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
+            <div class="max-w-xl space-y-8">
+                <h2 class="text-4xl font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
+
+                <p class="max-w-lg text-lg text-gray-500">
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
+                fugit a culpa sunt id!
+                </p>
+
+                <div class="hidden lg:flex">
+                <button
+                    class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
+                    aria-label="Previous slide"
+                >
+                    <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5 transform -rotate-180"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
+
+                <button
+                    class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
+                    aria-label="Next slide"
+                >
+                    <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
+                </div>
+            </div>
+
+            <div class="-mx-6 lg:col-span-2 lg:mx-0">
+                <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                    <blockquote class="flex flex-col justify-between h-full p-12 bg-white">
+                        <div>
+                        <div class="flex space-x-0.5 text-green-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                        </div>
+
+                        <div class="mt-4">
+                            <p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
+
+                            <p class="mt-4 text-lg text-gray-600">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam cumque recusandae dolorum porro,
+                            quasi sunt necessitatibus dolorem ab laudantium vel.
+                            </p>
+                        </div>
+                        </div>
+
+                        <footer class="mt-8 text-gray-500">Eddie Murphy</footer>
+                    </blockquote>
+                    </div>
+
+                    <div class="swiper-slide">
+                    <blockquote class="flex flex-col justify-between h-full p-12 bg-white">
+                        <div>
+                        <div class="flex space-x-0.5 text-green-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                        </div>
+
+                        <div class="mt-4">
+                            <p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
+
+                            <p class="mt-4 text-lg text-gray-600">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam cumque recusandae dolorum porro,
+                            quasi sunt necessitatibus dolorem ab laudantium vel.
+                            </p>
+                        </div>
+                        </div>
+
+                        <footer class="mt-8 text-gray-500">Eddie Murphy</footer>
+                    </blockquote>
+                    </div>
+                </div>
+                </div>
+            </div>
+            </div>
+
+            <div class="flex justify-center mt-8 lg:hidden">
+            <button
+                class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
+                aria-label="Previous slide"
+            >
+                <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-5 h-5 transform -rotate-180"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </button>
+
+            <button
+                class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
+                aria-label="next-slide"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </button>
+            </div>
+        </div>
+        </section>
+
+        <script>
+        const swiper = new Swiper('.swiper-container', {
+            loop: true,
+            slidesPerView: 1,
+            spaceBetween: 32,
+            autoplay: {
+            delay: 8000,
+            },
+            navigation: {
+            nextEl: '.next-button',
+            prevEl: '.prev-button',
+            },
+            breakpoints: {
+            640: {
+                slidesPerView: 1.5,
+                centeredSlides: true,
+            },
+            1024: {
+                centeredSlides: false,
+                slidesPerView: 1.5,
+            },
+            },
+        })
+        </script>
+      
+      <!-- testimonial 9 end -->
+
+     <!-- testimonial 10 start  -->
+     <section class="section_divider">
+         <div>Testimonial 10</div>
+     </section>
+     <section class="bg-white">
+        <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">
+              Read trusted reviews from our customers
+            </h2>
+      
+            <p class="max-w-lg mx-auto mt-4 text-gring-offset-warm-gray-500">
+              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">
+                "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">Barry Scott</p>
+      
+                  <p class="mt-1 text-xs text-gray-500">
+                    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">
+                "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">Barry Scott</p>
+      
+                  <p class="mt-1 text-xs text-gray-500">
+                    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">
+                "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">Barry Scott</p>
+      
+                  <p class="mt-1 text-xs text-gray-500">
+                    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">
+                "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">Barry Scott</p>
+      
+                  <p class="mt-1 text-xs text-gray-500">
+                    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">
+                "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">Barry Scott</p>
+      
+                  <p class="mt-1 text-xs text-gray-500">
+                    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">
+                "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">Barry Scott</p>
+      
+                  <p class="mt-1 text-xs text-gray-500">
+                    Digital Marketing at Studio
+                  </p>
+                </div>
+              </footer>
+            </blockquote>
+          </div>
+        </div>
+      </section>
+     
+     <!-- testimonial 10 end -->
+
+    <!-- testimonial 11 start -->
+    <section class="section_divider">
+        <div>Testimonail 11</div>
+    </section>
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+    
+    <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">
+        <h2 class="text-4xl font-bold tracking-tight text-center sm:text-5xl">
+          Read trusted reviews from our customers
+        </h2>
+    
+        <div class="mt-12 swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <blockquote class="p-8 bg-gray-100 rounded-lg">
+                <div class="flex items-center">
+                  <img
+                    src="https://www.hyperui.dev/photos/man-4.jpeg"
+                    alt=""
+                    class="object-cover w-16 h-16 rounded-full"
+                  />
+    
+                  <div class="ml-4">
+                    <div class="flex space-x-0.5 justify-center text-green-500">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                    </div>
+    
+                    <p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
+                  </div>
+                </div>
+    
+                <p class="mt-4 text-gray-500">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
+                  voluptatem alias ut provident sapiente repellendus.
+                </p>
+              </blockquote>
+            </div>
+    
+            <div class="swiper-slide">
+              <blockquote class="p-8 bg-gray-100 rounded-lg">
+                <div class="flex items-center">
+                  <img
+                    src="https://www.hyperui.dev/photos/man-4.jpeg"
+                    alt=""
+                    class="object-cover w-16 h-16 rounded-full"
+                  />
+    
+                  <div class="ml-4">
+                    <div class="flex space-x-0.5 justify-center text-green-500">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                    </div>
+    
+                    <p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
+                  </div>
+                </div>
+    
+                <p class="mt-4 text-gray-500">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
+                  voluptatem alias ut provident sapiente repellendus.
+                </p>
+              </blockquote>
+            </div>
+    
+            <div class="swiper-slide">
+              <blockquote class="p-8 bg-gray-100 rounded-lg">
+                <div class="flex items-center">
+                  <img
+                    src="https://www.hyperui.dev/photos/man-4.jpeg"
+                    alt=""
+                    class="object-cover w-16 h-16 rounded-full"
+                  />
+    
+                  <div class="ml-4">
+                    <div class="flex space-x-0.5 justify-center text-green-500">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                      </svg>
+                    </div>
+    
+                    <p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
+                  </div>
+                </div>
+    
+                <p class="mt-4 text-gray-500">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
+                  voluptatem alias ut provident sapiente repellendus.
+                </p>
+              </blockquote>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <script>
+      const swiper = new Swiper('.swiper-container', {
+        loop: true,
+        slidesPerView: 1,
+        spaceBetween: 32,
+        centeredSlides: true,
+        autoplay: {
+          delay: 8000,
+        },
+        breakpoints: {
+          640: {
+            slidesPerView: 1.5,
+          },
+          1024: {
+            slidesPerView: 3,
+          },
+        },
+      })
+    </script>
+
+
+<!-- testimonial 11 end -->
+
+
+<!-- testimonial 12 start -->
+
+<section class="section_divider">
+    <div>  Testimonail 12</div>
+</section>
+
+<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+<style>
+  .swiper-pagination {
+    bottom: 0;
+    position: relative;
+  }
+
+  .swiper-container {
+    overflow: hidden;
+  }
+</style>
+
+<section class="bg-white dark:bg-gray-800">
+  <div class="max-w-screen-xl py-16 ml-auto sm:pl-6 lg:pl-0 mx-auto">
+    <div class="mt-12 swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <blockquote class="p-8 bg-gray-100">
+            <div class="flex items-center">
+              <img
+                src="https://www.hyperui.dev/photos/man-4.jpeg"
+                alt=""
+                class="object-cover w-16 h-16 rounded-full"
+              />
+
+              <div class="ml-4 text-sm">
+                <p class="font-medium">Jeff Wezos</p>
+                <p class="mt-1">CEO of Shipping Company</p>
+              </div>
+            </div>
+
+            <p class="relative mt-4 text-gray-500">
+              <span class="text-xl">&ldquo;</span>
+
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
+              assumenda officiis sit amet itaque eveniet accusantium corporis
+              tempora, soluta perspiciatis rerum, ratione animi nemo inventore
+              repellat, commodi in esse quisquam.
+
+              <span class="text-xl">&rdquo;</span>
+            </p>
+          </blockquote>
+        </div>
+
+        <div class="swiper-slide">
+          <blockquote class="p-8 bg-gray-100">
+            <div class="flex items-center">
+              <img
+                src="https://www.hyperui.dev/photos/man-4.jpeg"
+                alt=""
+                class="object-cover w-16 h-16 rounded-full"
+              />
+
+              <div class="ml-4 text-sm">
+                <p class="font-medium">Jeff Wezos</p>
+                <p class="mt-1">CEO of Shipping Company</p>
+              </div>
+            </div>
+
+            <p class="relative mt-4 text-gray-500">
+              <span class="text-xl">&ldquo;</span>
+
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
+              assumenda officiis sit amet itaque eveniet accusantium corporis
+              tempora, soluta perspiciatis rerum, ratione animi nemo inventore
+              repellat, commodi in esse quisquam.
+
+              <span class="text-xl">&rdquo;</span>
+            </p>
+          </blockquote>
+        </div>
+
+        <div class="swiper-slide">
+          <blockquote class="p-8 bg-gray-100">
+            <div class="flex items-center">
+              <img
+                src="https://www.hyperui.dev/photos/man-4.jpeg"
+                alt=""
+                class="object-cover w-16 h-16 rounded-full"
+              />
+
+              <div class="ml-4 text-sm">
+                <p class="font-medium">Jeff Wezos</p>
+                <p class="mt-1">CEO of Shipping Company</p>
+              </div>
+            </div>
+
+            <p class="relative mt-4 text-gray-500">
+              <span class="text-xl">&ldquo;</span>
+
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
+              assumenda officiis sit amet itaque eveniet accusantium corporis
+              tempora, soluta perspiciatis rerum, ratione animi nemo inventore
+              repellat, commodi in esse quisquam.
+
+              <span class="text-xl">&rdquo;</span>
+            </p>
+          </blockquote>
+        </div>
+
+        <div class="swiper-slide">
+          <blockquote class="p-8 bg-gray-100">
+            <div class="flex items-center">
+              <img
+                src="https://www.hyperui.dev/photos/man-4.jpeg"
+                alt=""
+                class="object-cover w-16 h-16 rounded-full"
+              />
+
+              <div class="ml-4 text-sm">
+                <p class="font-medium">Jeff Wezos</p>
+                <p class="mt-1">CEO of Shipping Company</p>
+              </div>
+            </div>
+
+            <p class="relative mt-4 text-gray-500">
+              <span class="text-xl">&ldquo;</span>
+
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
+              assumenda officiis sit amet itaque eveniet accusantium corporis
+              tempora, soluta perspiciatis rerum, ratione animi nemo inventore
+              repellat, commodi in esse quisquam.
+
+              <span class="text-xl">&rdquo;</span>
+            </p>
+          </blockquote>
+        </div>
+      </div>
+
+      <div class="mt-12 swiper-pagination"></div>
+    </div>
+  </div>
+</section>
+
+<script>
+  new Swiper('.swiper-container', {
+    loop: true,
+    slidesPerView: 1,
+    spaceBetween: 8,
+    autoplay: {
+      delay: 8000,
+    },
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+    },
+    breakpoints: {
+      640: {
+        slidesPerView: 1.5,
+      },
+      1024: {
+        slidesPerView: 3,
+      },
+    },
+  })
+</script>
+<!-- testimonial 12 end -->
+
+
+<!-- testimonial 13 start -->
+
+<section class="section_divider">
+    <div>Testimonial 13</div>
+</section>
+<section class="bg-gray-900">
+    <div class="w-full px-4 py-20 mx-auto text-center max-w-7xl md:w-4/5 lg:w-4/6">
+      <h1 class="mt-3 mb-10 text-xl font-extrabold text-white md:leading-snug md:text-3xl">
+        “Implementation is a breeze, particularly because the team at Hellonext is
+        <span class="text-white bg-transparent bg-clip-border xl:bg-clip-text xl:text-transparent xl:bg-gradient-to-r from-green-400 to-purple-500"> very fast to respond and help </span>
+        where needed, even if it means rolling out new features on their platform.  We're super happy and are loving how Hellonext brings us closer to the members of our community“
+      </h1>
+        <div class="mx-auto mb-3 shadow-lg avatar w-1/5">
+            <img src="https://www.hyperui.dev/photos/man-4.jpeg" alt="man standing up a mounten" class=" object-cover rounded-full h-20 w-20  mx-auto " />
+        </div>
+      <p class="text-base font-medium text-gray-200">example example</p>
+      <p class="text-xs font-medium text-gray-400">CEO, example</p>
+    </div>
+  </section>
+  
+
+
+
+<!-- testimonial 13 end -->
+
+<!-- testimonial 14 start -->
+<section class="section_divider">
+    <div>Testimonial 14</div>
+</section>
+<section class="dark:bg-coolGray-800 dark:text-coolGray-100">
+	<div class="container px-6 py-12 mx-auto">
+		<div class="grid items-center gap-4 xl:grid-cols-5">
+			<div class="max-w-2xl mx-auto my-8 space-y-4 text-center xl:col-span-2 xl:text-left">
+				<h2 class="text-4xl font-bold">Duo assum utroque appetere an</h2>
+				<p class="dark:text-coolGray-400">Pri ex magna scaevola moderatius. Nullam accommodare no vix, est ei diceret alienum, et sit cetero malorum. Et sea iudico consequat, est sanctus adipisci ex.</p>
+			</div>
+			<div class="p-6 xl:col-span-3">
+				<div class="grid gap-4 md:grid-cols-2">
+					<div class="grid content-center gap-4">
+						<div class="p-6 rounded shadow-md dark:bg-coolGray-900">
+							<p>An audire commodo habemus cum. Ne sed corrumpit repudiandae. Tota aliquip democritum pro in, nec democritum intellegam ne. Propriae volutpat dissentiet ea sit, nec at lorem inani tritani, an ius populo perfecto vituperatoribus. Eu cum case modus salutandi, ut eum vocent sensibus reprehendunt.</p>
+							<div class="flex items-center mt-4 space-x-4">
+								<img src="https://source.unsplash.com/50x50/?portrait?1" alt="" class="w-12 h-12 bg-center bg-cover rounded-full dark:bg-coolGray-500">
+								<div>
+									<p class="text-lg font-semibold">Leroy Jenkins</p>
+									<p class="text-sm dark:text-coolGray-400">CTO of Company Co.</p>
+								</div>
+							</div>
+						</div>
+						<div class="p-6 rounded shadow-md dark:bg-coolGray-900">
+							<p>Sit wisi sapientem ut, pri civibus temporibus voluptatibus et, ius cu hinc fabulas. Nam meliore minimum et, regione convenire cum id. Ex pro eros mucius consectetuer, pro magna nulla nonumy ne, eam putent iudicabit consulatu cu.</p>
+							<div class="flex items-center mt-4 space-x-4">
+								<img src="https://source.unsplash.com/50x50/?portrait?2" alt="" class="w-12 h-12 bg-center bg-cover rounded-full dark:bg-coolGray-500">
+								<div>
+									<p class="text-lg font-semibold">Leroy Jenkins</p>
+									<p class="text-sm dark:text-coolGray-400">CTO of Company Co.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="grid content-center gap-4">
+						<div class="p-6 rounded shadow-md dark:bg-coolGray-900">
+							<p>Putant omnium elaboraret per ut. Id dicta tritani nominavi quo, mea id justo errem elaboraret. Agam mollis scripserit ea his, ut nec postea verear persecuti. Ea noster senserit eam, ferri omittantur ei nec. Id mel solet libris efficiantur, commune explicari et eos. Case movet ad est, sed tota vocent appetere ea.</p>
+							<div class="flex items-center mt-4 space-x-4">
+								<img src="https://source.unsplash.com/50x50/?portrait?3" alt="" class="w-12 h-12 bg-center bg-cover rounded-full dark:bg-coolGray-500">
+								<div>
+									<p class="text-lg font-semibold">Leroy Jenkins</p>
+									<p class="text-sm dark:text-coolGray-400">CTO of Company Co.</p>
+								</div>
+							</div>
+						</div>
+						<div class="p-6 rounded shadow-md dark:bg-coolGray-900">
+							<p>Te omnes virtute volutpat sed. Ei esse eros interesset vel, ei populo denique ocurreret vix, eu cum pertinax mandamus vituperatoribus. Solum nihil luptatum per ex, ei amet viderer eos. Ea illum labitur mnesarchum pro. Eius meis salutandi ei nam, alterum expetenda et nec. Expetenda intellegat at eum, per mazim sanctus honestatis ad. Ei noluisse invenire vix. Te ancillae patrioque qui, probo bonorum vivendum ex vim.</p>
+							<div class="flex items-center mt-4 space-x-4">
+								<img src="https://source.unsplash.com/50x50/?portrait?4" alt="" class="w-12 h-12 bg-center bg-cover rounded-full dark:bg-coolGray-500">
+								<div>
+									<p class="text-lg font-semibold">Leroy Jenkins</p>
+									<p class="text-sm dark:text-coolGray-400">CTO of Company Co.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+
+
+<!-- testimonial 14 end -->
+
+
+<!-- testimonail 15 start -->
+<section class="section_divider">
+    <div>Testimonail 15</div>
+</section>
+<section class="my-8 dark:bg-coolGray-800 dark:text-coolGray-100">
+	<div class="container flex flex-col items-center mx-auto mb-12 md:p-10 md:px-12">
+		<h1 class="p-4 text-4xl font-semibold leading-none text-center">What our customers are saying about us</h1>
+	</div>
+	<div class="container flex flex-col items-center justify-center mx-auto lg:flex-row lg:flex-wrap lg:justify-evenly lg:px-10">
+		<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
+			<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
+				<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
+						<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
+						<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
+					</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
+						<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
+						<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
+					</svg>
+				</p>
+			</div>
+			<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
+				<img src="https://source.unsplash.com/50x50/?portrait?1" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
+				<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
+				<p class="text-sm uppercase">Aliquam illum</p>
+			</div>
+		</div>
+		<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
+			<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
+				<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
+						<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
+						<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
+					</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
+						<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
+						<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
+					</svg>
+				</p>
+			</div>
+			<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
+				<img src="https://source.unsplash.com/50x50/?portrait?2" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
+				<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
+				<p class="text-sm uppercase">Aliquam illum</p>
+			</div>
+		</div>
+		<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
+			<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
+				<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
+						<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
+						<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
+					</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
+						<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
+						<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
+					</svg>
+				</p>
+			</div>
+			<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
+				<img src="https://source.unsplash.com/50x50/?portrait?3" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
+				<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
+				<p class="text-sm uppercase">Aliquam illum</p>
+			</div>
+		</div>
+		<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
+			<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
+				<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
+						<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
+						<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
+					</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
+						<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
+						<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
+					</svg>
+				</p>
+			</div>
+			<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
+				<img src="https://source.unsplash.com/50x50/?portrait?4" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
+				<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
+				<p class="text-sm uppercase">Aliquam illum</p>
+			</div>
+		</div>
+	</div>
+</section>
+
+
+<!-- testimonail 15 end -->
+
+<!-- testimonail 16 start -->
+<section class="section_divider">
+    <div>Testimonail 16</div>
+</section>
+<section class="p-6">
+	<div class="container max-w-xl mx-auto">
+		<div class="flex flex-col items-center w-full p-6 space-y-8 rounded-md lg:h-full lg:p-8 dark:bg-coolGray-900 dark:text-coolGray-100">
+			<img src="https://source.unsplash.com/random/100x100?4" alt="" class="w-20 h-20 rounded-full dark:bg-coolGray-500">
+			<blockquote class="max-w-lg text-lg italic font-medium text-center">"Et, dignissimos obcaecati. Recusandae praesentium doloribus vitae? Rem unde atque mollitia!"</blockquote>
+			<div class="text-center dark:text-coolGray-400">
+				<p>Leroy Jenkins</p>
+				<p>CEO of Company Co.</p>
+			</div>
+			<div class="flex space-x-2">
+				<button type="button" aria-label="Page 1" class="w-2 h-2 rounded-full dark:bg-coolGray-50"></button>
+				<button type="button" aria-label="Page 2" class="w-2 h-2 rounded-full dark:bg-coolGray-600"></button>
+				<button type="button" aria-label="Page 3" class="w-2 h-2 rounded-full dark:bg-coolGray-600"></button>
+				<button type="button" aria-label="Page 4" class="w-2 h-2 rounded-full dark:bg-coolGray-600"></button>
+			</div>
+		</div>
+	</div>
+</section>
+
+
+<!-- testimonail 16 end -->
+
+<!-- testimonail 17 start  -->
+<section class="section_divider">
+    <div>Testimonial 17</div>
+</section>
+<section class="bg-indigo-100 dark:bg-gray-800 w-full h-screen p-4">
+    <div class="">
+      <div class="flex flex-col lg:grid lg:gap-4 2xl:gap-6 lg:grid-cols-4 2xl:row-span-2 2xl:pb-8 ml-2 pt-4 px-6">
+        <!-- Beginning of the component about Daniel Clifford -->
+        <div class="bg-indigo-600 lg:order-1 lg:row-span-1 2xl:row-span-1 lg:col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0">
+          <div class="mx-6 my-8 2xl:mx-10">
+            <img class="w-8 md:w-9 lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 ml-1 lg:ml-3 2xl:ml-0 md:-mt-1 2xl:-mt-4" src="https://images.pexels.com/photos/3775534/pexels-photo-3775534.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-20 2xl:mx-8">Daniel Clifford</h1>
+            <h2 class="text-white text-opacity-50 text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 2xl:my-2 2xl:mx-8">Verified Graduate</h2>
+          </div>
+          <div class="-mt-6 relative">
+            <p class="text-white text-xl 2xl:text-4xl font-bold px-7 lg:px-9 2xl:pt-6 2xl:mx-2">I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.</p>
+            <br />
+            <p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-7 lg:px-9 mb-3 2xl:pb-8 2xl:mx-2">“ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Daniel Clifford -->
+
+        <!-- Beginning of the component about Jonathan Walters -->
+        <div class="bg-gray-900 lg:order-2 lg:row-span-1 2xl:row-span-1 lg:col-span-1 rounded-lg shadow-xl pb-4 mb-5 lg:mb-0">
+          <div class="mx-8 2xl:mx-10 my-10">
+            <img class="w-8 md:w-9 2xl:w-20 h-8 md:h-9 2xl:h-20 rounded-full border-2 -ml-1 -mt-2 lg:-mt-4" src="https://images.pexels.com/photos/634021/pexels-photo-634021.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 2xl:pl-24 -mt-8 md:-mt-10 2xl:-mt-16">Jonathan Walters</h1>
+            <h2 class="text-white text-xs md:text-base 2xl:text-2xl text-opacity-50 pl-11 md:pl-12 2xl:pl-24">Verified Graduate</h2>
+          </div>
+          <div class="-mt-8 mx-1 lg:mx-2">
+            <p class="text-white text-lg lg:text-xl 2xl:text-4xl font-semibold pt-1 px-6 2xl:px-8 lg:pl-5 lg:pr-8">The team was very supportive and kept me motivated</p>
+            <br />
+            <p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl pl-6 lg:pl-5 pr-4 -mt-1 lg:mt-6 2xl:mt-2 2xl:px-8">“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Jonathan Walters -->
+
+        <!-- Beginning of the component about Jeanette Harmon -->
+        <div class="bg-primary-color-white lg:order-3 lg:row-span-2 2xl:row-span-1 lg:col-span-1 rounded-lg shadow-xl mb-5 lg:mb-0 2xl:mb-8">
+          <div class="mx-8 my-10 lg:my-8">
+            <img class="w-8 md:w-9 lg:w-11 2xl:w-20 h-8 md:h-9 lg:h-11 2xl:h-20 rounded-full border-2 -mt-3 -ml-1 lg:-ml-0" src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="primary-color-blackish-blue text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 lg:pl-14 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-16">Jeanette Harmon</h1>
+            <h2 class="primary-color-blackish-blue-opacity text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 lg:pl-14 2xl:pl-24">Verified Graduate</h2>
+          </div>
+          <div class="-mt-4 ml-5 mr-11">
+            <p class="primary-color-blackish-blue text-xl 2xl:text-4xl font-bold px-2 lg:px-3 -mt-6 lg:-mt-5 2xl:mt-12 2xl:pb-6">An overall wonderful and rewarding experience</p>
+            <br />
+            <p class="primary-color-blackish-blue-opacity font-medium md:text-sm 2xl:text-3xl pl-2 lg:pl-3 lg:pr-4 mb-6 2xl:pt-2 -mt-3">“ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love. ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Jeanette Harmon -->
+
+        <!-- Beginning of the component about Patrick Abrams -->
+        <div class="bg-purple-800 lg:order-4 lg:row-span-2 2xl:row-span-1 col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0 2xl:mb-8 lg:pb-14 2xl:pb-20">
+          <div class="mx-8 my-8">
+            <img class="w-8 md:w-9 lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 lg:-mt-3" src="https://images.pexels.com/photos/3778603/pexels-photo-3778603.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-12 md:pl-14 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-16">Patrick Abrams</h1>
+            <h2 class="text-white text-xs md:text-base 2xl:text-2xl text-opacity-50 pl-12 md:pl-14 2xl:pl-24">Verified Graduate</h2>
+          </div>
+          <div class="px-3 -mt-3 mb-5 lg:mb-0">
+            <p class="text-white text-lg 2xl:text-4xl font-semibold px-4 -mt-3 lg:-mt-6 2xl:mt-8">Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.</p>
+            <br />
+            <p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-4 mt-1 lg:-mt-3 2xl:mt-6">“ The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest. You will get the personal attention you need from an incredible community of lgart and amazing people. ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Patrick Abrams -->
+
+        <!-- Beginning of the component about Kira Whittle -->
+        <div class="bg-white lg:order-2 lg:row-span-4 lg:col-span-1 rounded-lg shadow-xl mb-5 lg:pb-4 ">
+          <div class="mx-8 my-8 lg:pl-1">
+            <img class="w-8 md:w-9 lg:w-12 2xl:w-20 h-8 md:h-9 lg:h-12 2xl:h-20 rounded-full border-2 lg:-mt-4 -ml-1 lg:-ml-4" src="https://images.pexels.com/photos/3762804/pexels-photo-3762804.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
+            <h1 class="primary-color-blackish-blue text-xs md:text-base 2xl:text-2xl pl-10 md:pl-12 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-12 2xl:-mt-16">Kira Whittle</h1>
+            <h2 class="primary-color-blackish-blue-opacity text-xs md:text-base 2xl:text-sm pl-10 md:pl-12 2xl:pl-24">Verified Graduate</h2>
+          </div>
+          <div class="px-3 lg:px-5 lg:-mt-4 mb-5 lg:mb-0">
+            <p class="primary-color-blackish-blue text-xl 2xl:text-4xl font-semibold px-4 lg:px-0 -mt-2 lg:-mt-0">Such a life-changing experience. Highly recommended!</p>
+            <br />
+            <p class="primary-color-blackish-blue-opacity font-medium md:text-sm 2xl:text-2xl px-4 lg:px-0 2xl:px-4 lg:pr-3 lg:pb-3 mt-2 lg:-mt-1 2xl:mt-2 2xl:pb-64">“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from professionals who can help me learn programming step by step. I was encouraged to enroll by a former student of theirs who can only say wonderful things about the program. The entire curriculum and staff did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial could ever have. In fact, I’ve often referred to it during interviews as an example of my developent experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 100% recommend! ”</p>
+          </div>
+        </div>
+        <!-- Ending of the component about Kira Whittle -->
+      </div>
+    </div>
+</section>
+
+<!-- testimonail 17 end -->
+
+
+<!-- testimonail 18 start -->
+<section class="section_divider">
+    <div>Testimonial 18</div>
+</section>
+
+    <section class="antialiased sans-serif bg-gray-200 text-gray-600 p-3">
+		
+		<div class="my-10 md:my-24 container mx-auto flex flex-col md:flex-row shadow-sm overflow-hidden" x-data="{ testimonialActive: 2 }" x-cloak>
+			<div class="relative w-full py-2 md:py-24 bg-indigo-700 md:w-1/2 flex flex-col item-center justify-center">
+				
+				<div class="absolute top-0 left-0 z-10 grid-indigo w-16 h-16 md:w-40 md:h-40 md:ml-20 md:mt-24"></div>
+				
+				<div class="relative text-2xl md:text-5xl py-2 px-6 md:py-6 md:px-1 md:w-64 md:mx-auto text-indigo-100 font-semibold leading-tight tracking-tight mb-0 z-20">
+					<span class="md:block">What Our</span>
+					<span class="md-block">Customers</span>
+					<span class="block">Are Saying!</span>
+				</div>
+
+				<div class="absolute right-0 bottom-0 mr-4 mb-4 hidden md:block">
+					<button 
+						class="rounded-l-full border-r bg-gray-100 text-gray-500 focus:outline-none hover:text-indigo-500 font-bold w-12 h-10"
+						x-on:click="testimonialActive = testimonialActive === 1 ? 3 : testimonialActive - 1">
+						&#8592;
+					</button><button 
+						class="rounded-r-full bg-gray-100 text-gray-500 focus:outline-none hover:text-indigo-500 font-bold w-12 h-10"
+						x-on:click="testimonialActive = testimonialActive >= 3 ? 1 : testimonialActive + 1">
+						&#8594;
+					  </button>
+				</div>
+			</div>
+
+			<div class="bg-gray-100 md:w-1/2">
+				<div class="flex flex-col h-full relative">
+
+					<div class="absolute top-0 left-0 mt-3 ml-4 md:mt-5 md:ml-12">
+						<svg xmlns="http://www.w3.org/2000/svg" class="text-indigo-200 fill-current w-12 h-12 md:w-16 md:h-16" viewBox="0 0 24 24"><path d="M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35.208-.086.39-.16.539-.222.302-.125.474-.197.474-.197L9.758 4.03c0 0-.218.052-.597.144C8.97 4.222 8.737 4.278 8.472 4.345c-.271.05-.56.187-.882.312C7.272 4.799 6.904 4.895 6.562 5.123c-.344.218-.741.4-1.091.692C5.132 6.116 4.723 6.377 4.421 6.76c-.33.358-.656.734-.909 1.162C3.219 8.33 3.02 8.778 2.81 9.221c-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539.017.109.025.168.025.168l.026-.006C2.535 17.474 4.338 19 6.5 19c2.485 0 4.5-2.015 4.5-4.5S8.985 10 6.5 10zM17.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35.208-.086.39-.16.539-.222.302-.125.474-.197.474-.197L20.758 4.03c0 0-.218.052-.597.144-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162C14.219 8.33 14.02 8.778 13.81 9.221c-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539.017.109.025.168.025.168l.026-.006C13.535 17.474 15.338 19 17.5 19c2.485 0 4.5-2.015 4.5-4.5S19.985 10 17.5 10z"/></svg>
+					</div>
+					 
+					<div class="h-full relative z-10">
+						<div x-show.immediate="testimonialActive === 1">
+							<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 1">
+								Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+							</p>
+						</div>
+						
+						<div x-show.immediate="testimonialActive === 2">
+							<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 2">
+								Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
+							</p>
+						</div>
+						
+						<div x-show.immediate="testimonialActive === 3"> 
+							<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 3">
+								Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
+							</p>
+						</div>
+					</div>
+
+					<div class="flex my-4 justify-center items-center">
+						<button 
+							@click.prevent="testimonialActive = 1" 
+							class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline inline-block rounded-full mx-2"
+							:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 1, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 1 }"	
+						>JD</button>
+						<button 
+							@click.prevent="testimonialActive = 2" 
+							class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline h-16 w-16 inline-block bg-indigo-600 rounded-full mx-2"
+							:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 2, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 2 }"	
+						>WD</button>
+						<button 
+							@click.prevent="testimonialActive = 3" 
+							class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline h-12 w-12 inline-block bg-indigo-600 rounded-full mx-2"
+							:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 3, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 3 }"
+						>JW</button>
+					</div>
+					 
+					<div class="flex justify-center px-6 pt-2 pb-6 md:py-6">
+						<div class="text-center" x-show="testimonialActive == 1">
+							<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">John Doe</h2>
+							<small class="text-gray-500 text-xs md:text-sm truncate">CEO, ABC Inc.</small>
+						</div>
+
+						<div class="text-center" x-show="testimonialActive == 2">
+							<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">Winter Doe</h2>
+							<small class="text-gray-500 text-xs md:text-sm truncate">CTO, XYZ Corp.</small>
+						</div>
+
+						<div class="text-center" x-show="testimonialActive == 3">
+							<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">John Wick</h2>
+							<small class="text-gray-500 text-xs md:text-sm truncate">Product Manager, Fake Corp.</small>
+						</div>	 
+					</div>
+				</div>
+			</div>
+		</div>
+    </section>
+ 
+
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
+<!-- testimonail 18 end -->
+
+<!-- testimonail 19 start -->
+<section class="section_divider">
+    <div>Testimonail 19</div>
+</section>
+<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg my-20">
+    <div class="flex justify-center md:justify-end -mt-16">
+      <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
+    </div>
+    <div>
+      <h2 class="text-gray-800 text-3xl font-semibold">Design Tools</h2>
+      <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
+    </div>
+    <div class="flex justify-end mt-4">
+      <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
+    </div>
+  </div>
+
+<!-- testimonail 19 end -->
+
+<!-- testimonial 20 start  -->
+<section class="section_divider">
+    <div>Testimonial 20</div>
+</section>
+
+<div class="flex items-center justify-center px-5 py-5">
+    <div class="w-full mx-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 shadow-lg px-5 pt-5 pb-10 text-gray-800 dark:text-gray-50">
+        <div class="w-full pt-1 text-center pb-5 -mt-16 mx-auto">
+            <a href="#" class="block relative">
+                <img class="mx-auto object-cover rounded-full h-20 w-20 border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
+                  
+            </a>
+        </div>
+        <div class="w-full mb-10">
+            <div class="text-3xl text-indigo-500 text-left leading-tight h-3">
+                “
+            </div>
+            <p class="text-sm text-gray-600 dark:text-gray-100 text-center px-5">
+                To get social media testimonials like these, keep your customers engaged with your social media accounts by posting regularly yourself
+            </p>
+            <div class="text-3xl text-indigo-500 text-right leading-tight h-3 -mt-3">
+                ”
+            </div>
+        </div>
+        <div class="w-full">
+            <p class="text-md text-indigo-500 font-bold text-center">
+                Tom Hardy
+            </p>
+            <p class="text-xs text-gray-500 dark:text-gray-300 text-center">
+                @thom.hardy
+            </p>
+        </div>
+    </div>
+</div>
+
+
+<!-- testimonial 20 end   -->
+
+
+<!-- testimonial 21 start -->
+<section class="section_divider">
+    <div>Testimonial 21</div>
+</section>
+<section class=" w-full mb-6">
+    <div class="mx-auto bg-gradient-to-b from-blue-500 w-full md:w-60 to-blue-600 rounded-lg p-4  shadow ">
+        <div class="flex items-center text-left">
+            <div class="flex-shrink-0">
+                <div class="inline-block relative">
+                    <a href="#" class="block relative">
+                        <img alt="" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="mx-auto object-cover rounded-full h-16 w-16 "/>
+                    </a>
+                </div>
+            </div>
+            <div class="ml-6">
+                <p class="flex items-baseline">
+                    <span class="text-white">
+                        Charlie Rabiller
+                    </span>
+                </p>
+                <div class="flex items-center mt-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
+                        <path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
+                        </path>
+                    </svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
+                        <path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
+                        </path>
+                    </svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
+                        <path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
+                        </path>
+                    </svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
+                        <path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
+                        </path>
+                    </svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
+                        <path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
+                        </path>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="mt-3">
+            <p class="mt-1 max-w-xs font-light text-white">
+                My first job of scanning photos at the Memories 2 Digital Photo Scanning was fantastic. She completed the work quickly while I was waiting. Thanks for a great service..
+            </p>
+        </div>
+        <div class="flex items-start text-gray-100 mt-6">
+            <button class="mr-4 hover:text-white">
+                <svg width="25" height="25" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1664 596q0-81-21.5-143t-55-98.5-81.5-59.5-94-31-98-8-112 25.5-110.5 64-86.5 72-60 61.5q-18 22-49 22t-49-22q-24-28-60-61.5t-86.5-72-110.5-64-112-25.5-98 8-94 31-81.5 59.5-55 98.5-21.5 143q0 168 187 355l581 560 580-559q188-188 188-356zm128 0q0 221-229 450l-623 600q-18 18-44 18t-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344z">
+                    </path>
+                </svg>
+            </button>
+            <button class="hover:text-white">
+                <svg width="25" height="25" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1344 1024q133 0 226.5 93.5t93.5 226.5-93.5 226.5-226.5 93.5-226.5-93.5-93.5-226.5q0-12 2-34l-360-180q-92 86-218 86-133 0-226.5-93.5t-93.5-226.5 93.5-226.5 226.5-93.5q126 0 218 86l360-180q-2-22-2-34 0-133 93.5-226.5t226.5-93.5 226.5 93.5 93.5 226.5-93.5 226.5-226.5 93.5q-126 0-218-86l-360 180q2 22 2 34t-2 34l360 180q92-86 218-86z">
+                    </path>
+                </svg>
+            </button>
+        </div>
+    </div>
+</section>
+
+
+<!-- testimonial 21 end -->
+
+
+<!-- testimonial 22 start -->
+<section class="section_divider">
+    <div>Testimonail 22</div>
+</section>
+
+
+<div class="bg-white dark:bg-gray-800 w-72 shadow-lg mx-auto rounded-xl p-4">
+    <p class="text-gray-600 dark:text-white">
+        <span class="font-bold text-indigo-500 text-lg">
+            “
+        </span>
+        To get social media testimonials like these, keep your customers engaged with your social media accounts by posting regularly yourself
+        <span class="font-bold text-indigo-500 text-lg">
+            ”
+        </span>
+    </p>
+    <div class="flex items-center mt-4">
+        <a href="#" class="block relative">
+            <img alt="profil" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="mx-auto object-cover rounded-full h-10 w-10 "/>
+        </a>
+        <div class="flex flex-col ml-2 justify-between">
+            <span class="font-semibold text-indigo-500 text-sm">
+                Jean Miguel
+            </span>
+            <span class="dark:text-gray-400 text-xs flex items-center">
+                User of Tail-Kit
+                <img src="#__" class="ml-2 h-4 w-4"/>
+            </span>
+        </div>
+    </div>
+</div>
+
+<!-- testimonial 22 end -->
+
+<!-- testimonial 23 start -->
+<section class="section_divider">
+    <div>Testimonial 23</div>
+</section>
+
+    <div class="mx-auto py-10 px-4 w-full max-w-7xl bg-gray-50">
+        <div class="relative mx-auto w-full h-full max-w-5xl flex shadow-xl">
+
+        <div class="z-10 relative py-10 pl-8 pr-2 w-full md:w-3/5 min-h-360px rounded md:rounded-r-none bg-blue-600 bg-opacity-70 md:bg-opacity-100 text-white">
+            <div class="mx-auto max-w-md flex flex-col">
+            <div class="flex-shrink-0">
+                <svg class="w-10 lg:w-12 h-10 lg:h-12" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
+            </div>
+            <p class="text-xl sm:text-2xl lg:text-3xl font-extrabold leading-normal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur aliquid, illo reiciendis voluptatum asperiores.</p>
+            <h3 class="mt-2 text-base font-bold">Adam Negan </h3>
+            <p class="text-sm">CEO of Bismart Enterprise</p>
+            </div>
+        </div>
+
+
+        <div class="absolute md:relative w-full md:w-2/5 min-h-full rounded-r overflow-hidden bg-blue-600">
+            <img src="https://fancytailwind.com/static/profile13-9abe52b1e8851f9e4afde349f2789d3e.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover filter grayscale brightness-125" />
+        </div>
+
+        <div class="z-10 absolute -bottom-5 right-1/2 md:-right-3 py-1 px-3 space-x-3 flex bg-yellow-500 text-yellow-100 transform translate-x-1/2 md:translate-x-0">
+                <button type="button" aria-label="previous" class="flex-shrink-0 hover:text-white" onClick={previousTestimony}>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
+                    </svg>
+                </button>
+                <button type="button" aria-label="next" class="flex-shrink-0 hover:text-white" onClick={nextTestimony}>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                    </svg>
+                </button>
+        </div>
+
+        </div>
+    </div>
+
+<!-- testimonial 23 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.class =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.class =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      
+    })
+</script>
+<!-- end of script section -->
+
+
+</body>
+</html>
\ No newline at end of file