From 7aa2e1db780df7409cc383dda714772829c0f726 Mon Sep 17 00:00:00 2001
From: merajjahir <meraj.jahir17@gmail.com>
Date: Thu, 17 Feb 2022 21:14:26 +0600
Subject: [PATCH]  added 23 uncomplete header's and 15 uncomplete hero block
 component's 11 of which is done fully

---
 dist/tailshape.css                        | 1212 ++++++++++++++++++---
 public/componets/footer/footer.html       |    1 -
 public/componets/hero/1.html              |   40 -
 public/componets/hero/10_hero.html        |   71 ++
 public/componets/hero/11_hero.html        |   39 +
 public/componets/hero/1_hero.html         |   39 +
 public/componets/hero/2_hero.html         |   76 ++
 public/componets/hero/3_hero.html         |   58 +
 public/componets/hero/4_hero.html         |   47 +
 public/componets/hero/5_hero.html         |   44 +
 public/componets/hero/6_header.html       |   58 +
 public/componets/hero/7_hero.html         |   47 +
 public/componets/hero/8_hero.html         |   59 +
 public/componets/hero/9_hero.html         |   90 ++
 public/componets/hero/hero.html           | 1137 ++++++++++---------
 public/componets/navs_headers/header.html | 1126 ++++++++++++++++++-
 16 files changed, 3423 insertions(+), 721 deletions(-)
 delete mode 100755 public/componets/hero/1.html
 create mode 100644 public/componets/hero/10_hero.html
 create mode 100644 public/componets/hero/11_hero.html
 create mode 100755 public/componets/hero/1_hero.html
 create mode 100644 public/componets/hero/2_hero.html
 create mode 100644 public/componets/hero/3_hero.html
 create mode 100644 public/componets/hero/4_hero.html
 create mode 100644 public/componets/hero/5_hero.html
 create mode 100644 public/componets/hero/6_header.html
 create mode 100644 public/componets/hero/7_hero.html
 create mode 100644 public/componets/hero/8_hero.html
 create mode 100644 public/componets/hero/9_hero.html

diff --git a/dist/tailshape.css b/dist/tailshape.css
index 3ffe9ea..ac211a7 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -530,11 +530,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   position: relative;
 }
 
-.sticky {
-  position: -webkit-sticky;
-  position: sticky;
-}
-
 .inset-0 {
   top: 0px;
   right: 0px;
@@ -542,6 +537,45 @@ Ensure the default browser behavior of the `hidden` attribute.
   left: 0px;
 }
 
+.inset-2 {
+  top: 0.5rem;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  left: 0.5rem;
+}
+
+.inset-1 {
+  top: 0.25rem;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  left: 0.25rem;
+}
+
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
+.inset-y-px {
+  top: 1px;
+  bottom: 1px;
+}
+
+.inset-x-1 {
+  left: 0.25rem;
+  right: 0.25rem;
+}
+
+.inset-x-1\/3 {
+  left: 33.333333%;
+  right: 33.333333%;
+}
+
 .top-1\/2 {
   top: 50%;
 }
@@ -578,6 +612,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   right: 1rem;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
+.top-16 {
+  top: 4rem;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
 .z-30 {
   z-index: 30;
 }
@@ -590,18 +640,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   z-index: 10;
 }
 
-.z-0 {
-  z-index: 0;
-}
-
 .z-50 {
   z-index: 50;
 }
 
-.z-40 {
-  z-index: 40;
-}
-
 .order-1 {
   order: 1;
 }
@@ -746,6 +788,41 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 2rem;
 }
 
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.mx-1\.5 {
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.-mx-3 {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+}
+
 .mt-12 {
   margin-top: 3rem;
 }
@@ -938,6 +1015,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: 1.25rem;
 }
 
+.-mr-1 {
+  margin-right: -0.25rem;
+}
+
+.-mt-2 {
+  margin-top: -0.5rem;
+}
+
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+
 .ml-0 {
   margin-left: 0px;
 }
@@ -1094,6 +1183,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 0.125rem;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -1206,6 +1303,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 100vw;
 }
 
+.w-1\/5 {
+  width: 20%;
+}
+
+.w-60 {
+  width: 15rem;
+}
+
+.w-80 {
+  width: 20rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1310,6 +1419,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-90 {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1405,6 +1519,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   align-items: center;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-start {
   justify-content: flex-start;
 }
@@ -1417,6 +1535,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   justify-content: space-between;
 }
 
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.justify-items-center {
+  justify-items: center;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -1445,6 +1571,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   gap: 0px;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
@@ -1555,6 +1689,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-10 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-44 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(11rem * var(--tw-space-x-reverse));
+  margin-left: calc(11rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-reverse > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 1;
 }
@@ -1610,6 +1756,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   overflow: hidden;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -1648,6 +1798,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 0.125rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .rounded-t {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
@@ -1689,6 +1843,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-bottom-width: 4px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-none {
   border-style: none;
 }
@@ -1755,6 +1913,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(29 78 216 / var(--tw-border-opacity));
 }
 
+.border-indigo-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(129 140 248 / var(--tw-border-opacity));
+}
+
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.border-purple-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(168 85 247 / var(--tw-border-opacity));
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -1765,11 +1938,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
-.border-purple-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
-}
-
 .border-blue-400 {
   --tw-border-opacity: 1;
   border-color: rgb(96 165 250 / var(--tw-border-opacity));
@@ -1780,6 +1948,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
+.border-yellow-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+}
+
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.border-b-gray-500 {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1894,6 +2077,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(147 51 234 / var(--tw-bg-opacity));
 }
 
+.bg-teal-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+}
+
 .bg-gray-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
@@ -1944,9 +2132,29 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
-.bg-teal-500 {
+.bg-purple-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#242526\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(36 37 38 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#3A3B3C\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(58 59 60 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-700 {
@@ -1974,14 +2182,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));
 }
 
-.bg-purple-400 {
+.bg-red-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
 }
 
-.bg-red-400 {
+.bg-blue-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-50 {
@@ -2000,6 +2208,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.bg-\[url\(\'\'\)\] {
+  background-image: url('');
+}
+
+.bg-\[url\(https\:\/\/images\.unsplash\.com\/photo-1514525253161-7a46d19cd819\?ixlib\=rb-1\.2\.1\&ixid\=eyJhcHBfaWQiOjEyMDd9\&auto\=format\&fit\=crop\&w\=1267\&q\=80\)\] {
+  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-\[url\(https\:\/\/iges\.unsplash\.com\/photo-1514525253161-7a46d19cd819\?ixlib\=rb-1\.2\.1\&ixid\=eyJhcHBfaWQiOjEyMDd9\&auto\=format\&fit\=crop\&w\=1267\&q\=80\)\] {
+  background-image: url(https://iges.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80);
+}
+
+.bg-\[url\(https\:\/\/images\.unsplash\.com\/photo-1559941727-6fb446e7e8ae\?ixlib\=rb-1\.2\.1\&q\=80\&fm\=jpg\&crop\=entropy\&cs\=tinysrgb\&w\=3936\&h\=2624\&fit\=crop\&ixid\=eyJhcHBfaWQiOjF9\)\] {
+  background-image: url(https://images.unsplash.com/photo-1559941727-6fb446e7e8ae?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=3936&h=2624&fit=crop&ixid=eyJhcHBfaWQiOjF9);
+}
+
 .from-pink-500 {
   --tw-gradient-from: #ec4899;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(236 72 153 / 0));
@@ -2026,6 +2250,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-size: cover;
 }
 
+.bg-contain {
+  background-size: contain;
+}
+
 .bg-clip-text {
   -webkit-background-clip: text;
           background-clip: text;
@@ -2055,24 +2283,25 @@ Ensure the default browser behavior of the `hidden` attribute.
   fill: #f87171;
 }
 
-.fill-gray-900 {
-  fill: #111827;
-}
-
-.fill-gray-300 {
-  fill: #d1d5db;
-}
-
 .fill-gray-800 {
   fill: #1f2937;
 }
 
-.fill-rose-600 {
-  fill: #e11d48;
+.fill-blue-500 {
+  fill: #3b82f6;
 }
 
-.fill-red-600 {
-  fill: #dc2626;
+.fill-white {
+  fill: #fff;
+}
+
+.stroke-gray-500 {
+  stroke: #6b7280;
+}
+
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
 }
 
 .object-cover {
@@ -2245,6 +2474,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 1.25rem;
 }
 
+.py-48 {
+  padding-top: 12rem;
+  padding-bottom: 12rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2305,6 +2539,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 2rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .pt-32 {
   padding-top: 8rem;
 }
@@ -2353,6 +2591,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 1.5rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pt-0\.5 {
+  padding-top: 0.125rem;
+}
+
+.pt-0 {
+  padding-top: 0px;
+}
+
 .pt-48 {
   padding-top: 12rem;
 }
@@ -2361,10 +2611,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 3rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pr-8 {
   padding-right: 2rem;
 }
@@ -2389,8 +2635,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 14rem;
 }
 
-.pb-3 {
-  padding-bottom: 0.75rem;
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pb-5 {
+  padding-bottom: 1.25rem;
 }
 
 .text-left {
@@ -2528,6 +2782,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1;
 }
 
+.leading-4 {
+  line-height: 1rem;
+}
+
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -2548,10 +2806,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 2.5rem;
 }
 
-.leading-4 {
-  line-height: 1rem;
-}
-
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -2732,6 +2986,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(74 222 128 / var(--tw-text-opacity));
 }
 
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -2766,6 +3025,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: transparent;
 }
 
+.text-cyan-800 {
+  --tw-text-opacity: 1;
+  color: rgb(21 94 117 / var(--tw-text-opacity));
+}
+
+.text-indigo-400 {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
 .text-pink-500 {
   --tw-text-opacity: 1;
   color: rgb(236 72 153 / var(--tw-text-opacity));
@@ -2781,19 +3055,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(20 184 166 / var(--tw-text-opacity));
 }
 
-.text-red-400 {
+.text-yellow-300 {
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
-}
-
-.text-cyan-300 {
-  --tw-text-opacity: 1;
-  color: rgb(103 232 249 / var(--tw-text-opacity));
-}
-
-.text-cyan-800 {
-  --tw-text-opacity: 1;
-  color: rgb(21 94 117 / var(--tw-text-opacity));
+  color: rgb(253 224 71 / var(--tw-text-opacity));
 }
 
 .underline {
@@ -2856,6 +3120,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(31 41 55 / var(--tw-placeholder-opacity));
 }
 
+.placeholder-gray-600::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-600:-ms-input-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-600::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-placeholder-opacity));
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -2906,6 +3185,46 @@ 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-slate-600 {
+  --tw-shadow-color: #475569;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-slate-300 {
+  --tw-shadow-color: #cbd5e1;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-cyan-300 {
+  --tw-shadow-color: #67e8f9;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-cyan-800 {
+  --tw-shadow-color: #155e75;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-cyan-500 {
+  --tw-shadow-color: #06b6d4;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-orange-200 {
+  --tw-shadow-color: #fed7aa;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-orange-800 {
+  --tw-shadow-color: #9a3412;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-gray-800 {
+  --tw-shadow-color: #1f2937;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2917,9 +3236,9 @@ 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);
 }
 
-.drop-shadow-lg {
-  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+.ring-gray-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
 
 .drop-shadow-md {
@@ -2927,11 +3246,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.drop-shadow {
-  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .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);
 }
@@ -2958,6 +3272,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;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -2982,6 +3302,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   transition-duration: 500ms;
 }
 
+.duration-75 {
+  transition-duration: 75ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3059,6 +3383,53 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-opacity: 0.4;
 }
 
+.hover\:h-20:hover {
+  height: 5rem;
+}
+
+.hover\:w-80:hover {
+  width: 20rem;
+}
+
+.hover\:w-20:hover {
+  width: 5rem;
+}
+
+.hover\:translate-x-1:hover {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:translate-y-1:hover {
+  --tw-translate-y: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:translate-y-\[-2\]:hover {
+  --tw-translate-y: -2;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:translate-y-2:hover {
+  --tw-translate-y: 0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:translate-x-0:hover {
+  --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));
+}
+
+.hover\:translate-y-0:hover {
+  --tw-translate-y: 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));
+}
+
+.hover\:translate-y-5:hover {
+  --tw-translate-y: 1.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-green-700:hover {
   --tw-border-opacity: 1;
   border-color: rgb(21 128 61 / var(--tw-border-opacity));
@@ -3069,6 +3440,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.hover\:border-blue-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -3094,6 +3470,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(126 34 206 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
@@ -3104,11 +3485,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-purple-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(147 51 234 / var(--tw-bg-opacity));
@@ -3163,6 +3539,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-900:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-purple-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-yellow-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -3173,6 +3564,25 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-cyan-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-cover:hover {
+  background-size: cover;
+}
+
 .hover\:text-purple-200:hover {
   --tw-text-opacity: 1;
   color: rgb(233 213 255 / var(--tw-text-opacity));
@@ -3283,11 +3693,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(234 179 8 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .hover\:text-black:hover {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.hover\:text-pink-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(219 39 119 / var(--tw-text-opacity));
+}
+
+.hover\:text-red-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
 .hover\:text-purple-500:hover {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity));
@@ -3303,19 +3728,29 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.hover\:text-red-400:hover {
+.hover\:text-gray-100:hover {
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
-.hover\:text-blue-500:hover {
+.hover\:text-blue-600:hover {
   --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
+  color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
-.hover\:text-pink-600:hover {
+.hover\:text-gray-200:hover {
   --tw-text-opacity: 1;
-  color: rgb(219 39 119 / var(--tw-text-opacity));
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.hover\:text-yellow-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 240 138 / var(--tw-text-opacity));
+}
+
+.hover\:text-yellow-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(202 138 4 / var(--tw-text-opacity));
 }
 
 .hover\:text-opacity-75:hover {
@@ -3355,6 +3790,45 @@ 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\:ring: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(3px + 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);
+}
+
+.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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.hover\:ring-0: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(0px + 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);
+}
+
+.hover\:ring-gray-800:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
+}
+
+.hover\:transition:hover {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.hover\:duration-500:hover {
+  transition-duration: 500ms;
+}
+
+.focus\:border-b-2:focus {
+  border-bottom-width: 2px;
+}
+
 .focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
@@ -3389,6 +3863,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(202 138 4 / var(--tw-border-opacity));
 }
 
+.focus\:border-blue-400:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+}
+
+.focus\:border-gray-600:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .focus\:bg-transparent:focus {
   background-color: transparent;
 }
@@ -3398,6 +3887,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .focus\:bg-purple-600:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(147 51 234 / var(--tw-bg-opacity));
@@ -3408,9 +3902,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
-.focus\:bg-white:focus {
+.focus\:bg-gray-200:focus {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
 .focus\:text-white:focus {
@@ -3418,6 +3912,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.focus\:text-gray-600:focus {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.focus\:text-gray-700:focus {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .focus\:underline:focus {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -3483,16 +3987,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-gray-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-teal-400:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(45 212 191 / var(--tw-ring-opacity));
@@ -3503,6 +3997,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-gray-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-opacity-40:focus {
   --tw-ring-opacity: 0.4;
 }
@@ -3511,6 +4015,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-opacity: 0.8;
 }
 
+.focus\:ring-opacity-25:focus {
+  --tw-ring-opacity: 0.25;
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
@@ -3524,6 +4032,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
+.active\:bg-teal-400:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(45 212 191 / var(--tw-bg-opacity));
+}
+
 .active\:bg-blue-500:active {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -3534,9 +4047,45 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
 }
 
-.active\:bg-teal-400:active {
+.active\:bg-purple-600:active {
   --tw-bg-opacity: 1;
-  background-color: rgb(45 212 191 / var(--tw-bg-opacity));
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
+}
+
+.active\:bg-gray-200:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.active\:text-gray-300:active {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:block {
+  display: block;
+}
+
+.group:hover .group-hover\:cursor-pointer {
+  cursor: pointer;
+}
+
+.group:hover .group-hover\:rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.group:hover .group-hover\:border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.group:hover .group-hover\:bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
 }
 
 .dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
@@ -3567,14 +4116,23 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
 
+.dark .dark\:border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .dark .dark\:border-gray-50 {
   --tw-border-opacity: 1;
   border-color: rgb(249 250 251 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-white {
+.dark .dark\:border-transparent {
+  border-color: transparent;
+}
+
+.dark .dark\:border-yellow-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
 }
 
 .dark .dark\:bg-emerald-900 {
@@ -3647,6 +4205,56 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-cyan-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-yellow-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(133 77 14 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-cyan-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 94 117 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-cyan-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 116 144 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-lime-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(77 124 15 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-amber-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(180 83 9 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-amber-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-amber-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-cyan-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -3702,6 +4310,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   fill: #d1d5db;
 }
 
+.dark .dark\:stroke-red-500 {
+  stroke: #ef4444;
+}
+
+.dark .dark\:stroke-red-400 {
+  stroke: #f87171;
+}
+
 .dark .dark\:p-1 {
   padding: 0.25rem;
 }
@@ -3794,29 +4410,74 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(167 139 250 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-cyan-600 {
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-cyan-500 {
+  --tw-text-opacity: 1;
+  color: rgb(6 182 212 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-indigo-400 {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-cyan-400 {
   --tw-text-opacity: 1;
   color: rgb(34 211 238 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-green-400 {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-cyan-600 {
+.dark .dark\:text-green-500 {
   --tw-text-opacity: 1;
-  color: rgb(8 145 178 / var(--tw-text-opacity));
+  color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-red-300 {
+.dark .dark\:text-green-100 {
   --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
+  color: rgb(220 252 231 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-yellow-200 {
+  --tw-text-opacity: 1;
+  color: rgb(254 240 138 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-yellow-300 {
+  --tw-text-opacity: 1;
+  color: rgb(253 224 71 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
 .dark .dark\:placeholder-white::-moz-placeholder {
@@ -3834,12 +4495,45 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(255 255 255 / var(--tw-placeholder-opacity));
 }
 
+.dark .dark\:placeholder-gray-300::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-placeholder-opacity));
+}
+
+.dark .dark\:placeholder-gray-300:-ms-input-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-placeholder-opacity));
+}
+
+.dark .dark\:placeholder-gray-300::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-placeholder-opacity));
+}
+
+.dark .dark\:opacity-80 {
+  opacity: 0.8;
+}
+
+.dark .dark\:opacity-50 {
+  opacity: 0.5;
+}
+
+.dark .dark\:opacity-20 {
+  opacity: 0.2;
+}
+
 .dark .dark\:ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.dark .dark\:ring {
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .dark .dark\:ring-green-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
@@ -3855,6 +4549,41 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
 }
 
+.dark .dark\:ring-cyan-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:placeholder\:border-yellow-300::-moz-placeholder {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+}
+
+.dark .dark\:placeholder\:border-yellow-300:-ms-input-placeholder {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+}
+
+.dark .dark\:placeholder\:border-yellow-300::placeholder {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+}
+
+.dark .dark\:placeholder\:text-red-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
+.dark .dark\:placeholder\:text-red-400:-ms-input-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
+.dark .dark\:placeholder\:text-red-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
 .dark .dark\:focus-within\:border-blue-300:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -3870,6 +4599,30 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:hover\:bg-cyan-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-indigo-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-cyan-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-gray-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:stroke-cyan-400:hover {
+  stroke: #22d3ee;
+}
+
 .dark .dark\:hover\:text-purple-500:hover {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity));
@@ -3940,16 +4693,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(103 232 249 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-gray-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:text-gray-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:text-blue-500:hover {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -3965,26 +4708,87 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(219 39 119 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-gray-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hover\:text-gray-800:hover {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-red-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-cyan-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / 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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .dark .dark\:hover\:ring-purple-400:hover {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity));
 }
 
+.dark .dark\:hover\:ring-cyan-300:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
+}
+
 .dark .dark\:focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
+.dark .dark\:focus\:border-blue-300:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+}
+
+.dark .dark\:focus\:border-gray-300:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.dark .dark\:focus\:border-b-red-400:focus {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(248 113 113 / var(--tw-border-opacity));
+}
+
+.dark .focus\:dark\:bg-gray-900:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:focus\:text-white:focus {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:focus\:text-gray-400:focus {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.dark .dark\:focus\:text-cyan-600:focus {
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / var(--tw-text-opacity));
+}
+
 .dark .dark\:focus\:ring-indigo-900:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(49 46 129 / var(--tw-ring-opacity));
@@ -4022,6 +4826,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 0px;
   }
 
+  .sm\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
   .sm\:my-5 {
     margin-top: 1.25rem;
     margin-bottom: 1.25rem;
@@ -4047,6 +4856,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: 1rem;
   }
 
+  .sm\:ml-0 {
+    margin-left: 0px;
+  }
+
   .sm\:-mr-20 {
     margin-right: -5rem;
   }
@@ -4079,10 +4892,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 2.5rem;
   }
 
-  .sm\:ml-0 {
-    margin-left: 0px;
-  }
-
   .sm\:block {
     display: block;
   }
@@ -4342,6 +5151,10 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 
 @media (min-width: 768px) {
+  .md\:static {
+    position: static;
+  }
+
   .md\:absolute {
     position: absolute;
   }
@@ -4392,14 +5205,39 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: -2rem;
   }
 
+  .md\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .md\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
+  .md\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
   .md\:my-0 {
     margin-top: 0px;
     margin-bottom: 0px;
   }
 
-  .md\:my-6 {
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
+  .md\:mx-2 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .md\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .md\:mx-1 {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
   }
 
   .md\:mr-2 {
@@ -4458,6 +5296,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: auto;
   }
 
+  .md\:mr-0 {
+    margin-right: 0px;
+  }
+
   .md\:ml-12 {
     margin-left: 3rem;
   }
@@ -4506,6 +5348,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 100%;
   }
 
+  .md\:h-5 {
+    height: 1.25rem;
+  }
+
   .md\:h-24 {
     height: 6rem;
   }
@@ -4546,6 +5392,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 100%;
   }
 
+  .md\:w-5\/12 {
+    width: 41.666667%;
+  }
+
+  .md\:w-2\/12 {
+    width: 16.666667%;
+  }
+
   .md\:w-3\/6 {
     width: 50%;
   }
@@ -4562,14 +5416,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 83.333333%;
   }
 
-  .md\:w-5\/12 {
-    width: 41.666667%;
-  }
-
-  .md\:w-2\/12 {
-    width: 16.666667%;
-  }
-
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -4590,6 +5436,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 24rem;
   }
 
+  .md\:max-w-3xl {
+    max-width: 48rem;
+  }
+
   .md\:max-w-6xl {
     max-width: 72rem;
   }
@@ -4686,6 +5536,12 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .md\:divide-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-x-reverse: 0;
     border-right-width: calc(2px * var(--tw-divide-x-reverse));
@@ -4811,6 +5667,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 8rem;
   }
 
+  .md\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .md\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
   .md\:px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -4950,6 +5816,12 @@ Ensure the default browser behavior of the `hidden` attribute.
     color: rgb(29 78 216 / var(--tw-text-opacity));
   }
 
+  .md\: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);
+  }
+
   .md\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -4982,6 +5854,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     position: relative;
   }
 
+  .lg\:left-1\/2 {
+    left: 50%;
+  }
+
   .lg\:order-last {
     order: 9999;
   }
@@ -5019,6 +5895,21 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 0px;
   }
 
+  .lg\:-mx-4 {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+
+  .lg\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .lg\:-mx-2 {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
   .lg\:mt-0 {
     margin-top: 0px;
   }
@@ -5163,6 +6054,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 20%;
   }
 
+  .lg\:w-56 {
+    width: 14rem;
+  }
+
   .lg\:w-screen {
     width: 100vw;
   }
@@ -5195,6 +6090,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 56rem;
   }
 
+  .lg\:max-w-5xl {
+    max-width: 64rem;
+  }
+
   .lg\:flex-1 {
     flex: 1 1 0%;
   }
@@ -5203,6 +6102,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     flex-grow: 1;
   }
 
+  .lg\:-translate-x-1\/2 {
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   .lg\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
@@ -5289,6 +6193,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .lg\:space-x-16 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(4rem * var(--tw-space-x-reverse));
+    margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .lg\:border-transparent {
+    border-color: transparent;
+  }
+
   .lg\:bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -5307,6 +6221,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 2rem;
   }
 
+  .lg\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
   .lg\:px-20 {
     padding-left: 5rem;
     padding-right: 5rem;
@@ -5322,6 +6241,21 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 8rem;
   }
 
+  .lg\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .lg\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .lg\:px-40 {
+    padding-left: 10rem;
+    padding-right: 10rem;
+  }
+
   .lg\:py-24 {
     padding-top: 6rem;
     padding-bottom: 6rem;
@@ -5337,11 +6271,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 1.25rem;
   }
 
-  .lg\:px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .lg\:pl-12 {
     padding-left: 3rem;
   }
@@ -5406,6 +6335,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1.5rem;
   }
 
+  .lg\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
   .lg\:text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -5468,6 +6402,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 48rem;
   }
 
+  .xl\:max-w-7xl {
+    max-width: 80rem;
+  }
+
   .xl\:max-w-6xl {
     max-width: 72rem;
   }
@@ -5484,6 +6422,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     flex-direction: row;
   }
 
+  .xl\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
   .xl\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
@@ -5499,11 +6442,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 10rem;
   }
 
-  .xl\:px-20 {
-    padding-left: 5rem;
-    padding-right: 5rem;
-  }
-
   .xl\:pt-8 {
     padding-top: 2rem;
   }
diff --git a/public/componets/footer/footer.html b/public/componets/footer/footer.html
index f507454..722eefc 100644
--- a/public/componets/footer/footer.html
+++ b/public/componets/footer/footer.html
@@ -4568,7 +4568,6 @@
         })
     </script>
     <!-- end of script section -->
-    
 
 </body>
 </html>
\ No newline at end of file
diff --git a/public/componets/hero/1.html b/public/componets/hero/1.html
deleted file mode 100755
index 0f29244..0000000
--- a/public/componets/hero/1.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!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">
-    <title>Document</title>
-    <link rel="stylesheet" href="./../../../dist/tailshape.css">
-</head>
-<body>
-    <!--
-  Welcome to Tailwind Play, the official Tailwind CSS playground!
-
-  Everything here works just like it does when you're running Tailwind locally
-  with a real build pipeline. You can customize your config file, use features
-  like `@apply`, or even add third-party plugins.
-
-  Feel free to play with this example if you're just learning, or trash it and
-  start from scratch if you know enough to be dangerous. Have fun!
--->
-<section class="text-gray-600 body-font">
-    <div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
-      <img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600">
-      <div class="text-center lg:w-2/3 w-full">
-        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Microdosing synth tattooed vexillologist</h1>
-        <p class="mb-8 leading-relaxed">
-          Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps hexagon mustache umami snackwave tilde chillwave
-          ugh. Pour-over meditation PBR&amp;B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.
-        </p>
-        <div class="flex justify-center">
-          <button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
-          <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Button</button>
-        </div>
-      </div>
-    </div>
-</section>
-
-  
-</body>
-</html>
\ No newline at end of file
diff --git a/public/componets/hero/10_hero.html b/public/componets/hero/10_hero.html
new file mode 100644
index 0000000..8641120
--- /dev/null
+++ b/public/componets/hero/10_hero.html
@@ -0,0 +1,71 @@
+<!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">
+    <title>Hero 10</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+
+    <!-- hero 10 start -->
+    <section class="section_divider">
+        <div>Hero 10</div>
+      </section>
+          
+      <section class=" dark:bg-gray-800">
+        <div class="max-w-7xl  px-4 py-24 grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
+          <div class="col-auto text-center md:col-span-7 lg:text-left">
+            <h1 class="mb-4 text-3xl font-bold leading-tight text-gray-900 dark:text-yellow-300 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready to start your journey?</h1>
+            <p class="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
+              Low-latency voice and video feels like you’re in the same room. Wave hello over video, watch friends stream their games, or gather up and have a drawing session with screen share.
+            </p>
+          </div>
+          <div class="col-auto md:col-span-4">
+            <form class="mb-6 border-0 rounded-lg shadow-xl ">
+              <div class="text-center  text-gray-700 dark:text-yellow-200 uppercase font-semibold mb-4 border-0 card-header">
+                <p class="pt-2"> talk with us</p>
+              </div>
+              <div class="grid">
+                <label class="mx-auto ">
+                  <span class="sr-only">First Name</span>
+                  <input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300" type="text" placeholder="First Name" required="true" />
+                </label>
+                <label class="mx-auto">
+                  <span class="sr-only">Email Address</span>
+                  <input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300 " type="email" placeholder="Email Address" required="true" />
+                </label>
+                <label class="mx-auto">
+                  <span class="sr-only">Password</span>
+                  <input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300" type="password" placeholder="Password" required="true" />
+                </label>
+  
+                <div class="px-6 py-4 ">
+                  <button class="w-full py-2 rounded-lg bg-gray-800 text-gray-300  dark:text-gray-800 dark:bg-yellow-400" type="submit">Sign up for free</button>
+                </div>
+              </div>
+  
+  
+              <div class="px-6 py-4 ">
+                <button class="w-full py-2 rounded-lg bg-blue-500 hover:bg-blue-400">
+                  Continue with Google
+                </button>
+              </div>
+            </form>
+            <p class="text-xs text-center text-gray-600 dark:text-yellow-300">By signing up you agree to our <a href="#" class="text-primary">Terms of Service</a></p>
+          </div>
+        </div>
+      </section>
+      
+      <!-- hero 10 end -->
+  
+      
+
+
+
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/11_hero.html b/public/componets/hero/11_hero.html
new file mode 100644
index 0000000..2587a95
--- /dev/null
+++ b/public/componets/hero/11_hero.html
@@ -0,0 +1,39 @@
+<!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">
+    <title>Hero 11</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+
+    
+    <!-- hero 11 start -->
+    <section class="section_divider">
+        <div>Hero 11</div>
+      </section>
+      
+      <section class=" dark:bg-gray-800">
+          <div class=" px-4 py-32 mx-auto max-w-7xl w-full lg:w-8/12 xl:w-5/12">
+            <p class="mb-2 text-xs font-semibold tracking-wide text-gray-400 uppercase">For Developers</p>
+            <h1 class="mb-3 text-3xl font-bold leading-tight text-gray-900 dark:text-cyan-300 md:text-4xl">Focus on your apps</h1>
+            <p class="mb-5 text-base text-gray-500 md:text-lg">
+              Today every company needs apps to engage their customers and run their businesses. Step up your ability to build, manage, and deploy great apps at scale with us.
+            </p>
+            <a href="#" class="w-full mb-2 rounded-lg px-2 py-2 hover:ring-2 hover:ring-gray-800 hover:bg-gray-200 hover:text-gray-800 bg-gray-800  text-gray-300 dark:text-cyan-300 dark:ring-2 dark:ring-cyan-300 dark:hover:bg-cyan-300 dark:hover:text-gray-800 mr-6 sm:w-auto sm:mb-0">Sign up for free</a>
+            <a href="#" class="w-full mb-2 rounded-lg px-2 py-2 ring-2 ring-gray-800 hover:bg-gray-800 hover:ring-0 hover:text-gray-300 dark:text-gray-800 dark:bg-cyan-300 dark:hover:text-cyan-300 dark:hover:ring-2 dark:hover:ring-cyan-300 dark:hover:bg-gray-800 sm:w-auto sm:mb-0">Read our blog</a>
+          </div>
+      </section>
+  
+      <!-- hero 11 end -->
+  
+
+
+
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/1_hero.html b/public/componets/hero/1_hero.html
new file mode 100755
index 0000000..c0d3aa5
--- /dev/null
+++ b/public/componets/hero/1_hero.html
@@ -0,0 +1,39 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+  
+    <!-- hero 1 start -->
+    <section class="section_divider" id="hero_1">
+      <div>Hero 1</div>
+    </section>
+
+    <section class="text-gray-600 dark:bg-gray-800 body-font">
+        <div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
+          <img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600">
+          <div class="text-center lg:w-2/3 w-full">
+            <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-cyan-300">Microdosing synth tattooed vexillologist</h1>
+            <p class="mb-8 leading-relaxed">
+              Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps hexagon mustache umami snackwave tilde chillwave
+              ugh. Pour-over meditation PBR&amp;B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.
+            </p>
+            <div class="flex justify-center">
+              <button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none dark:hover:bg-cyan-400 dark:hover:text-gray-800 hover:bg-indigo-600 rounded text-lg">Button</button>
+              <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 dark:bg-cyan-400 rounded dark:hover:bg-indigo-600 dark:hover:text-gray-200 text-lg">Button</button>
+            </div>
+          </div>
+        </div>
+    </section>
+
+    <!-- hero 1 end -->
+
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/2_hero.html b/public/componets/hero/2_hero.html
new file mode 100644
index 0000000..bc7bcac
--- /dev/null
+++ b/public/componets/hero/2_hero.html
@@ -0,0 +1,76 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+
+
+    <!-- hero 2 start -->
+    <section class="section_divider" id="hero_2">
+        <div>Hero 2</div>
+      </section>
+          
+      <div class="relative flex flex-col items-center justify-center min-h-screen dark:bg-gray-800 bg-white bg-cover min-w-screen">
+          <div class="flex flex-col items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
+              <div
+                  class="container relative z-20 flex flex-col w-full px-5 pb-1 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
+                  <h1
+                      class="relative z-20 text-5xl font-extrabold leading-none text-purple-500 xl:text-6xl sm:text-center lg:text-left">
+                      Designed with<br class="md:hidden lg:block"> <span class="text-gray-800">you in mind</span></h1>
+                  <p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-xl sm:text-center lg:text-left">We've
+                      crafted
+                      the ultimate design tool that will help you build the design of your dreams. Built with configuration in
+                      mind,
+                      you can fully customize every aspect.</p>
+                  <div class="relative flex mt-4">
+                      <a href="#_"
+                          class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-purple-500 border border-transparent rounded-full shadow hover:bg-purple-600 focus:outline-none focus:border-purple-600 focus:shadow-outline-purple md:py-4 md:text-lg xl:text-xl md:px-10">Get
+                          Started</a>
+                      <a href="#_"
+                          class="relative flex items-center self-start justify-center py-3 pl-10 pr-5 mt-5 ml-5 text-base font-medium leading-tight text-gray-400 transition duration-150 ease-in-out bg-gray-100 border-transparent rounded-full shadow-sm md:pl-16 md:pr-10 hover:text-purple-500 focus:outline-none md:py-4 md:text-lg xl:text-xl">
+                          <svg class="absolute left-0 w-6 h-6 ml-3 md:w-10 md:h-10" 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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+                                  clip-rule="evenodd"></path>
+                          </svg>
+                          <span class="text-purple-500">How It Works</span>
+                      </a>
+                  </div>
+              </div>
+              <div class="relative w-full px-5 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group xl:px-0">
+                  <div class="absolute top-0 left-0 w-11/12 -mt-20 opacity-50">
+                      <svg class="w-full h-full ml-4 text-purple-100 dark:text-gray-700" viewBox="0 0 200 200"
+                          xmlns="http://www.w3.org/2000/svg">
+                          <path fill="currentColor"
+                              d="M45,-78C58.3,-70.3,69,-58.2,75.2,-44.4C81.3,-30.7,82.9,-15.3,83.5,0.4C84.2,16,83.8,32.1,76.5,43.9C69.2,55.7,55.1,63.3,41.2,69.4C27.3,75.4,13.6,80,-0.7,81.2C-15.1,82.5,-30.1,80.3,-41.2,72.6C-52.2,64.9,-59.2,51.6,-67.1,38.5C-75.1,25.5,-83.9,12.8,-83.8,0C-83.8,-12.7,-74.9,-25.4,-65.8,-36.4C-56.7,-47.4,-47.4,-56.7,-36.4,-65.7C-25.4,-74.7,-12.7,-83.5,1.6,-86.2C15.9,-89,31.8,-85.7,45,-78Z"
+                              transform="translate(100 100)" />
+                      </svg>
+                  </div>
+                  <div class="relative overflow-hidden rounded-md shadow-2xl cursor-pointer group">
+                      <div class="absolute flex items-center justify-center w-full h-full">
+                          <span class="flex items-center justify-center w-20 h-20 bg-purple-500 rounded-full shadow-2xl">
+                              <svg class="w-auto h-8 ml-1 text-white fill-current" viewBox="0 0 52 66"
+                                  xmlns="http://www.w3.org/2000/svg">
+                                  <path
+                                      d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
+                                      fill-rule="nonzero" /></svg>
+                          </span>
+                      </div>
+                      <img src="https://images.unsplash.com/photo-1493857671505-72967e2e2760?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&h=1603&q=80"
+                          class="z-10 object-cover w-full h-full">
+                  </div>
+              </div>
+          </div>
+      </div>
+  
+      <!-- hero 2 end -->
+</body>
+</html>  
\ No newline at end of file
diff --git a/public/componets/hero/3_hero.html b/public/componets/hero/3_hero.html
new file mode 100644
index 0000000..63945de
--- /dev/null
+++ b/public/componets/hero/3_hero.html
@@ -0,0 +1,58 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+    <!-- hero 3 start -->
+    <section class="section_divider">
+        <div>Hero 3</div>
+      </section>
+      
+      <div class="relative flex flex-col items-center justify-center min-h-screen bg-cover min-w-screen"
+          style="background-image:url('https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80')">
+          <div class="absolute inset-0 w-full h-full bg-black bg-opacity-75"></div>
+  
+          <div class="flex max-w-6xl mx-auto">
+              <div class="container relative flex flex-col w-1/2 px-10 pb-1 pr-12 text-2xl font-hairline text-white">
+                  <h2 class="relative z-20 text-5xl font-extrabold leading-tight text-white">Build a culture<br> that excels
+                  </h2>
+                  <p class="relative z-20 block mt-4 text-xl">We've created the ultimate resource for turning your culture
+                      into a
+                      super-powered productivity machine by encouraging collaboration growth, and incentives!</p>
+                  <div class="flex mt-4">
+                      <a href="#_"
+                          class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-lg shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-8">Get
+                          Started</a>
+                      <a href="#_"
+                          class="flex items-center self-start justify-center px-5 py-3 mt-5 ml-5 text-base font-medium leading-tight text-indigo-500 transition duration-150 ease-in-out bg-gray-200 border-transparent rounded-lg shadow hover:bg-white focus:outline-none focus:border-gray-100 focus:shadow-outline-gray md:py-4 md:text-lg md:px-8">How
+                          It Works</a>
+                  </div>
+              </div>
+              <div class="relative w-1/2 overflow-hidden rounded-lg shadow-2xl cursor-pointer group">
+                  <div class="absolute flex items-center justify-center w-full h-full bg-black bg-opacity-25">
+                      <span class="flex items-center justify-center w-20 h-20 bg-white bg-opacity-75 rounded-full">
+                          <svg class="w-auto h-8 ml-1 text-indigo-600 fill-current" viewBox="0 0 52 66"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
+                                  fill-rule="nonzero" /></svg>
+                      </span>
+                  </div>
+                  <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3290&q=80"
+                      class="object-cover w-full h-full">
+              </div>
+          </div>
+      </div>
+  
+      <!-- hero 3 end -->
+  
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/4_hero.html b/public/componets/hero/4_hero.html
new file mode 100644
index 0000000..81420ba
--- /dev/null
+++ b/public/componets/hero/4_hero.html
@@ -0,0 +1,47 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+    <!-- hero 4 start -->
+    <section class="section_divider">
+        <div>Hero 4</div>
+      </section>
+  
+      <div class="flex min-h-screen">
+          <section class="grid grid-cols-3 text-gray-900 bg-green-500 sm:grid-cols-2">
+              <div class="z-10 h-full col-span-2 sm:col-span-1 place-self-end">
+                  <div class="flex items-center w-full h-full">
+                      <div class="max-w-xs p-4 text-sm text-right sm:max-w-xl sm:p-10 sm:text-base lg:max-w-2xl">
+                          <h1 class="mb-10 -mr-12 text-2xl font-bold leading-tight text-white sm:-mr-20 sm:text-3xl md:text-4xl lg:text-5xl">
+                              We Deliver at your<br />
+                              Doorstep.
+                          </h1>
+                          <p class="mb-10 lg:pl-32">
+                              With our award-winning delivery service, our personnel delivers food directly to your doorstep. With your safety in mind, all deliveries are tracked and recorded.
+                          </p>
+                          <a href="#" class="px-1 pb-1 font-semibold uppercase transition-colors duration-500 border-b-4 border-gray-800 text-md hover:border-green-700 hover:text-white">Learn more</a>
+                      </div>
+                  </div>
+              </div>
+              <div class="min-h-full">
+                  <img class="object-cover w-full h-full"
+                      src="https://images.unsplash.com/photo-1559941727-6fb446e7e8ae?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=3936&h=2624&fit=crop&ixid=eyJhcHBfaWQiOjF9"
+                      alt="Food delivery worker on a bycicle" />
+              </div>
+          </section>
+      </div>
+  
+      <!-- hero 4 end -->
+  
+      
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/5_hero.html b/public/componets/hero/5_hero.html
new file mode 100644
index 0000000..e7054ff
--- /dev/null
+++ b/public/componets/hero/5_hero.html
@@ -0,0 +1,44 @@
+<!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">
+    <title>Hero 5</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+
+    
+    <!-- hero 5 start -->
+    <section class="section_divider" id="hero_2">
+        <div>Hero 5</div>
+      </section>
+              
+      <div class="relative h-screen lg:h-screen w-full bg-cover bg-no-repeat bg-[url(https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80)]">
+  
+          <!-- background overlay start -->
+          <div class="absolute inset-0 z-0 bg-gray-900 opacity-75"></div>
+          <!-- background overlay  end -->
+          <div class="h-full container mx-auto flex items-center justify-center">
+  
+              <div class="flex flex-col items-center z-10">
+                  <h1 class="mx-6 mt-1 text-xl font-bold text-center text-white md:text-6xl sm:text-center sm:mx-0">Here a really cool title!</h1>
+                  <p class="text-white text-xl font-medium w-2/3 text-center my-6">Some fancy text to invite to an event, the place of the event and the date of the event.</p>
+                  <div class="flex flex-col md:flex-row justify-center mt-10">
+                      <a href="#" class="py-2 px-8 rounded-full border-2 border-pink-500 text-white hover:bg-pink-500 text-center m-2">Tickets</a>
+                      <a href="#" class="py-2 px-8 rounded-full border-2 border-pink-500 text-white bg-pink-500 hover:bg-transparent text-center m-2">Coming soon</a>
+                  </div>
+              </div>
+  
+          </div>
+      </div>
+  
+      <!-- hero 5 end -->
+        
+
+</body>
+</html>
+
diff --git a/public/componets/hero/6_header.html b/public/componets/hero/6_header.html
new file mode 100644
index 0000000..5d53db4
--- /dev/null
+++ b/public/componets/hero/6_header.html
@@ -0,0 +1,58 @@
+<!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">
+    <title>Hero 6</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+    <!-- hero 6 start -->
+    <section class="section_divider">
+        <div>Hero 6</div>
+      </section>
+        
+      <div class="relative flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 bg-cover min-w-screen">
+          <div
+              class="flex flex-col  items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
+              <div class="relative w-full pr-10 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group">
+                  <div class="relative rounded-md">
+                      <img src="https://cdn.devdojo.com/images/september2020/grow-together.png"
+                          class="z-10 object-cover w-full h-full">
+                  </div>
+              </div>
+              <div
+                  class="container relative z-20 flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
+                  <h1
+                      class="relative z-20 font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
+                      <span class="relative">
+                          <span
+                              class="absolute bottom-0 left-0 inline-block w-full h-4 mb-1 -ml-1 transform -skew-x-3 bg-yellow-200 dark:bg-amber-50 dark:opacity-20"></span>
+                          <span class="relative">Learn Together,</span>
+                      </span>
+                      <span class="relative block text-yellow-400">Grow Together.</span>
+                  </h1>
+                  <p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-lg sm:text-center lg:text-left">Join our
+                      community and thrive with us! We can all help each other, learn together, and grow together.</p>
+                  <div class="relative flex items-center mt-10">
+                      <a href="#_"
+                          class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-yellow-500 border border-transparent rounded-lg shadow hover:bg-yellow-600 focus:outline-none focus:border-yellow-600 focus:shadow-outline-yellow md:py-4 md:text-lg xl:text-xl md:px-10">Get
+                          Started</a>
+                      <a href="#_"
+                          class="relative inline-block h-full ml-5 text-lg font-medium leading-tight text-gray-600 hover:text-yellow-600 dark:hover:text-gray-200 underline transition duration-150 ease-in-out border-transparent">
+                          Try Our Service for Free
+                      </a>
+                  </div>
+                  <p class="mt-6 text-xs text-gray-500 rounded-full">Already a member? <a href="#_"
+                          class="font-medium text-yellow-500 underline">Login Here</a></p>
+              </div>
+          </div>
+      </div>
+  
+      <!-- hero 6 end -->
+  
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/7_hero.html b/public/componets/hero/7_hero.html
new file mode 100644
index 0000000..87081ad
--- /dev/null
+++ b/public/componets/hero/7_hero.html
@@ -0,0 +1,47 @@
+<!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">
+    <title>Hero 6</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+    <!-- hero 7 start -->
+
+    <section class="section_divider">
+        <div>Hero 7</div>
+      </section>
+          
+      <div class="flex items-center justify-center min-h-screen bg-white dark:bg-gray-800 min-w-screen">
+          <div class="flex flex-col flex-col-reverse items-center justify-center mx-auto lg:flex-row lg:max-w-4xl lg:p-0">
+              <div class="container flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
+                  <h1 class="font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
+                      <span class="text-gray-800 dark:text-blue-400">Stay focused</span>
+                      <span class="block text-blue-400 dark:text-gray-200">and know yourself.</span>
+                  </h1>
+                  <p class="mt-6 text-base text-gray-600 xl:text-lg s">Your guide to mental health and happiness. How about
+                      try to meditate? Start to meditate just 5 min per day and see the results.</p>
+                  <div class="items-center justify-center m-10 rflex">
+                      <a href="#_" class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white bg-blue-800 border border-transparent rounded-lg shadow md:py-4 md:text-lg xl:text-xl md:px-10">
+                          Come with us
+                      </a>
+                  </div>
+              </div>
+              <div class="px-5 md:w-2/3 lg:w-1/2">
+                  <img src="https://images.unsplash.com/photo-1559941727-6fb446e7e8ae?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=3936&h=2624&fit=crop&ixid=eyJhcHBfaWQiOjF9"
+                      alt="Illustration of person meditating" class="object-cover w-full h-50 rounded-md shadow-lg shadow-gray-800  hover:translate-y-2 transition duration-500">
+              </div>
+          </div>
+      </div>
+      <!-- hero 7 end -->
+  
+
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/8_hero.html b/public/componets/hero/8_hero.html
new file mode 100644
index 0000000..701ac0f
--- /dev/null
+++ b/public/componets/hero/8_hero.html
@@ -0,0 +1,59 @@
+<!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">
+    <title>Hero 8</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+
+    <!-- hero 8 start -->
+    <section class="section_divider">
+        <div>Hero 8</div>
+      </section>
+  
+      <div class="flex items-center justify-between dark:bg-gray-800">
+          <div class="float-left h-full">
+              <div class="mx-16 my-6">
+                  <div class="py-2 text-6xl font-bold leading-none text-purple-700">
+                      <h1>Shopping <br>
+                          Made Easier!
+                      </h1>
+                  </div>
+                  <div>
+                      <p class="text-xl text-gray-600">
+                          We've designed the best shopping experience. <br>
+                          Now just one click away!
+                      </p>
+                  </div>
+                  <div class="my-10">
+                      <a href=#>
+                          <span class="p-4 px-6 font-medium text-white bg-green-500 border-4 border-transparent rounded-lg  hover:bg-green-600">Start Shopping</span>
+                      </a>
+                      <a href=#>
+                          <span class="p-4 px-8 mx-8 font-medium text-gray-700 bg-gray-300 border-4 border-transparent rounded-lg hover:bg-gray-500">Learn More</span>
+                      </a>
+                  </div>
+              </div>
+              <div>
+  
+              </div>
+          </div>
+          <div class="float-right px-20 my-8">
+              <img class="rounded-lg hover:translate-y-2 transition duration-300" src="https://images.unsplash.com/photo-1557860537-4ca8968f344e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=450&ixid=MnwxfDB8MXxyYW5kb218MHx8c2ltcGxlfHx8fHx8MTY0NTEwNDMyMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=400" alt="shopping">
+              <!-- <img src="https://source.unsplash.com/400x450/?simple" alt="shopping"> -->
+          </div>
+      </div>
+  
+      <!-- hero 8 end -->
+  
+
+
+
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/9_hero.html b/public/componets/hero/9_hero.html
new file mode 100644
index 0000000..e9ef5cc
--- /dev/null
+++ b/public/componets/hero/9_hero.html
@@ -0,0 +1,90 @@
+<!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">
+    <title>Hero 9</title>
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+</head>
+<body>
+
+
+    <!-- hero 9 start -->
+    <section class="section_divider">
+        <div>Hero 9</div>
+      </section>
+      
+      <section class="relative min-h-screen bg-gray-200 dark:bg-gray-800 rounded-lg min-w-screen animation-fade animation-delay">
+          <div class="container px-1 mx-auto sm:px-10 md:px-0">
+              <div class="flex flex-col items-center justify-center w-full md:flex-row">
+                  <div class="flex justify-center w-full md:max-w-md md:mr-8 lg:mr-12">
+                      <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+                      <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_1H7IW0.json"  background="transparent" class="max-w-md min-w-sm" speed="1" loop autoplay></lottie-player>
+                  </div>
+  
+                  <div class="w-full max-w-md px-4 pb-10 text-xs text-center md:pb-0 sm:text-sm lg:text-base md:max-w-lg md:w-full md:text-left">
+                      <h2 class="text-2xl font-bold leading-snug dark:text-gray-300 sm:text-3xl md:text-4xl lg:text-5xl md:leading-tight md:mt-10">
+                        Understanding the<br />
+                        customer journey.
+                      </h2>
+  
+                      <p class="mt-4 sm:mt-6 md:max-w-sm dark:text-purple-800">
+                        To succeed, one must have an unwavering desire to succeed amidst fear of failure.
+                      </p>
+  
+                      <button class="flex justify-center w-full max-w-xs py-4 mx-auto mt-10 text-sm font-semibold text-black transition-colors duration-100 bg-orange-500 rounded hover:bg-purple-600 hover:text-white focus:bg-purple-600 focus:text-white md:max-w-sm md:mx-0">
+                        Start your 14 day FREE Trial
+                      </button>
+  
+                      <hr class="my-10 border-2" />
+  
+                      <p class="text-gray-700 dark:text-gray-300 text-md">
+                        “Our conversion rates have gone up 12% since we start using this platform! I highly recommend using this tool.”
+                      </p>
+  
+                      <div class="mt-4">
+                          <div class="self-center font-semibold text-gray-900 dark:text-purple-800">Jane Doe, CTO of SomeCompany</div>
+                          <div class="flex justify-center mt-3 md:justify-start">
+                              <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                  <g class="nc-icon-wrapper" fill="currentColor">
+                                      <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                  </g>
+                              </svg>
+                              <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                  <g class="nc-icon-wrapper" fill="currentColor">
+                                      <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                  </g>
+                              </svg>
+                              <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                  <g class="nc-icon-wrapper" fill="currentColor">
+                                      <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                  </g>
+                              </svg>
+                              <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                  <g class="nc-icon-wrapper" fill="currentColor">
+                                      <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                  </g>
+                              </svg>
+                              <svg class="w-8 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                  <g class="nc-icon-wrapper" fill="currentColor">
+                                      <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                  </g>
+                              </svg>
+                          </div>
+                      </div>
+                  </div>
+  
+              </div>
+          </div>
+      </section>
+  
+      <!-- hero 9 end -->
+  
+
+
+
+
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/hero/hero.html b/public/componets/hero/hero.html
index d07d2ba..73f8271 100644
--- a/public/componets/hero/hero.html
+++ b/public/componets/hero/hero.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" >
+<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,574 +8,633 @@
     <link rel="stylesheet" href="./../../../dist/tailshape.css">
 </head>
 <body>
-    <!--
-  Welcome to Tailwind Play, the official Tailwind CSS playground!
 
-  Everything here works just like it does when you're running Tailwind locally
-  with a real build pipeline. You can customize your config file, use features
-  like `@apply`, or even add third-party plugins.
+  <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+    d
+  </button>
 
-  Feel free to play with this example if you're just learning, or trash it and
-  start from scratch if you know enough to be dangerous. Have fun!
--->
-<section class="text-gray-600 body-font">
-    <div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
-      <img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600">
-      <div class="text-center lg:w-2/3 w-full">
-        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Microdosing synth tattooed vexillologist</h1>
-        <p class="mb-8 leading-relaxed">
-          Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps hexagon mustache umami snackwave tilde chillwave
-          ugh. Pour-over meditation PBR&amp;B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.
-        </p>
-        <div class="flex justify-center">
-          <button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
-          <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Button</button>
-        </div>
-      </div>
-    </div>
-</section>
-<hr>
-<div class="relative flex flex-col items-center justify-center min-h-screen bg-white bg-cover min-w-screen">
-    <div class="flex flex-col items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
-        <div
-            class="container relative z-20 flex flex-col w-full px-5 pb-1 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
-            <h1
-                class="relative z-20 text-5xl font-extrabold leading-none text-purple-500 xl:text-6xl sm:text-center lg:text-left">
-                Designed with<br class="md:hidden lg:block"> <span class="text-gray-800">you in mind</span></h1>
-            <p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-xl sm:text-center lg:text-left">We've
-                crafted
-                the ultimate design tool that will help you build the design of your dreams. Built with configuration in
-                mind,
-                you can fully customize every aspect.</p>
-            <div class="relative flex mt-4">
-                <a href="#_"
-                    class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-purple-500 border border-transparent rounded-full shadow hover:bg-purple-600 focus:outline-none focus:border-purple-600 focus:shadow-outline-purple md:py-4 md:text-lg xl:text-xl md:px-10">Get
-                    Started</a>
-                <a href="#_"
-                    class="relative flex items-center self-start justify-center py-3 pl-10 pr-5 mt-5 ml-5 text-base font-medium leading-tight text-gray-400 transition duration-150 ease-in-out bg-gray-100 border-transparent rounded-full shadow-sm md:pl-16 md:pr-10 hover:text-purple-500 focus:outline-none md:py-4 md:text-lg xl:text-xl">
-                    <svg class="absolute left-0 w-6 h-6 ml-3 md:w-10 md:h-10" 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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
-                            clip-rule="evenodd"></path>
-                    </svg>
-                    <span class="text-purple-500">How It Works</span>
-                </a>
+
+    <!-- hero 1 start -->
+    <section class="section_divider" id="hero_1">
+      <div>Hero 1</div>
+    </section>
+
+    <section class="text-gray-600 dark:bg-gray-800 body-font">
+        <div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
+          <img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600">
+          <div class="text-center lg:w-2/3 w-full">
+            <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-cyan-300">Microdosing synth tattooed vexillologist</h1>
+            <p class="mb-8 leading-relaxed">
+              Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps hexagon mustache umami snackwave tilde chillwave
+              ugh. Pour-over meditation PBR&amp;B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.
+            </p>
+            <div class="flex justify-center">
+              <button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none dark:hover:bg-cyan-400 dark:hover:text-gray-800 hover:bg-indigo-600 rounded text-lg">Button</button>
+              <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 dark:bg-cyan-400 rounded dark:hover:bg-indigo-600 dark:hover:text-gray-200 text-lg">Button</button>
             </div>
+          </div>
         </div>
-        <div class="relative w-full px-5 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group xl:px-0">
-            <div class="absolute top-0 left-0 w-11/12 -mt-20 opacity-50">
-                <svg class="w-full h-full ml-4 text-purple-100" viewBox="0 0 200 200"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path fill="currentColor"
-                        d="M45,-78C58.3,-70.3,69,-58.2,75.2,-44.4C81.3,-30.7,82.9,-15.3,83.5,0.4C84.2,16,83.8,32.1,76.5,43.9C69.2,55.7,55.1,63.3,41.2,69.4C27.3,75.4,13.6,80,-0.7,81.2C-15.1,82.5,-30.1,80.3,-41.2,72.6C-52.2,64.9,-59.2,51.6,-67.1,38.5C-75.1,25.5,-83.9,12.8,-83.8,0C-83.8,-12.7,-74.9,-25.4,-65.8,-36.4C-56.7,-47.4,-47.4,-56.7,-36.4,-65.7C-25.4,-74.7,-12.7,-83.5,1.6,-86.2C15.9,-89,31.8,-85.7,45,-78Z"
-                        transform="translate(100 100)" />
-                </svg>
-            </div>
-            <div class="relative overflow-hidden rounded-md shadow-2xl cursor-pointer group">
-                <div class="absolute flex items-center justify-center w-full h-full">
-                    <span class="flex items-center justify-center w-20 h-20 bg-purple-500 rounded-full shadow-2xl">
-                        <svg class="w-auto h-8 ml-1 text-white fill-current" viewBox="0 0 52 66"
+    </section>
+
+    <!-- hero 1 end -->
+
+    <!-- hero 2 start -->
+    <section class="section_divider" id="hero_2">
+      <div>Hero 2</div>
+    </section>
+        
+    <div class="relative flex flex-col items-center justify-center min-h-screen dark:bg-gray-800 bg-white bg-cover min-w-screen">
+        <div class="flex flex-col items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
+            <div
+                class="container relative z-20 flex flex-col w-full px-5 pb-1 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
+                <h1
+                    class="relative z-20 text-5xl font-extrabold leading-none text-purple-500 xl:text-6xl sm:text-center lg:text-left">
+                    Designed with<br class="md:hidden lg:block"> <span class="text-gray-800">you in mind</span></h1>
+                <p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-xl sm:text-center lg:text-left">We've
+                    crafted
+                    the ultimate design tool that will help you build the design of your dreams. Built with configuration in
+                    mind,
+                    you can fully customize every aspect.</p>
+                <div class="relative flex mt-4">
+                    <a href="#_"
+                        class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-purple-500 border border-transparent rounded-full shadow hover:bg-purple-600 focus:outline-none focus:border-purple-600 focus:shadow-outline-purple md:py-4 md:text-lg xl:text-xl md:px-10">Get
+                        Started</a>
+                    <a href="#_"
+                        class="relative flex items-center self-start justify-center py-3 pl-10 pr-5 mt-5 ml-5 text-base font-medium leading-tight text-gray-400 transition duration-150 ease-in-out bg-gray-100 border-transparent rounded-full shadow-sm md:pl-16 md:pr-10 hover:text-purple-500 focus:outline-none md:py-4 md:text-lg xl:text-xl">
+                        <svg class="absolute left-0 w-6 h-6 ml-3 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20"
                             xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
+                            <path fill-rule="evenodd"
+                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+                                clip-rule="evenodd"></path>
+                        </svg>
+                        <span class="text-purple-500">How It Works</span>
+                    </a>
+                </div>
+            </div>
+            <div class="relative w-full px-5 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group xl:px-0">
+                <div class="absolute top-0 left-0 w-11/12 -mt-20 opacity-50">
+                    <svg class="w-full h-full ml-4 text-purple-100 dark:text-gray-700" viewBox="0 0 200 200"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor"
+                            d="M45,-78C58.3,-70.3,69,-58.2,75.2,-44.4C81.3,-30.7,82.9,-15.3,83.5,0.4C84.2,16,83.8,32.1,76.5,43.9C69.2,55.7,55.1,63.3,41.2,69.4C27.3,75.4,13.6,80,-0.7,81.2C-15.1,82.5,-30.1,80.3,-41.2,72.6C-52.2,64.9,-59.2,51.6,-67.1,38.5C-75.1,25.5,-83.9,12.8,-83.8,0C-83.8,-12.7,-74.9,-25.4,-65.8,-36.4C-56.7,-47.4,-47.4,-56.7,-36.4,-65.7C-25.4,-74.7,-12.7,-83.5,1.6,-86.2C15.9,-89,31.8,-85.7,45,-78Z"
+                            transform="translate(100 100)" />
+                    </svg>
+                </div>
+                <div class="relative overflow-hidden rounded-md shadow-2xl cursor-pointer group">
+                    <div class="absolute flex items-center justify-center w-full h-full">
+                        <span class="flex items-center justify-center w-20 h-20 bg-purple-500 rounded-full shadow-2xl">
+                            <svg class="w-auto h-8 ml-1 text-white fill-current" viewBox="0 0 52 66"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
+                                    fill-rule="nonzero" /></svg>
+                        </span>
+                    </div>
+                    <img src="https://images.unsplash.com/photo-1493857671505-72967e2e2760?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&h=1603&q=80"
+                        class="z-10 object-cover w-full h-full">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- hero 2 end -->
+
+    <!-- hero 3 start -->
+    <section class="section_divider">
+      <div>Hero 3</div>
+    </section>
+    
+    <div class="relative flex flex-col items-center justify-center min-h-screen bg-cover min-w-screen"
+        style="background-image:url('https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80')">
+        <div class="absolute inset-0 w-full h-full bg-black bg-opacity-75"></div>
+
+        <div class="flex max-w-6xl mx-auto">
+            <div class="container relative flex flex-col w-1/2 px-10 pb-1 pr-12 text-2xl font-hairline text-white">
+                <h2 class="relative z-20 text-5xl font-extrabold leading-tight text-white">Build a culture<br> that excels
+                </h2>
+                <p class="relative z-20 block mt-4 text-xl">We've created the ultimate resource for turning your culture
+                    into a
+                    super-powered productivity machine by encouraging collaboration growth, and incentives!</p>
+                <div class="flex mt-4">
+                    <a href="#_"
+                        class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-lg shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-8">Get
+                        Started</a>
+                    <a href="#_"
+                        class="flex items-center self-start justify-center px-5 py-3 mt-5 ml-5 text-base font-medium leading-tight text-indigo-500 transition duration-150 ease-in-out bg-gray-200 border-transparent rounded-lg shadow hover:bg-white focus:outline-none focus:border-gray-100 focus:shadow-outline-gray md:py-4 md:text-lg md:px-8">How
+                        It Works</a>
+                </div>
+            </div>
+            <div class="relative w-1/2 overflow-hidden rounded-lg shadow-2xl cursor-pointer group">
+                <div class="absolute flex items-center justify-center w-full h-full bg-black bg-opacity-25">
+                    <span class="flex items-center justify-center w-20 h-20 bg-white bg-opacity-75 rounded-full">
+                        <svg class="w-auto h-8 ml-1 text-indigo-600 fill-current" viewBox="0 0 52 66"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
                                 fill-rule="nonzero" /></svg>
                     </span>
                 </div>
-                <img src="https://images.unsplash.com/photo-1493857671505-72967e2e2760?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&h=1603&q=80"
-                    class="z-10 object-cover w-full h-full">
+                <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3290&q=80"
+                    class="object-cover w-full h-full">
             </div>
         </div>
     </div>
-</div>
-<hr>
-<div class="relative flex flex-col items-center justify-center min-h-screen bg-cover min-w-screen"
-    style="background-image:url('https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80')">
-    <div class="absolute inset-0 w-full h-full bg-black bg-opacity-75"></div>
 
-    <div class="flex max-w-6xl mx-auto">
-        <div class="container relative flex flex-col w-1/2 px-10 pb-1 pr-12 text-2xl font-hairline text-white">
-            <h2 class="relative z-20 text-5xl font-extrabold leading-tight text-white">Build a culture<br> that excels
-            </h2>
-            <p class="relative z-20 block mt-4 text-xl">We've created the ultimate resource for turning your culture
-                into a
-                super-powered productivity machine by encouraging collaboration growth, and incentives!</p>
-            <div class="flex mt-4">
-                <a href="#_"
-                    class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-lg shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-8">Get
-                    Started</a>
-                <a href="#_"
-                    class="flex items-center self-start justify-center px-5 py-3 mt-5 ml-5 text-base font-medium leading-tight text-indigo-500 transition duration-150 ease-in-out bg-gray-200 border-transparent rounded-lg shadow hover:bg-white focus:outline-none focus:border-gray-100 focus:shadow-outline-gray md:py-4 md:text-lg md:px-8">How
-                    It Works</a>
-            </div>
-        </div>
-        <div class="relative w-1/2 overflow-hidden rounded-lg shadow-2xl cursor-pointer group">
-            <div class="absolute flex items-center justify-center w-full h-full bg-black bg-opacity-25">
-                <span class="flex items-center justify-center w-20 h-20 bg-white bg-opacity-75 rounded-full">
-                    <svg class="w-auto h-8 ml-1 text-indigo-600 fill-current" viewBox="0 0 52 66"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <path d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
-                            fill-rule="nonzero" /></svg>
-                </span>
-            </div>
-            <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3290&q=80"
-                class="object-cover w-full h-full">
-        </div>
-    </div>
-</div>
-<hr>
-<div class="flex min-h-screen">
-    <section class="grid grid-cols-3 text-gray-900 bg-green-500 sm:grid-cols-2">
-        <div class="z-10 h-full col-span-2 sm:col-span-1 place-self-end">
-            <div class="flex items-center w-full h-full">
-                <div class="max-w-xs p-4 text-sm text-right sm:max-w-xl sm:p-10 sm:text-base lg:max-w-2xl">
-                    <h1 class="mb-10 -mr-12 text-2xl font-bold leading-tight text-white sm:-mr-20 sm:text-3xl md:text-4xl lg:text-5xl">
-                        We Deliver at your<br />
-                        Doorstep.
-                    </h1>
-                    <p class="mb-10 lg:pl-32">
-                        With our award-winning delivery service, our personnel delivers food directly to your doorstep. With your safety in mind, all deliveries are tracked and recorded.
-                    </p>
-                    <a href="#" class="px-1 pb-1 font-semibold uppercase transition-colors duration-500 border-b-4 border-gray-800 text-md hover:border-green-700 hover:text-white">Learn more</a>
-                </div>
-            </div>
-        </div>
-        <div class="min-h-full">
-            <img class="object-cover w-full h-full"
-                src="https://images.unsplash.com/photo-1559941727-6fb446e7e8ae?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=3936&h=2624&fit=crop&ixid=eyJhcHBfaWQiOjF9"
-                alt="Food delivery worker on a bycicle" />
-        </div>
+    <!-- hero 3 end -->
+
+    <!-- hero 4 start -->
+    <section class="section_divider">
+      <div>Hero 4</div>
     </section>
-</div>
-<hr>
-<style>
-    [x-cloak] { display: none; }
-</style>
 
-<div class="relative h-screen lg:h-screen w-full bg-cover bg-no-repeat" style="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);">
-
-<div class="absolute inset-0 z-0 bg-gray-900 opacity-75"></div>
-
-    <!-- Desktop menu -->
-    <nav>
-        <ul class="text-white text-sm relative z-10 p-6 hidden md:flex">
-            <li class="mx-2">
-                <a class="hover:text-gray-300" href="#">First Link</a>
-            </li>
-            <li class="mx-2">
-                <a class="hover:text-gray-300" href="#">Second Link</a>
-            </li>
-            <li class="mx-2">
-                <a class="hover:text-gray-300" href="#">Third Link</a>
-            </li>
-            <li class="mx-auto">
-                <span class="text-3xl">Event</span>
-            </li>
-            <li class="mx-2">
-                <a class="hover:text-gray-300" href="#">Fourth Link</a>
-            </li>
-            <li class="mx-2">
-                <a class="hover:text-gray-300" href="#">Fifth Link</a>
-            </li>
-            <li class="mx-2">
-                <a class="hover:text-gray-300" href="#">Sixth Link</a>
-            </li>
-        </ul>
-    </nav>
-    <!-- End Desktop menu -->
-
-    <!-- Mobile menu -->
-    <div x-data="{ open: false }">
-        <nav class="flex items-center justify-between flex-wrap p-6 md:hidden w-full z-20" :class="open === true ? 'fixed h-full bg-blue-900' : 'relative bg-transparent'">
-            <div class="flex items-center flex-shrink-0 text-white mr-6">
-                <span class="font-semibold text-xl tracking-tight">Event</span>
-            </div>
-            <div class="block lg:hidden">
-                <button @click="open = !open" class="flex items-center px-3 py-2 border rounded text-gray-200 border-gray-400 hover:text-white hover:border-white focus:outline-none">
-                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
-                </button>
-            </div>
-            <div x-cloak x-show.transition="open" class="w-full h-full flex items-center justify-center">
-                <div class="text-xl lg:flex-grow">
-                <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
-                    First link
-                </a>
-                <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
-                    Second Link
-                </a>
-                <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white">
-                    Third Link
-                </a>
-                </div>
-            </div>
-        </nav>
-    </div>
-    <!-- End Mobile menu -->
-
-    <div class="h-full container mx-auto flex items-center justify-center">
-
-        <div class="flex flex-col items-center z-10">
-            <h1 class="mx-6 mt-1 text-xl font-bold text-center text-white md:text-6xl sm:text-center sm:mx-0">Here a really cool title!</h1>
-            <p class="text-white text-xl font-medium w-2/3 text-center my-6">Some fancy text to invite to an event, the place of the event and the date of the event.</p>
-            <div class="flex flex-col md:flex-row justify-center mt-10">
-                <a href="#" class="py-2 px-8 rounded-full border-2 border-pink-500 text-white hover:bg-pink-500 text-center m-2">Tickets</a>
-                <a href="#" class="py-2 px-8 rounded-full border-2 border-pink-500 text-white bg-pink-500 hover:bg-transparent text-center m-2">Coming soon</a>
-            </div>
-        </div>
-
-    </div>
-<div>
-<hr>
-<div class="relative flex flex-col items-center justify-center min-h-screen bg-white bg-cover min-w-screen">
-    <div
-        class="flex flex-col flex-col-reverse items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
-        <div class="relative w-full pr-10 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group">
-            <div class="relative rounded-md">
-                <img src="https://cdn.devdojo.com/images/september2020/grow-together.png"
-                    class="z-10 object-cover w-full h-full">
-            </div>
-        </div>
-        <div
-            class="container relative z-20 flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
-            <h1
-                class="relative z-20 font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
-                <span class="relative">
-                    <span
-                        class="absolute bottom-0 left-0 inline-block w-full h-4 mb-1 -ml-1 transform -skew-x-3 bg-yellow-200"></span>
-                    <span class="relative">Learn Together,</span>
-                </span>
-                <span class="relative block text-yellow-400">Grow Together.</span>
-            </h1>
-            <p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-lg sm:text-center lg:text-left">Join our
-                community and thrive with us! We can all help each other, learn together, and grow together.</p>
-            <div class="relative flex items-center mt-10">
-                <a href="#_"
-                    class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-yellow-500 border border-transparent rounded-lg shadow hover:bg-yellow-600 focus:outline-none focus:border-yellow-600 focus:shadow-outline-yellow md:py-4 md:text-lg xl:text-xl md:px-10">Get
-                    Started</a>
-                <a href="#_"
-                    class="relative flex inline-block h-full ml-5 text-base text-lg font-medium leading-tight text-gray-600 underline transition duration-150 ease-in-out border-transparent">
-                    Try Our Service for Free
-                </a>
-            </div>
-            <p class="mt-6 text-xs text-gray-500 rounded-full">Already a member? <a href="#_"
-                    class="font-medium text-yellow-500 underline">Login Here</a></p>
-        </div>
-    </div>
-</div>
-<hr>
-<div class="flex items-center justify-center min-h-screen bg-white min-w-screen">
-    <div class="flex flex-col flex-col-reverse items-center justify-center mx-auto lg:flex-row lg:max-w-4xl lg:p-0">
-        <div class="container flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
-            <h1 class="font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
-                <span class="text-gray-800">Stay focused</span>
-                <span class="block text-blue-400">and know yourself.</span>
-            </h1>
-            <p class="mt-6 text-base text-gray-600 xl:text-lg s">Your guide to mental health and happiness. How about
-                try to meditate? Start to meditate just 5 min per day and see the results.</p>
-            <div class="items-center justify-center m-10 rflex">
-                <a href="#_" class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white bg-blue-800 border border-transparent rounded-lg shadow md:py-4 md:text-lg xl:text-xl md:px-10">
-                    Come with us
-                </a>
-            </div>
-        </div>
-        <div class="px-5 md:w-2/3 lg:w-1/2">
-            <img src="https://ouch-cdn.icons8.com/preview/123/00b6b699-606c-42b1-ba42-20f17872a135.png"
-                alt="Illustration of person meditating" class="object-cover w-full h-50">
-        </div>
-    </div>
-</div>
-<hr>
-<div class="flex items-center justify-between">
-    <div class="float-left h-full">
-        <div class="mx-16 my-6">
-            <div class="py-2 text-6xl font-bold leading-none text-purple-700">
-                <h1>Shopping <br>
-                    Made Easier!
-                </h1>
-            </div>
-            <div>
-                <p class="text-xl text-gray-600">
-                    We've designed the best shopping experience. <br>
-                    Now just one click away!
-                </p>
-            </div>
-            <div class="my-10">
-                <a href=#>
-                    <span class="p-4 px-6 font-medium text-white bg-green-500 border-4 border-transparent rounded-lg  hover:bg-green-600">Start Shopping</span>
-                </a>
-                <a href=#>
-                    <span class="p-4 px-8 mx-8 font-medium text-gray-700 bg-gray-300 border-4 border-transparent rounded-lg hover:bg-gray-500">Learn More</span>
-                </a>
-            </div>
-        </div>
-        <div>
-
-        </div>
-    </div>
-    <div class="float-right px-20 my-8">
-        <img src="https://source.unsplash.com/400x450/?simple" alt="shopping">
-    </div>
-</div>
-<hr>
-<section class="relative min-h-screen bg-white bg-gray-200 rounded-lg min-w-screen animation-fade animation-delay">
-    <div class="container px-1 mx-auto sm:px-10 md:px-0">
-        <div class="flex flex-col items-center justify-center w-full md:flex-row">
-            <div class="flex justify-center w-full md:max-w-md md:mr-8 lg:mr-12">
-                <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
-                <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_1H7IW0.json"  background="transparent" class="max-w-md min-w-sm" speed="1" loop autoplay></lottie-player>
-            </div>
-
-            <div class="w-full max-w-md px-4 pb-10 text-xs text-center md:pb-0 sm:text-sm lg:text-base md:max-w-lg md:w-full md:text-left">
-                <h2 class="text-2xl font-bold leading-snug sm:text-3xl md:text-4xl lg:text-5xl md:leading-tight md:mt-10">
-                  Understanding the<br />
-                  customer journey.
-                </h2>
-
-                <p class="mt-4 sm:mt-6 md:max-w-sm">
-                  To succeed, one must have an unwavering desire to succeed amidst fear of failure.
-                </p>
-
-                <button class="flex justify-center w-full max-w-xs py-4 mx-auto mt-10 text-sm font-semibold text-black transition-colors duration-100 bg-orange-500 rounded hover:bg-purple-600 hover:text-white focus:bg-purple-600 focus:text-white md:max-w-sm md:mx-0">
-                  Start your 14 day FREE Trial
-                </button>
-
-                <hr class="my-10 border-2" />
-
-                <p class="text-gray-700 text-md">
-                  “Our conversion rates have gone up 12% since we start using this platform! I highly recommend using this tool.”
-                </p>
-
-                <div class="mt-4">
-                    <div class="self-center font-semibold text-gray-900">Jane Doe, CTO of SomeCompany</div>
-                    <div class="flex justify-center mt-3 md:justify-start">
-                        <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
-                            <g class="nc-icon-wrapper" fill="currentColor">
-                                <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
-                            </g>
-                        </svg>
-                        <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
-                            <g class="nc-icon-wrapper" fill="currentColor">
-                                <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
-                            </g>
-                        </svg>
-                        <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
-                            <g class="nc-icon-wrapper" fill="currentColor">
-                                <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
-                            </g>
-                        </svg>
-                        <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
-                            <g class="nc-icon-wrapper" fill="currentColor">
-                                <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
-                            </g>
-                        </svg>
-                        <svg class="w-8 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
-                            <g class="nc-icon-wrapper" fill="currentColor">
-                                <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
-                            </g>
-                        </svg>
+    <div class="flex min-h-screen">
+        <section class="grid grid-cols-3 text-gray-900 bg-green-500 sm:grid-cols-2">
+            <div class="z-10 h-full col-span-2 sm:col-span-1 place-self-end">
+                <div class="flex items-center w-full h-full">
+                    <div class="max-w-xs p-4 text-sm text-right sm:max-w-xl sm:p-10 sm:text-base lg:max-w-2xl">
+                        <h1 class="mb-10 -mr-12 text-2xl font-bold leading-tight text-white sm:-mr-20 sm:text-3xl md:text-4xl lg:text-5xl">
+                            We Deliver at your<br />
+                            Doorstep.
+                        </h1>
+                        <p class="mb-10 lg:pl-32">
+                            With our award-winning delivery service, our personnel delivers food directly to your doorstep. With your safety in mind, all deliveries are tracked and recorded.
+                        </p>
+                        <a href="#" class="px-1 pb-1 font-semibold uppercase transition-colors duration-500 border-b-4 border-gray-800 text-md hover:border-green-700 hover:text-white">Learn more</a>
                     </div>
                 </div>
             </div>
+            <div class="min-h-full">
+                <img class="object-cover w-full h-full"
+                    src="https://images.unsplash.com/photo-1559941727-6fb446e7e8ae?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=3936&h=2624&fit=crop&ixid=eyJhcHBfaWQiOjF9"
+                    alt="Food delivery worker on a bycicle" />
+            </div>
+        </section>
+    </div>
+
+    <!-- hero 4 end -->
+
+    
+    <!-- hero 5 start -->
+    <section class="section_divider" id="hero_2">
+      <div>Hero 5</div>
+    </section>
+            
+    <div class="relative h-screen lg:h-screen w-full bg-cover bg-no-repeat bg-[url(https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80)]">
+
+        <!-- background overlay start -->
+        <div class="absolute inset-0 z-0 bg-gray-900 opacity-75"></div>
+        <!-- background overlay  end -->
+        <div class="h-full container mx-auto flex items-center justify-center">
+
+            <div class="flex flex-col items-center z-10">
+                <h1 class="mx-6 mt-1 text-xl font-bold text-center text-white md:text-6xl sm:text-center sm:mx-0">Here a really cool title!</h1>
+                <p class="text-white text-xl font-medium w-2/3 text-center my-6">Some fancy text to invite to an event, the place of the event and the date of the event.</p>
+                <div class="flex flex-col md:flex-row justify-center mt-10">
+                    <a href="#" class="py-2 px-8 rounded-full border-2 border-pink-500 text-white hover:bg-pink-500 text-center m-2">Tickets</a>
+                    <a href="#" class="py-2 px-8 rounded-full border-2 border-pink-500 text-white bg-pink-500 hover:bg-transparent text-center m-2">Coming soon</a>
+                </div>
+            </div>
 
         </div>
     </div>
-</section>
-<hr>
-<section class="px-4 py-24 mx-auto max-w-7xl">
-    <div class="grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
-      <div class="col-auto text-center md:col-span-7 lg:text-left">
-        <h1 class="mb-4 text-3xl font-bold leading-tight text-gray-900 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready to start your journey?</h1>
-        <p class="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
-          Low-latency voice and video feels like you’re in the same room. Wave hello over video, watch friends stream their games, or gather up and have a drawing session with screen share.
-        </p>
+
+    <!-- hero 5 end -->
+      
+    <!-- hero 6 start -->
+    <section class="section_divider">
+      <div>Hero 6</div>
+    </section>
+      
+    <div class="relative flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 bg-cover min-w-screen">
+        <div
+            class="flex flex-col  items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
+            <div class="relative w-full pr-10 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group">
+                <div class="relative rounded-md">
+                    <img src="https://cdn.devdojo.com/images/september2020/grow-together.png"
+                        class="z-10 object-cover w-full h-full">
+                </div>
+            </div>
+            <div
+                class="container relative z-20 flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
+                <h1
+                    class="relative z-20 font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
+                    <span class="relative">
+                        <span
+                            class="absolute bottom-0 left-0 inline-block w-full h-4 mb-1 -ml-1 transform -skew-x-3 bg-yellow-200 dark:bg-amber-50 dark:opacity-20"></span>
+                        <span class="relative">Learn Together,</span>
+                    </span>
+                    <span class="relative block text-yellow-400">Grow Together.</span>
+                </h1>
+                <p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-lg sm:text-center lg:text-left">Join our
+                    community and thrive with us! We can all help each other, learn together, and grow together.</p>
+                <div class="relative flex items-center mt-10">
+                    <a href="#_"
+                        class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-yellow-500 border border-transparent rounded-lg shadow hover:bg-yellow-600 focus:outline-none focus:border-yellow-600 focus:shadow-outline-yellow md:py-4 md:text-lg xl:text-xl md:px-10">Get
+                        Started</a>
+                    <a href="#_"
+                        class="relative inline-block h-full ml-5 text-lg font-medium leading-tight text-gray-600 hover:text-yellow-600 dark:hover:text-gray-200 underline transition duration-150 ease-in-out border-transparent">
+                        Try Our Service for Free
+                    </a>
+                </div>
+                <p class="mt-6 text-xs text-gray-500 rounded-full">Already a member? <a href="#_"
+                        class="font-medium text-yellow-500 underline">Login Here</a></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- hero 6 end -->
+
+    <!-- hero 7 start -->
+
+    <section class="section_divider">
+      <div>Hero 7</div>
+    </section>
+        
+    <div class="flex items-center justify-center min-h-screen bg-white dark:bg-gray-800 min-w-screen">
+        <div class="flex flex-col flex-col-reverse items-center justify-center mx-auto lg:flex-row lg:max-w-4xl lg:p-0">
+            <div class="container flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
+                <h1 class="font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
+                    <span class="text-gray-800 dark:text-blue-400">Stay focused</span>
+                    <span class="block text-blue-400 dark:text-gray-200">and know yourself.</span>
+                </h1>
+                <p class="mt-6 text-base text-gray-600 xl:text-lg s">Your guide to mental health and happiness. How about
+                    try to meditate? Start to meditate just 5 min per day and see the results.</p>
+                <div class="items-center justify-center m-10 rflex">
+                    <a href="#_" class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white bg-blue-800 border border-transparent rounded-lg shadow md:py-4 md:text-lg xl:text-xl md:px-10">
+                        Come with us
+                    </a>
+                </div>
+            </div>
+            <div class="px-5 md:w-2/3 lg:w-1/2">
+                <img src="https://images.unsplash.com/photo-1559941727-6fb446e7e8ae?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=3936&h=2624&fit=crop&ixid=eyJhcHBfaWQiOjF9"
+                    alt="Illustration of person meditating" class="object-cover w-full h-50 rounded-md shadow-lg shadow-gray-800  hover:translate-y-2 transition duration-500">
+            </div>
+        </div>
+    </div>
+    <!-- hero 7 end -->
+
+    <!-- hero 8 start -->
+    <section class="section_divider">
+      <div>Hero 8</div>
+    </section>
+
+    <div class="flex items-center justify-between dark:bg-gray-800">
+        <div class="float-left h-full">
+            <div class="mx-16 my-6">
+                <div class="py-2 text-6xl font-bold leading-none text-purple-700">
+                    <h1>Shopping <br>
+                        Made Easier!
+                    </h1>
+                </div>
+                <div>
+                    <p class="text-xl text-gray-600">
+                        We've designed the best shopping experience. <br>
+                        Now just one click away!
+                    </p>
+                </div>
+                <div class="my-10">
+                    <a href=#>
+                        <span class="p-4 px-6 font-medium text-white bg-green-500 border-4 border-transparent rounded-lg  hover:bg-green-600">Start Shopping</span>
+                    </a>
+                    <a href=#>
+                        <span class="p-4 px-8 mx-8 font-medium text-gray-700 bg-gray-300 border-4 border-transparent rounded-lg hover:bg-gray-500">Learn More</span>
+                    </a>
+                </div>
+            </div>
+            <div>
+
+            </div>
+        </div>
+        <div class="float-right px-20 my-8">
+            <img class="rounded-lg hover:translate-y-2 transition duration-300" src="https://images.unsplash.com/photo-1557860537-4ca8968f344e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=450&ixid=MnwxfDB8MXxyYW5kb218MHx8c2ltcGxlfHx8fHx8MTY0NTEwNDMyMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=400" alt="shopping">
+            <!-- <img src="https://source.unsplash.com/400x450/?simple" alt="shopping"> -->
+        </div>
+    </div>
+
+    <!-- hero 8 end -->
+
+    <!-- hero 9 start -->
+    <section class="section_divider">
+      <div>Hero 9</div>
+    </section>
+    
+    <section class="relative min-h-screen bg-gray-200 dark:bg-gray-800 rounded-lg min-w-screen animation-fade animation-delay">
+        <div class="container px-1 mx-auto sm:px-10 md:px-0">
+            <div class="flex flex-col items-center justify-center w-full md:flex-row">
+                <div class="flex justify-center w-full md:max-w-md md:mr-8 lg:mr-12">
+                    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+                    <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_1H7IW0.json"  background="transparent" class="max-w-md min-w-sm" speed="1" loop autoplay></lottie-player>
+                </div>
+
+                <div class="w-full max-w-md px-4 pb-10 text-xs text-center md:pb-0 sm:text-sm lg:text-base md:max-w-lg md:w-full md:text-left">
+                    <h2 class="text-2xl font-bold leading-snug dark:text-gray-300 sm:text-3xl md:text-4xl lg:text-5xl md:leading-tight md:mt-10">
+                      Understanding the<br />
+                      customer journey.
+                    </h2>
+
+                    <p class="mt-4 sm:mt-6 md:max-w-sm dark:text-purple-800">
+                      To succeed, one must have an unwavering desire to succeed amidst fear of failure.
+                    </p>
+
+                    <button class="flex justify-center w-full max-w-xs py-4 mx-auto mt-10 text-sm font-semibold text-black transition-colors duration-100 bg-orange-500 rounded hover:bg-purple-600 hover:text-white focus:bg-purple-600 focus:text-white md:max-w-sm md:mx-0">
+                      Start your 14 day FREE Trial
+                    </button>
+
+                    <hr class="my-10 border-2" />
+
+                    <p class="text-gray-700 dark:text-gray-300 text-md">
+                      “Our conversion rates have gone up 12% since we start using this platform! I highly recommend using this tool.”
+                    </p>
+
+                    <div class="mt-4">
+                        <div class="self-center font-semibold text-gray-900 dark:text-purple-800">Jane Doe, CTO of SomeCompany</div>
+                        <div class="flex justify-center mt-3 md:justify-start">
+                            <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                <g class="nc-icon-wrapper" fill="currentColor">
+                                    <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                </g>
+                            </svg>
+                            <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                <g class="nc-icon-wrapper" fill="currentColor">
+                                    <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                </g>
+                            </svg>
+                            <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                <g class="nc-icon-wrapper" fill="currentColor">
+                                    <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                </g>
+                            </svg>
+                            <svg class="w-8 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                <g class="nc-icon-wrapper" fill="currentColor">
+                                    <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                </g>
+                            </svg>
+                            <svg class="w-8 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" data-type="glyph" data-name="favourite-31">
+                                <g class="nc-icon-wrapper" fill="currentColor">
+                                    <path fill="currentColor" d="M12.712,1.942l2.969,6.015l6.638,0.965c0.651,0.095,0.911,0.895,0.44,1.354l-4.804,4.682l1.134,6.612 c0.111,0.649-0.57,1.143-1.152,0.837L12,19.286l-5.938,3.122C5.48,22.714,4.799,22.219,4.91,21.57l1.134-6.612l-4.804-4.682 c-0.471-0.459-0.211-1.26,0.44-1.354l6.638-0.965l2.969-6.015C11.579,1.352,12.421,1.352,12.712,1.942z"></path>
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </section>
+
+    <!-- hero 9 end -->
+
+    <!-- hero 10 start -->
+    <section class="section_divider">
+      <div>Hero 10</div>
+    </section>
+        
+    <section class=" dark:bg-gray-800">
+      <div class="max-w-7xl  px-4 py-24 grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
+        <div class="col-auto text-center md:col-span-7 lg:text-left">
+          <h1 class="mb-4 text-3xl font-bold leading-tight text-gray-900 dark:text-yellow-300 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready to start your journey?</h1>
+          <p class="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
+            Low-latency voice and video feels like you’re in the same room. Wave hello over video, watch friends stream their games, or gather up and have a drawing session with screen share.
+          </p>
+        </div>
+        <div class="col-auto md:col-span-4">
+          <form class="mb-6 border-0 rounded-lg shadow-xl ">
+            <div class="text-center  text-gray-700 dark:text-yellow-200 uppercase font-semibold mb-4 border-0 card-header">
+              <p class="pt-2"> talk with us</p>
+            </div>
+            <div class="grid">
+              <label class="mx-auto ">
+                <span class="sr-only">First Name</span>
+                <input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300" type="text" placeholder="First Name" required="true" />
+              </label>
+              <label class="mx-auto">
+                <span class="sr-only">Email Address</span>
+                <input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300 " type="email" placeholder="Email Address" required="true" />
+              </label>
+              <label class="mx-auto">
+                <span class="sr-only">Password</span>
+                <input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300" type="password" placeholder="Password" required="true" />
+              </label>
+
+              <div class="px-6 py-4 ">
+                <button class="w-full py-2 rounded-lg bg-gray-800 text-gray-300  dark:text-gray-800 dark:bg-yellow-400" type="submit">Sign up for free</button>
+              </div>
+            </div>
+
+
+            <div class="px-6 py-4 ">
+              <button class="w-full py-2 rounded-lg bg-blue-500 hover:bg-blue-400">
+                Continue with Google
+              </button>
+            </div>
+          </form>
+          <p class="text-xs text-center text-gray-600 dark:text-yellow-300">By signing up you agree to our <a href="#" class="text-primary">Terms of Service</a></p>
+        </div>
       </div>
-      <div class="col-auto md:col-span-4">
-        <form class="mb-6 border-0 rounded-lg shadow-xl card">
-          <div class="justify-center pb-0 text-gray-700 border-0 card-header">
-            <p class="pt-2">Start talking now</p>
-          </div>
-          <div class="px-6 py-4 space-y-4 border-b border-gray-200 card-body">
-            <label class="flex">
-              <span class="sr-only">First Name</span>
-              <input class="mt-0 form-input" type="text" placeholder="First Name" required="true" />
-            </label>
-            <label class="flex">
-              <span class="sr-only">Email Address</span>
-              <input class="mt-0 form-input" type="email" placeholder="Email Address" required="true" />
-            </label>
-            <label class="flex">
-              <span class="sr-only">Password</span>
-              <input class="mt-0 form-input" type="password" placeholder="Password" required="true" />
-            </label>
-            <button class="w-full py-2 btn btn-primary" type="submit">Sign up for free</button>
-          </div>
-          <div class="px-6 py-4 card-body">
-            <button class="w-full py-2 btn btn-icon btn-google">
-              <svg
-                class="mr-1"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                stroke="transparent"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
+    </section>
+    
+    <!-- hero 10 end -->
+
+    
+    <!-- hero 11 start -->
+    <section class="section_divider">
+      <div>Hero 11</div>
+    </section>
+    
+    <section class=" dark:bg-gray-800">
+        <div class=" px-4 py-32 mx-auto max-w-7xl w-full lg:w-8/12 xl:w-5/12">
+          <p class="mb-2 text-xs font-semibold tracking-wide text-gray-400 uppercase">For Developers</p>
+          <h1 class="mb-3 text-3xl font-bold leading-tight text-gray-900 dark:text-cyan-300 md:text-4xl">Focus on your apps</h1>
+          <p class="mb-5 text-base text-gray-500 md:text-lg">
+            Today every company needs apps to engage their customers and run their businesses. Step up your ability to build, manage, and deploy great apps at scale with us.
+          </p>
+          <a href="#" class="w-full mb-2 rounded-lg px-2 py-2 hover:ring-2 hover:ring-gray-800 hover:bg-gray-200 hover:text-gray-800 bg-gray-800  text-gray-300 dark:text-cyan-300 dark:ring-2 dark:ring-cyan-300 dark:hover:bg-cyan-300 dark:hover:text-gray-800 mr-6 sm:w-auto sm:mb-0">Sign up for free</a>
+          <a href="#" class="w-full mb-2 rounded-lg px-2 py-2 ring-2 ring-gray-800 hover:bg-gray-800 hover:ring-0 hover:text-gray-300 dark:text-gray-800 dark:bg-cyan-300 dark:hover:text-cyan-300 dark:hover:ring-2 dark:hover:ring-cyan-300 dark:hover:bg-gray-800 sm:w-auto sm:mb-0">Read our blog</a>
+        </div>
+    </section>
+
+    <!-- hero 11 end -->
+
+    <!-- hero 12 start -->
+    <section class="section_divider">
+      <div>Hero 12</div>
+    </section>
+
+        
+    <section class="grid grid-cols-1 gap-0 bg-blue-100 bg-opacity-25 md:grid-cols-2">
+        <div class="flex flex-col items-start justify-center px-4 py-24 lg:px-20">
+          <span class="mb-3 text-white bg-blue-900 badge">Pre Beta</span>
+          <h1 class="mb-6 text-4xl font-bold leading-tight text-blue-900 md:text-4xl lg:text-5xl">Great customer relationships start here.</h1>
+          <form class="w-full mb-6">
+            <label class="sr-only">Your Email</label>
+            <div class="block lg:hidden">
+              <input class="text-blue-900 form-input form-input-lg" type="email" placeholder="Enter your email..." required="true" />
+              <button class="w-full mt-2 text-white bg-blue-900 hover:bg-blue-800 btn btn-lg" type="submit">Get Started</button>
+            </div>
+            <div class="hidden w-full form-append lg:flex">
+              <input class="text-blue-900 form-input form-input-lg" type="email" placeholder="Enter your email..." required="true" />
+              <button class="text-white bg-blue-900 hover:bg-blue-800 btn btn-lg" type="submit">Get Started</button>
+            </div>
+          </form>
+          <p class="pr-0 mb-4 text-sm text-blue-800 tracking-relaxed lg:pr-16">Get the #1 Business Messenger and start delivering personalized experiences at every stage of the customer journey.</p>
+        </div>
+        <div>
+          <img
+            src="https://images.unsplash.com/photo-1531548731165-c6ae86ff6491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80"
+            alt="3 women looking at a laptop"
+            class="object-cover w-full h-64 bg-gray-100 md:h-full"
+            loading="lazy"
+          />
+        </div>
+    </section>
+
+    <!-- hero 12 end -->
+    <!-- hero 13 start -->
+    <section class="section_divider">
+      <div>Hero 13</div>
+    </section>
+        
+    <section class="px-4 py-24 mx-auto max-w-7xl">
+        <div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
+          <h1 class="mb-6 text-4xl font-extrabold leading-none tracking-normal text-gray-900 md:text-6xl md:tracking-tight">
+            All your <span class="block w-full text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500 lg:inline">customer feedback</span> in one single place.
+          </h1>
+          <p class="px-0 mb-6 text-lg text-gray-600 md:text-xl lg:px-24">
+            Hellonext is a feature voting software where you can allow your users to vote on features, publish roadmap, and complete your customer feedback loop.
+          </p>
+          <div class="mb-4 space-x-0 md:space-x-2 md:mb-8">
+            <a class="inline-flex items-center justify-center w-full mb-2 btn btn-primary btn-lg sm:w-auto sm:mb-0" href="#">
+              Get Started
+              <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </a>
+            <a class="inline-flex items-center justify-center w-full mb-2 btn btn-light btn-lg sm:w-auto sm:mb-0" href="#">
+              Book a Demo
+              <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                 <path
-                  d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28	c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233	c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934	C20.485,11.453,20.404,10.884,20.283,10.356z"
+                  fill-rule="evenodd"
+                  d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
+                  clip-rule="evenodd"
                 />
               </svg>
-              Continue with Google
-            </button>
+            </a>
           </div>
-        </form>
-        <p class="text-xs text-center text-gray-600">By signing up you agree to our <a href="#" class="text-primary">Terms of Service</a></p>
-      </div>
-    </div>
-  </section>
-<hr>
-<section class="px-4 py-32 mx-auto max-w-7xl">
-    <div class="w-full mx-auto lg:w-8/12 xl:w-5/12">
-      <p class="mb-2 text-xs font-semibold tracking-wide text-gray-400 uppercase">For Developers</p>
-      <h1 class="mb-3 text-3xl font-bold leading-tight text-gray-900 md:text-4xl">Focus on your apps</h1>
-      <p class="mb-5 text-base text-gray-500 md:text-lg">
-        Today every company needs apps to engage their customers and run their businesses. Step up your ability to build, manage, and deploy great apps at scale with us.
-      </p>
-      <a href="#" class="w-full mb-2 btn btn-primary btn-lg sm:w-auto sm:mb-0">Sign up for free</a>
-      <a href="#" class="w-full mb-2 btn btn-light btn-lg sm:w-auto sm:mb-0">Read our blog</a>
-    </div>
-  </section>
-<hr>
-<section class="grid grid-cols-1 gap-0 bg-blue-100 bg-opacity-25 md:grid-cols-2">
-    <div class="flex flex-col items-start justify-center px-4 py-24 lg:px-20">
-      <span class="mb-3 text-white bg-blue-900 badge">Pre Beta</span>
-      <h1 class="mb-6 text-4xl font-bold leading-tight text-blue-900 md:text-4xl lg:text-5xl">Great customer relationships start here.</h1>
-      <form class="w-full mb-6">
-        <label class="sr-only">Your Email</label>
-        <div class="block lg:hidden">
-          <input class="text-blue-900 form-input form-input-lg" type="email" placeholder="Enter your email..." required="true" />
-          <button class="w-full mt-2 text-white bg-blue-900 hover:bg-blue-800 btn btn-lg" type="submit">Get Started</button>
         </div>
-        <div class="hidden w-full form-append lg:flex">
-          <input class="text-blue-900 form-input form-input-lg" type="email" placeholder="Enter your email..." required="true" />
-          <button class="text-white bg-blue-900 hover:bg-blue-800 btn btn-lg" type="submit">Get Started</button>
+        <div class="w-full mx-auto mt-20 text-center md:w-10/12">
+          <img src="/hero.jpg" alt="Hellonext feedback boards software screenshot" class="w-full rounded-lg shadow-2xl" />
         </div>
-      </form>
-      <p class="pr-0 mb-4 text-sm text-blue-800 tracking-relaxed lg:pr-16">Get the #1 Business Messenger and start delivering personalized experiences at every stage of the customer journey.</p>
-    </div>
-    <div>
-      <img
-        src="https://images.unsplash.com/photo-1531548731165-c6ae86ff6491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80"
-        alt="3 women looking at a laptop"
-        class="object-cover w-full h-64 bg-gray-100 md:h-full"
-        loading="lazy"
-      />
-    </div>
-  </section>
-<hr>
-<section class="px-4 py-24 mx-auto max-w-7xl">
-    <div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
-      <h1 class="mb-6 text-4xl font-extrabold leading-none tracking-normal text-gray-900 md:text-6xl md:tracking-tight">
-        All your <span class="block w-full text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-purple-500 lg:inline">customer feedback</span> in one single place.
-      </h1>
-      <p class="px-0 mb-6 text-lg text-gray-600 md:text-xl lg:px-24">
-        Hellonext is a feature voting software where you can allow your users to vote on features, publish roadmap, and complete your customer feedback loop.
-      </p>
-      <div class="mb-4 space-x-0 md:space-x-2 md:mb-8">
-        <a class="inline-flex items-center justify-center w-full mb-2 btn btn-primary btn-lg sm:w-auto sm:mb-0" href="#">
-          Get Started
-          <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-          </svg>
-        </a>
-        <a class="inline-flex items-center justify-center w-full mb-2 btn btn-light btn-lg sm:w-auto sm:mb-0" href="#">
-          Book a Demo
-          <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-            <path
-              fill-rule="evenodd"
-              d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </a>
-      </div>
-    </div>
-    <div class="w-full mx-auto mt-20 text-center md:w-10/12">
-      <img src="/hero.jpg" alt="Hellonext feedback boards software screenshot" class="w-full rounded-lg shadow-2xl" />
-    </div>
-  </section>
-<hr>
-<section class="px-4 py-24 mx-auto max-w-7xl">
-    <div class="grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
-      <div class="col-auto text-center md:col-span-7 lg:text-left">
-        <h1 class="mb-4 text-3xl font-bold leading-tight text-gray-900 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready to start your journey?</h1>
-        <p class="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
-          Low-latency voice and video feels like you’re in the same room. Wave hello over video, watch friends stream their games, or gather up and have a drawing session with screen share.
-        </p>
-      </div>
-      <div class="col-auto md:col-span-4">
-        <form class="mb-6 border-0 rounded-lg shadow-xl card">
-          <div class="justify-center pb-0 text-gray-700 border-0 card-header">
-            <p class="pt-2">Start talking now</p>
+    </section>
+    <!-- hero 13 end -->
+
+    <!-- hero 14 start -->
+    <section class="section_divider">
+      <div>Hero 14</div>
+    </section>
+
+        
+    <section class="px-4 py-24 mx-auto max-w-7xl">
+        <div class="grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
+          <div class="col-auto text-center md:col-span-7 lg:text-left">
+            <h1 class="mb-4 text-3xl font-bold leading-tight text-gray-900 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready to start your journey?</h1>
+            <p class="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
+              Low-latency voice and video feels like you’re in the same room. Wave hello over video, watch friends stream their games, or gather up and have a drawing session with screen share.
+            </p>
           </div>
-          <div class="px-6 py-4 space-y-4 border-b border-gray-200 card-body">
-            <label class="flex">
-              <span class="sr-only">First Name</span>
-              <input class="mt-0 form-input" type="text" placeholder="First Name" required="true" />
-            </label>
-            <label class="flex">
-              <span class="sr-only">Email Address</span>
-              <input class="mt-0 form-input" type="email" placeholder="Email Address" required="true" />
-            </label>
-            <label class="flex">
-              <span class="sr-only">Password</span>
-              <input class="mt-0 form-input" type="password" placeholder="Password" required="true" />
-            </label>
-            <button class="w-full py-2 btn btn-primary" type="submit">Sign up for free</button>
+          <div class="col-auto md:col-span-4">
+            <form class="mb-6 border-0 rounded-lg shadow-xl card">
+              <div class="justify-center pb-0 text-gray-700 border-0 card-header">
+                <p class="pt-2">Start talking now</p>
+              </div>
+              <div class="px-6 py-4 space-y-4 border-b border-gray-200 card-body">
+                <label class="flex">
+                  <span class="sr-only">First Name</span>
+                  <input class="mt-0 form-input" type="text" placeholder="First Name" required="true" />
+                </label>
+                <label class="flex">
+                  <span class="sr-only">Email Address</span>
+                  <input class="mt-0 form-input" type="email" placeholder="Email Address" required="true" />
+                </label>
+                <label class="flex">
+                  <span class="sr-only">Password</span>
+                  <input class="mt-0 form-input" type="password" placeholder="Password" required="true" />
+                </label>
+                <button class="w-full py-2 btn btn-primary" type="submit">Sign up for free</button>
+              </div>
+              <div class="px-6 py-4 card-body">
+                <button class="w-full py-2 btn btn-icon btn-google">
+                  <svg
+                    class="mr-1"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    stroke="transparent"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path
+                      d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28	c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233	c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934	C20.485,11.453,20.404,10.884,20.283,10.356z"
+                    />
+                  </svg>
+                  Continue with Google
+                </button>
+              </div>
+            </form>
+            <p class="text-xs text-center text-gray-600">By signing up you agree to our <a href="#" class="text-primary">Terms of Service</a></p>
           </div>
-          <div class="px-6 py-4 card-body">
-            <button class="w-full py-2 btn btn-icon btn-google">
-              <svg
-                class="mr-1"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                stroke="transparent"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28	c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233	c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934	C20.485,11.453,20.404,10.884,20.283,10.356z"
-                />
-              </svg>
-              Continue with Google
-            </button>
-          </div>
-        </form>
-        <p class="text-xs text-center text-gray-600">By signing up you agree to our <a href="#" class="text-primary">Terms of Service</a></p>
+        </div>
+    </section>
+  <!-- hero 14 end -->
+
+  <!-- hero 15 start -->
+    <section class="section_divider">
+      <div>Hero 15</div>
+    </section>
+
+    <section class="dark:bg-coolGray-800 dark:text-coolGray-100">
+      <div class="container mx-auto flex flex-col items-center px-4 py-16 text-center md:py-32 md:px-10 lg:px-32 xl:max-w-3xl">
+        <h1 class="text-4xl font-bold leading-none sm:text-5xl">Quisquam necessita vel
+          <span class="dark:text-violet-400">laborum doloribus</span>delectus
+        </h1>
+        <p class="px-8 mt-8 mb-12 text-lg">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
+        <div class="flex flex-wrap justify-center">
+          <button class="px-8 py-3 m-2 text-lg font-semibold rounded dark:bg-violet-400 dark:text-coolGray-900">Get started</button>
+          <button class="px-8 py-3 m-2 text-lg border rounded dark:text-coolGray-50 dark:border-coolGray-700">Learn more</button>
+        </div>
       </div>
-    </div>
-  </section>
-<hr>
-<section class="dark:bg-coolGray-800 dark:text-coolGray-100">
-	<div class="container mx-auto flex flex-col items-center px-4 py-16 text-center md:py-32 md:px-10 lg:px-32 xl:max-w-3xl">
-		<h1 class="text-4xl font-bold leading-none sm:text-5xl">Quisquam necessita vel
-			<span class="dark:text-violet-400">laborum doloribus</span>delectus
-		</h1>
-		<p class="px-8 mt-8 mb-12 text-lg">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
-		<div class="flex flex-wrap justify-center">
-			<button class="px-8 py-3 m-2 text-lg font-semibold rounded dark:bg-violet-400 dark:text-coolGray-900">Get started</button>
-			<button class="px-8 py-3 m-2 text-lg border rounded dark:text-coolGray-50 dark:border-coolGray-700">Learn more</button>
-		</div>
-	</div>
-</section>  
+    </section>  
+
+  <!-- hero 15 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 220 is the backward 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>
diff --git a/public/componets/navs_headers/header.html b/public/componets/navs_headers/header.html
index 5c8169d..55b993f 100644
--- a/public/componets/navs_headers/header.html
+++ b/public/componets/navs_headers/header.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./../../../dist/tailshape.css">
-    <title>footer 1</title>
+    <title>Header </title>
 </head>
 <body>
     <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
@@ -262,11 +262,10 @@
         <section class="section_divider">
             <div>Header 5</div>
         </section>
-        <header class="sticky top-0 bg-white dark:bg-gray-800 shadow">
+        <header class=" bg-white dark:bg-gray-800 shadow">
             <div class="flex items-center justify-between p-4 mx-auto max-w-7xl">
               <span class="inline-block w-32 p-3 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
-
-                <button class="p-2 rounded bg-gray-300 text-cyan-800 font-semibold dark:text-cyan-600">Contact Us</button>
+              <button class="p-2 rounded bg-gray-300 text-cyan-800 font-semibold dark:text-cyan-600">Contact Us</button>
             </div>
         </header>
 
@@ -357,6 +356,1125 @@
     <!-- header 6 end -->
 
 
+    <!-- header 7 start -->
+    <section class="section_divider">
+      <div>Header 7</div>
+    </section>
+    <section class=" dark:bg-gray-800">
+
+      <div class="px-4 py-6 mx-auto lg:py-8 sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+        <div class="relative flex items-center justify-between lg:justify-center lg:space-x-16">
+          <ul class="flex items-center space-x-8 lg:flex">
+            <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
+            <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
+            <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
+          </ul>
+          <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+            <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+              <rect x="3" y="1" width="7" height="12"></rect>
+              <rect x="3" y="17" width="7" height="6"></rect>
+              <rect x="14" y="1" width="7" height="6"></rect>
+              <rect x="14" y="11" width="7" height="12"></rect>
+            </svg>
+            <span class="ml-2 text-xl font-bold tracking-wide dark:text-gray-300 text-gray-800 uppercase">Company</span>
+          </a>
+          <ul class="flex items-center space-x-8 lg:flex">
+            <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
+            <li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
+            <li><a href="#" aria-label="Sign up" title="Sign up" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign up</a></li>
+          </ul>
+          <!-- Mobile menu -->
+          <div class="lg:hidden">
+            <button aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline hover:bg-deep-purple-50 focus:bg-deep-purple-50">
+              <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
+                <path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
+                <path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
+              </svg>
+            </button>
+            Mobile menu dropdown 
+            <div class="absolute top-0 left-0 w-full">
+              <div class="p-5 bg-white border rounded shadow-sm">
+                <div class="flex items-center justify-between mb-4">
+                  <div>
+                    <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+                      <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                        <rect x="3" y="1" width="7" height="12"></rect>
+                        <rect x="3" y="17" width="7" height="6"></rect>
+                        <rect x="14" y="1" width="7" height="6"></rect>
+                        <rect x="14" y="11" width="7" height="12"></rect>
+                      </svg>
+                      <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
+                    </a>
+                  </div>
+                  <div>
+                    <button aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                      <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                        <path
+                          fill="currentColor"
+                          d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <nav>
+                  <ul class="space-y-4">
+                    <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
+                    <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
+                    <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
+                    <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
+                    <li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
+                    <li>
+                      <a
+                        href="#"
+                        class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                        aria-label="Sign up"
+                        title="Sign up"
+                      >
+                        Sign up
+                      </a>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+            </div>
+          
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <!-- header 7 end -->
+
+    <!-- header 8 start -->
+    <section class="section_divider">
+      <div>Header 8</div>
+    </section>
+
+    <div class="bg-gray-900">
+      <div class="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+        <div class="relative flex items-center justify-between">
+          <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+            <svg class="w-8 text-teal-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+              <rect x="3" y="1" width="7" height="12"></rect>
+              <rect x="3" y="17" width="7" height="6"></rect>
+              <rect x="14" y="1" width="7" height="6"></rect>
+              <rect x="14" y="11" width="7" height="12"></rect>
+            </svg>
+            <span class="ml-2 text-xl font-bold tracking-wide text-gray-100 uppercase">Company</span>
+          </a>
+          <ul class="flex items-center space-x-8 lg:flex">
+            <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Product</a></li>
+            <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Features</a></li>
+            <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Pricing</a></li>
+            <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">About us</a></li>
+            <li>
+              <a
+                href="#"
+                class="inline-flex items-center justify-center h-8 px-4 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                aria-label="Sign up"
+                title="Sign up"
+              >
+                Sign up
+              </a>
+            </li>
+          </ul>
+          <!-- Mobile menu -->
+          <div class="lg:hidden">
+            <button aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline">
+              <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
+                <path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
+                <path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
+              </svg>
+            </button>
+            <div class="absolute top-0 left-0 w-full">
+              <div class="p-5 bg-white border rounded shadow-sm">
+                <div class="flex items-center justify-between mb-4">
+                  <div>
+                    <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+                      <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                        <rect x="3" y="1" width="7" height="12"></rect>
+                        <rect x="3" y="17" width="7" height="6"></rect>
+                        <rect x="14" y="1" width="7" height="6"></rect>
+                        <rect x="14" y="11" width="7" height="12"></rect>
+                      </svg>
+                      <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
+                    </a>
+                  </div>
+                  <div>
+                    <button aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                      <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                        <path
+                          fill="currentColor"
+                          d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
+                        ></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <nav>
+                  <ul class="space-y-4">
+                    <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
+                    <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
+                    <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
+                    <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
+                    <li>
+                      <a
+                      href="#"
+                        class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                        aria-label="Sign up"
+                        title="Sign up"
+                      >
+                        Sign up
+                      </a>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+            </div>
+           
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    
+    <!-- header 8 end -->
+
+    
+    <!-- header 9 start -->
+    <section class="section_divider">
+      <div>Header 9</div>
+    </section>
+    <header class="p-4 dark:bg-gray-800 dark:text-gray-100">
+      <div class="container flex justify-between h-16 mx-auto">
+        <ul class="items-stretch hidden space-x-3 lg:flex">
+          <li class="flex">
+            <a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 border-transparent text-indigo-400 border-indigo-400">Link</a>
+          </li>
+          <li class="flex">
+            <a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent">Link</a>
+          </li>
+          <li class="flex">
+            <a rel="noopener noreferrer" href="#" class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent">Link</a>
+          </li>
+        </ul>
+        <a rel="noopener noreferrer" href="#" aria-label="Back to homepage" class="flex items-center p-2">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-8 h-8 text-black dark:text-indigo-400">
+            <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
+            <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+          </svg>
+        </a>
+        <div class="flex items-center md:space-x-4">
+          <div class="relative">
+            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
+              <button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
+                <svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-coolGray-100">
+                  <path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
+                </svg>
+              </button>
+            </span>
+            <input type="search" name="Search" placeholder="Search..." class="w-32 py-2 pl-10 text-sm border rounded-md sm:w-auto focus:outline-none  dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
+          </div>
+          <button type="button" class=" px-6 py-2 font-semibold rounded lg:block bg-indigo-500 dark:bg-indigo-400 dark:text-gray-900">Log in</button>
+        </div>
+        <button title="Open menu" type="button" class="p-4 lg:hidden">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 dark:text-coolGray-100">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </button>
+      </div>
+    </header>
+    
+    <!-- header 9 end -->
+
+
+    <!-- header 10 start -->
+    <section class="section_divider">
+      <div>Header 10</div>
+    </section>
+    <header class="z-30 w-full px-2 py-4 bg-white dark:bg-gray-800 sm:px-4">
+      <div class="flex items-center justify-between mx-auto max-w-7xl">
+        <a href="#" title=" Home Page" class="flex items-center">
+          <svg class="w-auto h-6 dark:fill-gray-300 fill-gray-800" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
+            <path
+              d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
+              fill=""
+            />
+            <path
+              d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
+              fill="#9E58E9"
+            />
+            <path
+              d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
+              fill="#7629C8"
+            />
+          </svg>
+          <span class="sr-only">Kutty</span>
+        </a>
+        <div class="relative hidden space-x-1 md:inline-flex" x-data="{ one: false, two: false }">
+          <div class="relative">
+            <button class="flex items-center rounded-full btn btn-sm btn-white" @click="one = true">
+              Features
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+                class="flex-none w-4 h-4 ml-1 -mr-1 transition duration-200 ease-out transform"
+                :class="{ 'rotate-180': one }"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </button>
+            <div
+              class="absolute top-0 z-50 w-screen max-w-md p-2 mx-0 my-12 text-sm text-gray-800 transform bg-white rounded shadow lg:left-1/2 lg:-translate-x-1/2"
+              x-show.transition.in.opacity.out.opacity="one"
+              @click.away="one = false"
+              x-cloak
+            >
+              <div class="grid grid-cols-2 gap-2 mb-2">
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                  <p class="font-semibold">Shared Inbox</p>
+                  Manage conversations at scale
+                </a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                  <p class="font-semibold">Reporting</p>
+                  Real-time data at your fingertips
+                </a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                  <p class="font-semibold">Knowledge Base</p>
+                  Instant answers for customers
+                </a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                  <p class="font-semibold">Live Chat</p>
+                  Make your website more useful
+                </a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
+                  <p class="font-semibold">In-app Messaging</p>
+                  Engage people on your website
+                </a>
+              </div>
+              <a href="#" class="flex items-center justify-center p-3 font-medium transition bg-gray-200 rounded text-primary hover:bg-gray-300">
+                View all features
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="w-4 h-4 ml-1"
+                >
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                  <polyline points="12 5 19 12 12 19"></polyline>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="relative">
+            <button class="flex items-center rounded-full btn btn-sm btn-white" @click="two = true">
+              Blog
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+                class="flex-none w-4 h-4 ml-1 -mr-1 transition duration-200 ease-out transform"
+                :class="{ 'rotate-180': two }"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </button>
+            <div
+              class="absolute top-0 z-50 w-screen max-w-md p-2 mx-0 my-12 text-sm text-gray-800 transform bg-white rounded shadow lg:left-1/2 lg:-translate-x-1/2"
+              x-show.transition.in.opacity.out.opacity="two"
+              @click.away="two = false"
+              x-cloak
+            >
+              <p class="pt-2 pl-3 mb-1 text-xs font-semibold tracking-wide text-gray-500 uppercase">Our popular posts</p>
+              <div class="flex flex-col space-y-1 font-medium text-gray-800">
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary"> Enable suspect commits, unminify JS, and track releases with Vercel and Sentry </a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Asynchronous CSV Exports with Discover</a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary"> Automate Release Management with the Sentry Release GitHub Action </a>
+                <a href="#" class="flex items-center justify-center p-3 transition bg-gray-200 rounded text-primary hover:bg-gray-300">
+                  View all blog posts
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                    class="w-4 h-4 ml-1"
+                  >
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                    <polyline points="12 5 19 12 12 19"></polyline>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <a href="#" class="rounded-full btn btn-sm btn-white">Pricing</a>
+        </div>
+        <div class="flex items-center space-x-1">
+          <a href="#" class="hidden rounded-full btn btn-sm btn-white md:inline-flex">Sign in</a>
+          <a href="#" class="rounded-full btn btn-sm btn-dark">Sign up</a>
+          <div class="inline-flex md:hidden" x-data="{ open: false }">
+            <button class="flex-none px-2 btn btn-white btn-sm" @click="open = true">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+                class="w-5 h-5"
+              >
+                <line x1="3" y1="12" x2="21" y2="12"></line>
+                <line x1="3" y1="6" x2="21" y2="6"></line>
+                <line x1="3" y1="18" x2="21" y2="18"></line>
+              </svg>
+              <span class="sr-only">Open Menu</span>
+            </button>
+            <div class="absolute top-0 left-0 right-0 z-50 flex flex-col p-2 m-2 space-y-1 bg-white rounded shadow" x-show.transition="open" @click.away="open = false" x-cloak>
+              <button class="self-end flex-none px-2 btn btn-link btn-icon" @click="open = false">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+                <span class="sr-only">Close Menu</span>
+              </button>
+              <div class="grid grid-cols-2 gap-1">
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Pricing</a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Blog</a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Sign in</a>
+              </div>
+              <p class="pt-2 pl-3 text-xs font-semibold tracking-wide text-gray-500 uppercase">Features</p>
+              <div class="grid grid-cols-2 gap-1">
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Shared Inbox</a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Reporting</a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Knowledge Base</a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Live Chat</a>
+                <a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">In-app Messaging</a>
+              </div>
+              <a href="#" class="flex items-center justify-center p-3 font-medium transition bg-gray-200 rounded text-primary hover:bg-gray-300">
+                View all features
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="w-4 h-4 ml-1"
+                >
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                  <polyline points="12 5 19 12 12 19"></polyline>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+    
+    <!-- Remove the div below -->
+    <div class="py-48 bg-gray-400"></div>
+    
+    
+    <!-- header 10 end -->
+
+    <!-- header 11 start -->
+    <section class="section_divider">
+      <div>Header 11</div>
+    </section>
+
+    <nav class="bg-white shadow dark:bg-gray-800">
+      <div class="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300">
+          <a href="#" class="text-gray-800 transition-colors duration-200 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6">home</a>
+
+          <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">features</a>
+
+          <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">pricing</a>
+
+          <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">blog</a>
+
+          <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">
+              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 11.9554V12.0446C1.01066 14.7301 1.98363 17.1885 3.59196 19.0931C4.05715 19.6439 4.57549 20.1485 5.13908 20.5987C5.70631 21.0519 6.31937 21.4501 6.97019 21.7853C7.90271 22.2656 8.91275 22.6165 9.97659 22.8143C10.5914 22.9286 11.2243 22.9918 11.8705 22.9993C11.9136 22.9998 11.9567 23 11.9999 23C15.6894 23 18.9547 21.1836 20.9502 18.3962C21.3681 17.8125 21.7303 17.1861 22.0291 16.525C22.6528 15.1448 22.9999 13.613 22.9999 12C22.9999 8.73978 21.5816 5.81084 19.3283 3.79653C18.8064 3.32998 18.2397 2.91249 17.6355 2.55132C15.9873 1.56615 14.0597 1 11.9999 1C11.888 1 11.7764 1.00167 11.6653 1.00499C9.99846 1.05479 8.42477 1.47541 7.0239 2.18719C6.07085 2.67144 5.19779 3.29045 4.42982 4.01914C3.7166 4.69587 3.09401 5.4672 2.58216 6.31302C2.22108 6.90969 1.91511 7.54343 1.6713 8.20718C1.24184 9.37631 1.00523 10.6386 1 11.9554ZM20.4812 15.0186C20.8171 14.075 20.9999 13.0588 20.9999 12C20.9999 9.54265 20.0151 7.31533 18.4186 5.6912C17.5975 7.05399 16.5148 8.18424 15.2668 9.0469C15.7351 10.2626 15.9886 11.5603 16.0045 12.8778C16.7692 13.0484 17.5274 13.304 18.2669 13.6488C19.0741 14.0252 19.8141 14.487 20.4812 15.0186ZM15.8413 14.8954C16.3752 15.0321 16.904 15.22 17.4217 15.4614C18.222 15.8346 18.9417 16.3105 19.5723 16.8661C18.0688 19.2008 15.5151 20.7953 12.5788 20.9817C13.5517 20.0585 14.3709 18.9405 14.972 17.6514C15.3909 16.7531 15.678 15.8272 15.8413 14.8954ZM13.9964 12.6219C13.9583 11.7382 13.7898 10.8684 13.5013 10.0408C10.6887 11.2998 7.36584 11.3765 4.35382 9.97197C4.01251 9.81281 3.68319 9.63837 3.36632 9.44983C3.12787 10.2584 2.99991 11.1142 2.99991 12C2.99991 13.9462 3.61763 15.748 4.6677 17.2203C6.83038 14.1875 10.3685 12.4987 13.9964 12.6219ZM6.047 18.7502C7.77258 16.059 10.7714 14.5382 13.8585 14.6191C13.723 15.3586 13.4919 16.093 13.1594 16.8062C12.3777 18.4825 11.1453 19.805 9.67385 20.6965C8.31043 20.3328 7.07441 19.6569 6.047 18.7502ZM11.9999 3C13.7846 3 15.4479 3.51946 16.847 4.41543C16.2113 5.54838 15.3593 6.4961 14.368 7.23057C13.3472 5.57072 11.8752 4.16433 10.027 3.21692C10.6619 3.07492 11.3222 3 11.9999 3ZM8.80619 4.84582C10.4462 5.61056 11.7474 6.80659 12.6379 8.23588C10.3464 9.24654 7.64722 9.30095 5.19906 8.15936C4.83384 7.98905 4.48541 7.79735 4.15458 7.58645C4.91365 6.24006 6.00929 5.10867 7.32734 4.30645C7.82672 4.44058 8.32138 4.61975 8.80619 4.84582Z" fill="currentColor" /></svg>
+          </a>
+
+          <a href="#" class="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-200 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6">
+              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m.75 19h7.092c4.552 0 6.131-6.037 2.107-8.203 2.701-2.354 1.029-6.797-2.595-6.797h-6.604c-.414 0-.75.336-.75.75v13.5c0 .414.336.75.75.75zm.75-13.5h5.854c3.211 0 3.215 4.768 0 4.768h-5.854zm0 6.268h6.342c3.861 0 3.861 5.732 0 5.732h-6.342z"/><path d="m18.374 7.857c-3.259 0-5.755 2.888-5.635 5.159-.247 3.28 2.397 5.984 5.635 5.984 2.012 0 3.888-1.065 4.895-2.781.503-.857-.791-1.613-1.293-.76-.739 1.259-2.12 2.041-3.602 2.041-2.187 0-3.965-1.668-4.125-3.771 1.443.017 4.136-.188 8.987-.033.016 0 .027-.008.042-.008 2-.09-.189-5.831-4.904-5.831zm-3.928 4.298c1.286-3.789 6.718-3.676 7.89.064-4.064.097-6.496-.066-7.89-.064z"/><path d="m21.308 6.464c.993 0 .992-1.5 0-1.5h-5.87c-.993 0-.992 1.5 0 1.5z"/></svg>
+          </a>
+      </div>
+  </nav>
+    
+    <!-- header 11 end -->
+
+    <!-- header 12 start -->
+
+    <section class="section_divider">
+      <div>Header 12</div>
+    </section>
+
+    <nav class="bg-white shadow dark:bg-gray-800">
+      <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
+          <div class="flex items-center justify-between">
+              <div>
+                  <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+              </div>
+              
+              <!-- Mobile menu button -->
+              <div class="flex md:hidden">
+                  <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                      <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                          <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                      </svg>
+                  </button>
+              </div>
+          </div>
+
+          <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+          <div class="items-center md:flex">
+              <div class="flex flex-col md:flex-row md:mx-6">
+                  <a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Home</a>
+                  <a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Shop</a>
+                  <a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">Contact</a>
+                  <a class="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0" href="#">About</a>
+              </div>
+
+              <div class="flex justify-center md:block">
+                  <a class="relative text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
+                      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+
+                      <span class="absolute top-3 left-0 p-1 text-xs text-white bg-blue-500 rounded-full"></span>
+                  </a>
+              </div>
+          </div>
+      </div>
+    </nav>
+
+    <!-- header 12 end -->
+
+    <!-- header 13 start -->
+    
+    <section class="section_divider">
+      <div>Header 13</div>
+    </section>
+
+
+    <nav class="bg-white shadow dark:bg-gray-800">
+      <div class="container px-6 py-3 mx-auto md:flex">
+          <div class="flex items-center justify-between">
+              <div>
+                  <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+              </div>
+              
+              <!-- Mobile menu button -->
+              <div class="flex md:hidden">
+                  <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                      <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                          <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                      </svg>
+                  </button>
+              </div>
+          </div>
+
+          <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+          <div class="w-full md:flex md:items-center md:justify-between">
+              <div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
+                  <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
+              </div>
+              
+              <div class="relative">
+                  <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                      <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                          <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </svg>
+                  </span>
+
+                  <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
+              </div>
+          </div>
+      </div>
+  </nav>
+    <!-- header 13 end -->
+
+    <!-- header 14 start -->
+    <section class="section_divider">
+      <div>Header 14</div>
+    </section>
+
+    <nav class="bg-white shadow dark:bg-gray-800">
+      <div class="container px-6 py-4 mx-auto">
+          <div class="md:flex md:items-center md:justify-between">
+              <div class="flex items-center justify-between">
+                  <div class="text-xl font-semibold text-gray-700">
+                      <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                  </div>
+
+                  <!-- Mobile menu button -->
+                  <div class="flex md:hidden">
+                      <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                          <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                              <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                          </svg>
+                      </button>
+                  </div>
+              </div>
+
+              <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+              <div class="flex-1 md:flex md:items-center md:justify-between">
+                  <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
+                      <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
+                      <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
+                      <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
+                      <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
+                  </div>
+
+                  <div class="flex items-center mt-4 md:mt-0">
+                      <button class="hidden mx-4 text-gray-600 transition-colors duration-200 transform md:block dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
+                          <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                          </svg>
+                      </button>
+
+                      <button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
+                          <div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
+                              <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="object-cover w-full h-full" alt="avatar">
+                          </div>
+
+                          <h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>
+                      </button>
+                  </div>
+              </div>
+          </div>
+      </div>
+    </nav>
+    
+    <!-- header 14 end -->
+
+    <!-- header 15 start -->
+    <section class="section_divider">
+      <div>Header 15</div>
+    </section>
+
+    <nav class="bg-white shadow dark:bg-gray-800">
+      <div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
+          <div class="lg:flex lg:items-center">
+              <div class="flex items-center justify-between">
+                  <div>
+                      <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                  </div>
+
+                  <!-- Mobile menu button -->
+                  <div class="flex lg:hidden">
+                      <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                          <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                              <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                          </svg>
+                      </button>
+                  </div>
+              </div>
+
+              <div class="flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center">
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">features</a>
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">downloads</a>
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">docs</a>
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">support</a>
+                  <a href="#" class="mt-2 transition-colors duration-200 transform lg:mt-0 lg:mx-4 hover:text-gray-900 dark:hover:text-gray-200">blog</a>
+
+                  <div class="relative mt-4 lg:mt-0 lg:mx-4">
+                      <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                          <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
+                              <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                          </svg>
+                      </span>
+
+                      <input type="text" class="w-full py-1 pl-10 pr-4 text-gray-700 placeholder-gray-600 bg-white border-b border-gray-600 dark:placeholder-gray-300 dark:focus:border-gray-300 lg:w-56 lg:border-transparent dark:bg-gray-800 dark:text-gray-300 focus:outline-none focus:border-gray-600" placeholder="Search">
+                  </div>
+              </div>
+          </div>
+
+          <div class="flex justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
+              <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
+                  <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                          d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                      </path>
+                  </svg>
+              </a>
+
+              <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300"
+                  aria-label="Facebook">
+                  <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                          d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                      </path>
+                  </svg>
+              </a>
+
+              <a href="#" class="mx-2 text-gray-600 transition-colors duration-200 transform dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Github">
+                  <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                          d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                      </path>
+                  </svg>
+              </a>
+          </div>
+      </div>
+    </nav>
+    
+    <!-- header 15 end -->
+
+    <!-- header 16 start -->
+    <section class="section_divider">
+      <div>Header 16</div>
+    </section>
+  
+      <nav class="bg-white shadow dark:bg-gray-800">
+          <div class="container px-6 py-3 mx-auto">
+              <div class="flex flex-col md:flex-row md:justify-between md:items-center">
+                  <div class="flex items-center justify-between">
+                      <div class="flex items-center">
+                          <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+  
+                          <!-- Search input on desktop screen -->
+                          <div class="hidden mx-10 md:block">
+                              <div class="relative">
+                                  <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                      <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                          <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                      </svg>
+                                  </span>
+  
+                                  <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
+                              </div>
+                          </div>
+                      </div>
+  
+                      <!-- Mobile menu button -->
+                      <div class="flex md:hidden">
+                          <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                              <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+                                  <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                              </svg>
+                          </button>
+                      </div>
+                  </div>
+  
+                  <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                  <div class="items-center md:flex">
+                      <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
+                          <a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
+                          <a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
+                          <a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
+                          <a class="my-1 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
+                      </div>
+  
+                      <div class="flex items-center py-2 -mx-1 md:mx-0">
+                          <a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-gray-500 rounded-md hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
+                          <a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
+                      </div>
+  
+                      <!-- Search input on mobile screen -->
+                      <div class="mt-3 md:hidden">
+                          <div class="relative">
+                              <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                  <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                      <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                  </svg>
+                              </span>
+  
+                              <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
+                          </div>
+                      </div>
+                  </div>
+              </div>
+  
+              <div class="py-3 mt-3 -mx-3 overflow-y-auto whitespace-nowrap h-0 bg-transparent">
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">News</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Articles</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Videos</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Tricks</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHP</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Laravel</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Vue</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">React</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Tailwindcss</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Meraki UI</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">CPP</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">JavaScript</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Ruby</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Mysql</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Pest</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHPUnit</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Netlify</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">VS Code</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">PHPStorm</a>
+                  <a class="mx-4 text-sm leading-5 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:underline md:my-0" href="#">Sublime</a>
+              </div>
+          </div>
+      </nav>
+    
+    <!-- header 16 end -->
+
+    <!-- header 17 start -->
+    <section class="section_divider">
+      <div>Header 17 </div>
+    </section>
+        <!-- component -->
+    <nav class=" bg-gray-100 dark:bg-gray-800">
+      <div class="flex justify-between items-center bg-white dark:bg-gray-800 py-6 lg:px-40 md:px-20 px-10">
+        <div class="">
+          <a href="#"><img class="h-10 cursor-pointer" src="https://i.imgur.com/TMfJoK7.png" alt="" /></a>
+        </div>
+        <ul class="lg:flex hidden items-center space-x-10 dark:text-cyan-400">
+          <li class="text-lg font-semibold hover:text-red-500 transition duration-200 cursor-pointer">Home</li>
+          <li class="text-lg font-semibold hover:text-red-500 transition duration-200 cursor-pointer">Pages</li>
+          <li class="text-lg font-semibold hover:text-red-500 transition duration-200 cursor-pointer">Products</li>
+          <li class="text-lg font-semibold hover:text-red-500 transition duration-200 cursor-pointer">Contact</li>
+          <li class="hover:text-red-500 transition duration-200 cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+            </svg>
+          </li>
+          <li class="hover:text-red-500 transition duration-200 cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+            </svg>
+          </li>
+        </ul>
+        <div class="lg:hidden">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </div>
+      </div>
+    </nav>
+    
+    <!-- header 17 end -->
+
+    <!-- header 18 start -->
+    <section class="section_divider">
+      <div>Header 18</div>
+    </section>
+    
+    <nav class="bg-[#242526] p-1 h-12">
+      <div class="flex justify-between items-center">
+      <!-- LEFT -->
+      <div class="flex items-center space-x-2">
+        <!-- logo -->
+        <img class="h-8" src="https://freepngimg.com/thumb/facebook/62487-bluetie-icons-computer-facebook-login-icon-email.png" alt="">
+        <input class="rounded-full h-6 bg-[#3A3B3C] p-4 text-xs text-gray-400 outline-none" type="text" placeholder="Search" />
+      </div>
+      <!-- MIDDLE -->
+      <div class="relative flex justify-between w-1/5 items-center">
+        <div class="relative group">
+          <div class="group-hover:bg-gray-600 p-1 group-hover:rounded-lg transition-all ease-in-out duration-300">
+            <img class="h-5 cursor-pointer" src="https://img.icons8.com/external-kmg-design-flat-kmg-design/32/000000/external-home-ui-essential-kmg-design-flat-kmg-design.png"/>
+          </div>
+            <div class="absolute group-hover:border-b-2 group-hover:cursor-pointer mt-2 border-blue-500 w-full transition-all duration-100 ease-in-out "></div>
+        </div>
+        <div class="relative group">
+          <div class="group-hover:bg-gray-600 p-1 group-hover:rounded-lg transition-all ease-in-out duration-300">
+            <img class="h-5 cursor-pointer" src="https://img.icons8.com/fluency/48/000000/conference-call.png"/>
+          </div>
+            <div class="absolute group-hover:border-b-2 group-hover:cursor-pointer mt-2 border-blue-500 w-full transition-all duration-100 ease-in-out"></div>
+        </div>
+        <div class="relative group">
+          <div class="group-hover:bg-gray-600 p-1 group-hover:rounded-lg transition-all ease-in-out duration-300">
+            <img class="h-5 cursor-pointer" src="https://img.icons8.com/external-bearicons-outline-color-bearicons/64/000000/external-watch-call-to-action-bearicons-outline-color-bearicons.png"/>
+          </div>
+            <div class="absolute group-hover:border-b-2 group-hover:cursor-pointer mt-2 border-blue-500 w-full transition-all duration-100 ease-in-out "></div>
+        </div>
+      </div>
+      <!-- RIGHT -->
+      <div class="flex justify-evenly w-1/5">
+        
+        <img class="h-5" src="https://img.icons8.com/external-kmg-design-flat-kmg-design/32/000000/external-home-ui-essential-kmg-design-flat-kmg-design.png"/>
+        <img class="h-5" src="https://img.icons8.com/fluency/48/000000/conference-call.png"/>
+        <img class="h-5" src="https://img.icons8.com/external-bearicons-outline-color-bearicons/64/000000/external-watch-call-to-action-bearicons-outline-color-bearicons.png"/>
+      </div>
+      </div>
+    </nav>
+        
+    <!-- header 18 end -->
+
+    <!-- header 19 start -->
+    <section class="section_divider">
+      <div>Header 19</div>
+    </section>
+    <nav class="flex justify-between px-20 py-10 items-center bg-white dark:bg-gray-800">
+      <h1 class="text-xl text-gray-800 dark:text-red-400 font-bold">HotCoffee</h1>
+      <div class="flex items-center">
+        <div class="flex items-center ">
+          <span class="absolute flex items-center ">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pt-0.5 text-red-600 stroke-gray-500 dark:stroke-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </span>
+          <input class="pl-10 py-1 w-full pr-4 outline-none bg-transparent border-b-gray-500  focus:border-b-2 dark:focus:border-b-red-400 font-bold text-gray-500  dark:placeholder:text-red-400" type="text" name="search" id="search" placeholder="Search..." />
+        </div>
+      </div>
+        <ul class="flex items-center space-x-6">
+          <li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Home</li>
+          <li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Articles</li>
+          <li>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path d="M12 14l9-5-9-5-9 5 9 5z" />
+              <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
+            </svg>
+          </li>
+          <li>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </li>
+          <li>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            </svg>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    
+    <!-- header 19 end -->
+
+    <!-- header 20 start -->
+    <section class="section_divider">
+      <div>Header 20 </div>
+    </section>
+        
+    <div class="bg-gray-100 dark:bg-gray-800 ">
+      <nav class="bg-white dark:bg-gray-800 px-6 relative shadow-md">
+        <div class="flex flex-row justify-between items-center py-2">
+          <h3 class="font-semibold text-3xl text-gray-500 dark:text-cyan-300 dark:focus:text-cyan-600">Webapp</h3>
+          <div class="group flex flex-col items-center">
+            <button class="p-2 rounded-lg md:hidden">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-10 fill-current" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /></svg>
+            </button>
+            <div class="hidden group-hover:block md:block absolute md:static bg-white dark:bg-gray-800 inset-x-0 top-16 py-3 shadow-md md:shadow-none text-gray-600">
+              <div class="flex flex-row justify-center items-center text-center font-semibold text-gray-500">
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/></svg>
+                  Home 
+                </a>
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/></svg>
+                  Account 
+                </a>
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/></svg>
+                  Logout 
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    
+    <!-- header 20 end -->
+
+    <!-- header 21 start -->
+    <section class="section_divider">
+      <div>Header 21</div>
+    </section>
+    <nav class="w-full py-6 bg-white dark:bg-gray-800 ">
+      <div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
+        <section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" />
+          </svg>
+          <a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
+        </section>
+        <section>
+          <ul class="md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold hidden md:flex">
+            <li class="relative group">
+              <a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
+            </li>
+            <li class="relative group">
+              <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
+            </li>
+            <li class="relative group">
+              <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
+            </li>
+            <li><a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a></li>
+          </ul>
+          <button class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
+            </svg>
+          </button>
+        </section>
+      </div>
+    </nav>
+    
+    <!-- header 21 end -->
+
+
+    <!-- header 22 start -->
+     <section class="section_divider">
+       <div>Header 22</div>
+     </section>
+      <nav class="w-full py-6 bg-white dark:bg-gray-800">
+        <div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
+          <section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" />
+            </svg>
+            <a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
+          </section>
+          <section>
+            <ul class="md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold hidden md:flex">
+              <li class="relative group">
+                <a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
+                <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" />
+              </li>
+              <li class="relative group">
+                <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
+                <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" />
+              </li>
+              <li class="relative group">
+                <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
+                <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" />
+              </li>
+            </ul>
+          </section>
+          <section>
+            <button class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <ul class="md:flex hidden space-x-4">
+                      <li><a href="#" class="bg-transparent  px-4 py-1 rounded-xl border-purple-500 border-2 text-purple-500 font-semibold hover:bg-gray-100 active:bg-gray-200 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Login</a></li>
+
+              <li><a href="#" class="bg-purple-500 px-4 py-1 rounded-xl border-purple-500 border-2 text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Register</a></li>
+
+            </ul>
+          </section>
+        </div>
+      </nav>
+    <!-- header 22 end -->
+
+    <!-- header 23 start -->
+    <section class="section_divider">
+      <div>Header 23</div>
+    </section>
+
+    <header class="dark:bg-gray-800">
+
+          
+        <nav class="border-gray-200 px-2 mb-10 dark:bg-gray-800 py-3">
+          <div class="container mx-auto flex flex-wrap items-center justify-between">
+          <a href="#" class="flex">
+            <svg class="h-10 mr-3" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)">
+              <path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
+              <span class="self-center text-lg font-semibold whitespace-nowrap dark:text-gray-300">FlowBite</span>
+          </a>
+          <div class="flex md:order-2">
+              <div class="relative mr-3 md:mr-0 hidden md:block">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
+                </div>
+                <input type="text" id="email-adress-icon" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2" placeholder="Search...">
+              </div>
+              <button data-collapse-toggle="mobile-menu-3" type="button" class="md:hidden text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-lg inline-flex items-center justify-center" aria-controls="mobile-menu-3" aria-expanded="false">
+              <span class="sr-only">Open main menu</span>
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+              <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+            </button>
+          </div>
+          <div class="hidden md:flex justify-between items-center w-full md:w-auto md:order-1" id="mobile-menu-3">
+            <ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
+              <li>
+                <a href="#" class="bg-blue-700 md:bg-transparent block pl-3 pr-4 py-2 text-gray-300 active:text-gray-300 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
+              </li>
+              <li>
+                <a href="#" class="text-gray-500 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 ">About</a>
+              </li>
+              <li>
+                <a href="#" class="text-gray-500 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
+              </li>
+            </ul>
+          </div>
+          </div>
+        </nav>
+    </header>
+      
+    <script type="text/javascript" class="toggle_script">
+      const toggleCollapse = (elementId, show = true) => {
+          const collapseEl = document.getElementById(elementId);
+
+          if (show) {
+            collapseEl.classList.remove('hidden');
+          } else {
+            collapseEl.classList.add('hidden');
+          }
+        }; // Toggle target elements using [data-collapse-toggle]
+
+
+        document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
+          var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');   
+          collapseToggleEl.addEventListener('click', function () {
+            toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
+          });
+        });
+        window.toggleCollapse = toggleCollapse;
+    </script>
+    
+    <!-- header 23 end -->
 
 <!-- start of script section -->
 <script type="text/javascript">