From 9fd68f660c1f3327d55437a736d7462c36888812 Mon Sep 17 00:00:00 2001
From: merajjahir <meraj.jahir17@gmail.com>
Date: Wed, 9 Mar 2022 20:14:06 +0600
Subject: [PATCH]  added other tempalte parts

---
 dist/tailshape.css                            | 560 ++++++++------
 public/componets/accordion/4_accordion.html   |   2 +
 public/componets/contact/2_contact.html       |  53 +-
 public/componets/contact/contact.html         |  91 +++
 public/componets/cta/cta.html                 |  34 +
 public/componets/faq/2_faq.html               |  74 +-
 public/componets/features/feature.html        | 334 +++++++++
 public/componets/footer/footer.html           | 163 +++++
 public/componets/hero/hero.html               | 276 ++++++-
 public/componets/navs_headers/19_header.html  |  78 +-
 public/componets/navs_headers/21_header.html  |  40 +-
 public/componets/navs_headers/header.html     | 126 +++-
 public/componets/pricing/pricing.html         | 460 ++++++++++++
 public/componets/section/4_section.html       |  23 +
 public/componets/section/section.html         |  33 +-
 .../componets/testimonial/13_testimonial.html |  27 +
 public/componets/testimonial/testimonial.html | 436 +++++++----
 public/template/10_template.html              |   4 +-
 public/template/1_template.html               |   2 +
 public/template/28_template.html              | 562 ++++++++++++++
 public/template/29_template.html              | 546 ++++++++++++++
 public/template/30_template.html              | 272 +++++++
 public/template/31_template.html              |  46 ++
 public/template/32_template.html              |  46 ++
 public/template/6_template.html               |   8 +-
 public/template/7_template.html               | 161 ++--
 public/template/8_template.html               |   2 +-
 public/template/9_template.html               |  77 +-
 public/template/about_page/1_about_page.html  | 516 +++++++++++++
 public/template/about_page/2_about_page.html  |  79 ++
 public/template/about_page/3_about_page.html  |  46 ++
 .../template/contact_page/1_contact_page.html | 360 +++++++++
 .../template/contact_page/2_contact_page.html |  46 ++
 .../template/contact_page/3_contact_page.html |  46 ++
 .../template/service_page/1_service_page.html | 690 ++++++++++++++++++
 .../template/service_page/2_service_page.html |  46 ++
 .../template/service_page/3_service_page.html |  46 ++
 37 files changed, 5753 insertions(+), 658 deletions(-)
 create mode 100644 public/template/31_template.html
 create mode 100644 public/template/32_template.html
 create mode 100644 public/template/about_page/1_about_page.html
 create mode 100644 public/template/about_page/2_about_page.html
 create mode 100644 public/template/about_page/3_about_page.html
 create mode 100644 public/template/contact_page/1_contact_page.html
 create mode 100644 public/template/contact_page/2_contact_page.html
 create mode 100644 public/template/contact_page/3_contact_page.html
 create mode 100644 public/template/service_page/1_service_page.html
 create mode 100644 public/template/service_page/2_service_page.html
 create mode 100644 public/template/service_page/3_service_page.html

diff --git a/dist/tailshape.css b/dist/tailshape.css
index d576372..d540960 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -1171,6 +1171,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: 3rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
 .-mt-5 {
   margin-top: -1.25rem;
 }
@@ -1179,10 +1187,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: -2.5rem;
 }
 
-.mt-0 {
-  margin-top: 0px;
-}
-
 .ml-8 {
   margin-left: 2rem;
 }
@@ -1207,10 +1211,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: 8rem;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -1235,10 +1235,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: -0.25rem;
 }
 
+.-mt-32 {
+  margin-top: -8rem;
+}
+
+.-ml-64 {
+  margin-left: -16rem;
+}
+
+.ml-0 {
+  margin-left: 0px;
+}
+
 .mt-auto {
   margin-top: auto;
 }
 
+.-ml-60 {
+  margin-left: -15rem;
+}
+
 .-ml-0 {
   margin-left: -0px;
 }
@@ -1255,6 +1271,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: -0.5rem;
 }
 
+.mr-0 {
+  margin-right: 0px;
+}
+
+.mt-48 {
+  margin-top: 12rem;
+}
+
+.-mt-64 {
+  margin-top: -16rem;
+}
+
+.-ml-12 {
+  margin-left: -3rem;
+}
+
 .mr-16 {
   margin-right: 4rem;
 }
@@ -1299,10 +1331,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: auto;
 }
 
-.ml-0 {
-  margin-left: 0px;
-}
-
 .-mt-36 {
   margin-top: -9rem;
 }
@@ -1327,34 +1355,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: -0.75rem;
 }
 
-.mr-0 {
-  margin-right: 0px;
-}
-
-.mt-48 {
-  margin-top: 12rem;
-}
-
-.-mt-64 {
-  margin-top: -16rem;
-}
-
-.-ml-12 {
-  margin-left: -3rem;
-}
-
-.-mt-32 {
-  margin-top: -8rem;
-}
-
-.-ml-64 {
-  margin-left: -16rem;
-}
-
-.-ml-60 {
-  margin-left: -15rem;
-}
-
 .-mt-24 {
   margin-top: -6rem;
 }
@@ -1515,6 +1515,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 28rem;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
 .h-px {
   height: 1px;
 }
@@ -1531,10 +1535,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 2.75rem;
 }
 
-.h-20 {
-  height: 5rem;
-}
-
 .h-0\.5 {
   height: 0.125rem;
 }
@@ -1555,6 +1555,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 0.375rem;
 }
 
+.h-max {
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -1567,6 +1573,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-height: 100%;
 }
 
+.max-h-10 {
+  max-height: 2.5rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -1667,6 +1677,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 28rem;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-32 {
   width: 8rem;
 }
@@ -1703,10 +1717,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 50%;
 }
 
-.w-20 {
-  width: 5rem;
-}
-
 .w-11\/12 {
   width: 91.666667%;
 }
@@ -2248,14 +2258,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
-.grid-cols-7 {
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -2292,6 +2302,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   place-content: center;
 }
 
+.place-items-start {
+  place-items: start;
+}
+
 .place-items-center {
   place-items: center;
 }
@@ -2401,6 +2415,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   row-gap: 2rem;
 }
 
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
@@ -2549,6 +2568,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.-space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(-0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(-0.5rem * var(--tw-space-y-reverse));
+}
+
 .space-y-reverse > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 1;
 }
@@ -2590,6 +2615,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(243 244 246 / var(--tw-divide-opacity));
 }
 
+.divide-indigo-600 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(79 70 229 / var(--tw-divide-opacity));
+}
+
 .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 0.5;
 }
@@ -3059,21 +3089,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(134 239 172 / var(--tw-border-opacity));
 }
 
-.border-teal-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 184 166 / var(--tw-border-opacity));
-}
-
-.border-cyan-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(103 232 249 / var(--tw-border-opacity));
-}
-
 .border-emerald-300 {
   --tw-border-opacity: 1;
   border-color: rgb(110 231 183 / var(--tw-border-opacity));
 }
 
+.border-teal-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(20 184 166 / var(--tw-border-opacity));
+}
+
 .border-r-gray-200 {
   --tw-border-opacity: 1;
   border-right-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -3188,6 +3213,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
 }
 
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
@@ -3208,11 +3243,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .bg-blue-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
@@ -3332,11 +3362,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
 
-.bg-green-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
 .bg-pink-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(236 72 153 / var(--tw-bg-opacity));
@@ -3497,9 +3522,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(204 251 241 / var(--tw-bg-opacity));
 }
 
-.bg-red-300 {
+.bg-red-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-5 {
@@ -3534,6 +3559,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-image: url('https://images.unsplash.com/photo-1623479322729-28b25c16b011?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=1280');
 }
 
+.bg-gradient-to-tr {
+  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
+}
+
 .bg-\[url\(\'https\:\/\/source\.unsplash\.com\/random\/640x480\/\?grayscale\'\)\] {
   background-image: url('https://source.unsplash.com/random/640x480/?grayscale');
 }
@@ -3580,6 +3609,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(253 242 248 / 0));
 }
 
+.from-indigo-600 {
+  --tw-gradient-from: #4f46e5;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(79 70 229 / 0));
+}
+
 .from-gray-100 {
   --tw-gradient-from: #f3f4f6;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(243 244 246 / 0));
@@ -3616,6 +3650,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-gradient-to: #e0e7ff;
 }
 
+.to-purple-600 {
+  --tw-gradient-to: #9333ea;
+}
+
 .to-white {
   --tw-gradient-to: #fff;
 }
@@ -3757,6 +3795,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding: 2rem;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-28 {
   padding: 7rem;
 }
@@ -3773,10 +3815,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding: 0.125rem;
 }
 
-.p-0 {
-  padding: 0px;
-}
-
 .p-12 {
   padding: 3rem;
 }
@@ -3981,11 +4019,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 6rem;
 }
 
-.py-28 {
-  padding-top: 7rem;
-  padding-bottom: 7rem;
-}
-
 .pt-20 {
   padding-top: 5rem;
 }
@@ -4126,6 +4159,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 2.5rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pb-20 {
   padding-bottom: 5rem;
 }
@@ -4146,10 +4183,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-top: 6rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
-}
-
 .pr-4 {
   padding-right: 1rem;
 }
@@ -4162,6 +4195,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 1.25rem;
 }
 
+.pt-48 {
+  padding-top: 12rem;
+}
+
 .pt-0\.5 {
   padding-top: 0.125rem;
 }
@@ -4202,10 +4239,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 2.75rem;
 }
 
-.pt-48 {
-  padding-top: 12rem;
-}
-
 .pl-0 {
   padding-left: 0px;
 }
@@ -4500,6 +4533,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
+.text-indigo-50 {
+  --tw-text-opacity: 1;
+  color: rgb(238 242 255 / var(--tw-text-opacity));
+}
+
 .text-indigo-200 {
   --tw-text-opacity: 1;
   color: rgb(199 210 254 / var(--tw-text-opacity));
@@ -4684,6 +4722,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(129 140 248 / var(--tw-text-opacity));
 }
 
+.text-pink-500 {
+  --tw-text-opacity: 1;
+  color: rgb(236 72 153 / var(--tw-text-opacity));
+}
+
 .text-orange-600 {
   --tw-text-opacity: 1;
   color: rgb(234 88 12 / var(--tw-text-opacity));
@@ -4754,11 +4797,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(20 184 166 / var(--tw-text-opacity));
 }
 
-.text-pink-500 {
-  --tw-text-opacity: 1;
-  color: rgb(236 72 153 / var(--tw-text-opacity));
-}
-
 .text-yellow-900 {
   --tw-text-opacity: 1;
   color: rgb(113 63 18 / var(--tw-text-opacity));
@@ -4779,6 +4817,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(185 28 28 / var(--tw-text-opacity));
 }
 
+.text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
@@ -5263,6 +5306,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 0.375rem;
 }
 
+.before\:bg-indigo-600::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
 .after\:content-\[\'\+\'\]::after {
   --tw-content: '+';
   content: var(--tw-content);
@@ -5835,6 +5884,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   opacity: 0.75;
 }
 
+.hover\:opacity-20:hover {
+  opacity: 0.2;
+}
+
 .hover\:shadow-md:hover {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5847,6 +5900,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-2xl:hover {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
@@ -5859,12 +5918,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:shadow-xl:hover {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:outline-none:hover {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -5965,16 +6018,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
 
-.focus\:border-purple-300:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(216 180 254 / var(--tw-border-opacity));
-}
-
 .focus\:border-purple-400:focus {
   --tw-border-opacity: 1;
   border-color: rgb(192 132 252 / var(--tw-border-opacity));
 }
 
+.focus\:border-purple-300:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(216 180 254 / var(--tw-border-opacity));
+}
+
 .focus\:bg-red-700:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
@@ -6327,16 +6380,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.active\:bg-purple-600:active {
-  --tw-bg-opacity: 1;
-  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\:bg-purple-600:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
+}
+
 .active\:bg-teal-600:active {
   --tw-bg-opacity: 1;
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
@@ -7073,6 +7126,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(165 243 252 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-emerald-200 {
+  --tw-text-opacity: 1;
+  color: rgb(167 243 208 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-purple-300 {
   --tw-text-opacity: 1;
   color: rgb(216 180 254 / var(--tw-text-opacity));
@@ -7148,11 +7206,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(6 182 212 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-emerald-200 {
-  --tw-text-opacity: 1;
-  color: rgb(167 243 208 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-blue-300 {
   --tw-text-opacity: 1;
   color: rgb(147 197 253 / var(--tw-text-opacity));
@@ -7212,6 +7265,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(204 251 241 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-pink-500 {
+  --tw-text-opacity: 1;
+  color: rgb(236 72 153 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
 .dark .dark\:placeholder-white::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(255 255 255 / var(--tw-placeholder-opacity));
@@ -7481,6 +7549,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:hover\:bg-emerald-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
+}
+
 .dark .hover\:dark\:bg-gray-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -7620,6 +7693,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(192 132 252 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-indigo-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / 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);
@@ -7851,6 +7929,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 0px;
   }
 
+  .sm\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .sm\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
   .sm\:-mt-10 {
     margin-top: -2.5rem;
   }
@@ -7903,6 +7989,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 0.25rem;
   }
 
+  .sm\:mr-3 {
+    margin-right: 0.75rem;
+  }
+
   .sm\:ml-5 {
     margin-left: 1.25rem;
   }
@@ -7915,18 +8005,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-bottom: 1.25rem;
   }
 
-  .sm\:mr-3 {
-    margin-right: 0.75rem;
-  }
-
-  .sm\:mt-10 {
-    margin-top: 2.5rem;
-  }
-
-  .sm\:mb-16 {
-    margin-bottom: 4rem;
-  }
-
   .sm\:mt-auto {
     margin-top: auto;
   }
@@ -7943,6 +8021,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     display: flex;
   }
 
+  .sm\:grid {
+    display: grid;
+  }
+
   .sm\:hidden {
     display: none;
   }
@@ -8347,16 +8429,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 1.25rem;
   }
 
-  .sm\:px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .sm\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
 
+  .sm\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
   .sm\:py-1 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
@@ -8391,6 +8473,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-top: 3rem;
   }
 
+  .sm\:pl-0 {
+    padding-left: 0px;
+  }
+
   .sm\:pb-16 {
     padding-bottom: 4rem;
   }
@@ -8407,10 +8493,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 2rem;
   }
 
-  .sm\:pl-0 {
-    padding-left: 0px;
-  }
-
   .sm\:pl-20 {
     padding-left: 5rem;
   }
@@ -8810,6 +8892,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: auto;
   }
 
+  .md\:ml-12 {
+    margin-left: 3rem;
+  }
+
+  .md\:mr-3 {
+    margin-right: 0.75rem;
+  }
+
   .md\:mb-12 {
     margin-bottom: 3rem;
   }
@@ -8830,10 +8920,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 6rem;
   }
 
-  .md\:ml-12 {
-    margin-left: 3rem;
-  }
-
   .md\:mt-12 {
     margin-top: 3rem;
   }
@@ -8842,10 +8928,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: -9rem;
   }
 
-  .md\:mr-3 {
-    margin-right: 0.75rem;
-  }
-
   .md\:-mr-4 {
     margin-right: -1rem;
   }
@@ -8910,6 +8992,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 1.25rem;
   }
 
+  .md\:h-24 {
+    height: 6rem;
+  }
+
   .md\:h-48 {
     height: 12rem;
   }
@@ -8934,10 +9020,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     height: 4rem;
   }
 
-  .md\:h-24 {
-    height: 6rem;
-  }
-
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -9030,6 +9112,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 66.666667%;
   }
 
+  .md\:w-4\/5 {
+    width: 80%;
+  }
+
   .md\:w-9 {
     width: 2.25rem;
   }
@@ -9050,10 +9136,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 40%;
   }
 
-  .md\:w-4\/5 {
-    width: 80%;
-  }
-
   .md\:max-w-xl {
     max-width: 36rem;
   }
@@ -9135,6 +9217,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     flex-wrap: nowrap;
   }
 
+  .md\:place-items-start {
+    place-items: start;
+  }
+
   .md\:items-start {
     align-items: flex-start;
   }
@@ -9384,6 +9470,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 6rem;
   }
 
+  .md\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
   .md\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -9409,11 +9500,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 4rem;
   }
 
-  .md\:py-16 {
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-  }
-
   .md\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -9875,6 +9961,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 4rem;
   }
 
+  .lg\:mt-20 {
+    margin-top: 5rem;
+  }
+
   .lg\:mt-12 {
     margin-top: 3rem;
   }
@@ -9903,10 +9993,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: -10rem;
   }
 
-  .lg\:mt-20 {
-    margin-top: 5rem;
-  }
-
   .lg\:mt-5 {
     margin-top: 1.25rem;
   }
@@ -9915,10 +10001,22 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 3rem;
   }
 
+  .lg\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .lg\:-ml-12 {
+    margin-left: -3rem;
+  }
+
   .lg\:ml-0 {
     margin-left: 0px;
   }
 
+  .lg\:mr-8 {
+    margin-right: 2rem;
+  }
+
   .lg\:-ml-28 {
     margin-left: -7rem;
   }
@@ -9979,18 +10077,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 0px;
   }
 
-  .lg\:mr-8 {
-    margin-right: 2rem;
-  }
-
-  .lg\:mt-24 {
-    margin-top: 6rem;
-  }
-
-  .lg\:-ml-12 {
-    margin-left: -3rem;
-  }
-
   .lg\:mt-10 {
     margin-top: 2.5rem;
   }
@@ -10131,6 +10217,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 91.666667%;
   }
 
+  .lg\:w-screen {
+    width: 100vw;
+  }
+
   .lg\:w-1\/5 {
     width: 20%;
   }
@@ -10147,6 +10237,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 8rem;
   }
 
+  .lg\:w-4\/6 {
+    width: 66.666667%;
+  }
+
   .lg\:w-10 {
     width: 2.5rem;
   }
@@ -10159,14 +10253,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 3rem;
   }
 
-  .lg\:w-4\/6 {
-    width: 66.666667%;
-  }
-
-  .lg\:w-screen {
-    width: 100vw;
-  }
-
   .lg\:max-w-4xl {
     max-width: 56rem;
   }
@@ -10426,11 +10512,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 2rem;
   }
 
-  .lg\:px-16 {
-    padding-left: 4rem;
-    padding-right: 4rem;
-  }
-
   .lg\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -10441,6 +10522,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 120px;
   }
 
+  .lg\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .lg\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -10461,6 +10547,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 5rem;
   }
 
+  .lg\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
   .lg\:px-20 {
     padding-left: 5rem;
     padding-right: 5rem;
@@ -10481,11 +10572,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 4rem;
   }
 
-  .lg\:py-24 {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
-  }
-
   .lg\:py-7 {
     padding-top: 1.75rem;
     padding-bottom: 1.75rem;
@@ -10579,6 +10665,22 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 8rem;
   }
 
+  .lg\:pt-40 {
+    padding-top: 10rem;
+  }
+
+  .lg\:pb-40 {
+    padding-bottom: 10rem;
+  }
+
+  .lg\:pt-20 {
+    padding-top: 5rem;
+  }
+
+  .lg\:pr-20 {
+    padding-right: 5rem;
+  }
+
   .lg\:pl-0 {
     padding-left: 0px;
   }
@@ -10631,22 +10733,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-left: 2rem;
   }
 
-  .lg\:pt-40 {
-    padding-top: 10rem;
-  }
-
-  .lg\:pb-40 {
-    padding-bottom: 10rem;
-  }
-
-  .lg\:pt-20 {
-    padding-top: 5rem;
-  }
-
-  .lg\:pr-20 {
-    padding-right: 5rem;
-  }
-
   .lg\:text-left {
     text-align: left;
   }
@@ -10718,17 +10804,17 @@ Ensure the default browser behavior of the `hidden` attribute.
     color: rgb(67 56 202 / var(--tw-text-opacity));
   }
 
-  .lg\:shadow-lg {
-    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
   .lg\: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);
   }
+
+  .lg\:shadow-lg {
+    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
 }
 
 @media (min-width: 1280px) {
@@ -10773,6 +10859,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 7rem;
   }
 
+  .xl\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .xl\:mt-40 {
+    margin-top: 10rem;
+  }
+
   .xl\:ml-1 {
     margin-left: 0.25rem;
   }
@@ -10789,14 +10883,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-top: 4rem;
   }
 
-  .xl\:mb-8 {
-    margin-bottom: 2rem;
-  }
-
-  .xl\:mt-40 {
-    margin-top: 10rem;
-  }
-
   .xl\:mb-0 {
     margin-bottom: 0px;
   }
@@ -10897,6 +10983,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 48rem;
   }
 
+  .xl\:max-w-6xl {
+    max-width: 72rem;
+  }
+
   .xl\:max-w-7xl {
     max-width: 80rem;
   }
@@ -10905,10 +10995,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 1024px;
   }
 
-  .xl\:max-w-6xl {
-    max-width: 72rem;
-  }
-
   .xl\:max-w-full {
     max-width: 100%;
   }
@@ -10996,6 +11082,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 8rem;
   }
 
+  .xl\:py-40 {
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+  }
+
+  .xl\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .xl\:px-20 {
     padding-left: 5rem;
     padding-right: 5rem;
@@ -11011,11 +11107,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 2.5rem;
   }
 
-  .xl\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .xl\:py-32 {
     padding-top: 8rem;
     padding-bottom: 8rem;
@@ -11026,11 +11117,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-right: 10rem;
   }
 
-  .xl\:py-40 {
-    padding-top: 10rem;
-    padding-bottom: 10rem;
-  }
-
   .xl\:pt-8 {
     padding-top: 2rem;
   }
diff --git a/public/componets/accordion/4_accordion.html b/public/componets/accordion/4_accordion.html
index e7db3f7..9c1ba47 100644
--- a/public/componets/accordion/4_accordion.html
+++ b/public/componets/accordion/4_accordion.html
@@ -142,6 +142,8 @@
 
 <!-- accordion 4 end -->
 
+
+
 <!-- start of script section -->
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");
diff --git a/public/componets/contact/2_contact.html b/public/componets/contact/2_contact.html
index 3cbd106..50792d8 100644
--- a/public/componets/contact/2_contact.html
+++ b/public/componets/contact/2_contact.html
@@ -21,31 +21,34 @@
     <section class="section_divider">
         <div>Contact 2</div>
     </section>
-    <div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto rounded-lg md:grid-cols-2 md:px-12 lg:px-16 xl:px-32 dark:bg-gray-800 dark:text-gray-100">
-        <div class="flex flex-col justify-between">
-            <div class="space-y-2">
-                <h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
-                <div class="dark:text-gray-400">Vivamus in nisl metus? Phasellus.</div>
-            </div>
-            <img src="assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64">
-        </div>
-        <form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
-            <div>
-                <label for="name" class="text-sm">Full name</label>
-                <input id="name" type="text" placeholder="" class="w-full p-3 rounded dark:bg-gray-800">
-            </div>
-            <div>
-                <label for="email" class="text-sm">Email</label>
-                <input id="email" type="email" class="w-full p-3 rounded dark:bg-gray-800">
-            </div>
-            <div>
-                <label for="message" class="text-sm">Message</label>
-                <textarea id="message" rows="3" class="w-full p-3 rounded dark:bg-gray-800"></textarea>
-            </div>
-            <button type="submit" class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-green-400 dark:text-gray-900">Send Message</button>
-        </form>
-    </div>
-    
+    <section class="dark:bg-gray-900 dark:text-gray-100">
+        
+      <div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-24 mx-auto rounded-lg md:grid-cols-2 md:px-12  xl:px-32 ">
+          <div class="flex flex-col justify-between">
+              <div class="space-y-2">
+                  <h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
+                  <div class="dark:text-gray-400">Vivamus in nisl metus? Phasellus.</div>
+              </div>
+              <img src="https://www.mambaui.com/assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64">
+          </div>
+          <form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
+              <div>
+                  <label for="name" class="text-sm">Full name</label>
+                  <input id="name" type="text" placeholder="" class="w-full p-3 rounded dark:bg-gray-800">
+              </div>
+              <div>
+                  <label for="email" class="text-sm">Email</label>
+                  <input id="email" type="email" class="w-full p-3 rounded dark:bg-gray-800">
+              </div>
+              <div>
+                  <label for="message" class="text-sm">Message</label>
+                  <textarea id="message" rows="3" class="w-full p-3 rounded dark:bg-gray-800"></textarea>
+              </div>
+              <button type="submit" class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-green-400 dark:text-gray-900">Send Message</button>
+          </form>
+      </div>
+  
+    </section>
     <!-- contact 2 end -->
 
 
diff --git a/public/componets/contact/contact.html b/public/componets/contact/contact.html
index 1cef5e9..b7d6fb4 100644
--- a/public/componets/contact/contact.html
+++ b/public/componets/contact/contact.html
@@ -1418,6 +1418,97 @@
     <!-- contact 9 end -->
 
 
+    <!-- contact 10 start -->
+    <section class="section_divider">
+        <div>Contact 10</div>
+    </section>
+    <div class="px-4 py-6 sm:grid grid-cols-2 gap-x-6 max-w-4xl mx-auto">
+        <div class="mb-8">
+            <h2 class="text-center text-2xl font-bold text-blue-800">Add Contact</h2>
+            <div class="mt-6">
+                <div class="flex-col space-y-4">
+                    <input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
+                    <input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
+                    <input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
+                </div>
+                    <div class="mt-4">
+                        <p class="mb-1 text-gray-700 font-semibold text-sm">Contact Type</p>
+                        <div class="flex space-x-4 my-2 items-center">
+                            <div class="flex items-center space-x-1">
+                                <input type="radio" id="personal" class="cursor-pointer">
+                                <label for="personal" class="cursor-pointer">Personal</span>
+                            </div>
+                            <div class="flex items-center space-x-1">
+                                <input type="radio" id="professional" class="cursor-pointer">
+                                <label for="professional" class="cursor-pointer">Professional</span>
+                            </div>
+                        </div>
+                    </div>
+                <button class="w-full mt-4 bg-gradient-to-tr from-indigo-600 to-purple-600 text-white py-2 rounded-md text-lg font-semibold">Add Contact</button>
+            </div>
+        </div>
+        <div class="space-y-4">
+                        <div class=" p-6 rounded-md bg-indigo-50">
+                        <div class="flex justify-between mb-2 items-center">
+                            <p class="text-lg font-semibold items-center">Jill Johson</p>
+                            <p class="bg-indigo-500 text-indigo-50 px-3 py-1 rounded-md text-sm">Personal</p>
+                        </div>
+                        <div>
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
+                                </svg>
+                                <p class="text-md font-semibold">jill@gmail.com</p>
+                            </div>
+                            <div class="flex mt-3 text-sm">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
+                                </svg>
+                                <p class="text-md mb-6">111-111-111</p>
+                            </div>
+                            <div class="space-x-1">
+                                <span class="text-md px-6 py-2 rounded-md bg-green-500 text-indigo-50 font-semibold cursor-pointer" text-indigo-50 font-semibold cursor-pointer>Edit</span>
+                                <span class="text-md px-6 py-2 rounded-md bg-red-500 text-indigo-50 font-semibold cursor-pointer">Delete</span>
+                            </div>
+                        </div>
+                    </div>
+                        <div class=" p-4 rounded-md bg-indigo-50">
+                        <div class="flex justify-between mb-2 items-center">
+                            <p class="text-lg font-semibold items-center">Jill Johson</p>
+                            <p class="bg-indigo-500 text-indigo-50 px-3 py-1 rounded-md text-sm">Personal</p>
+                        </div>
+                        <div>
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
+                                </svg>
+                                <p class="text-md font-semibold">jill@gmail.com</p>
+                            </div>
+                            <div class="flex mt-3 text-sm">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
+                                </svg>
+                                <p class="text-md mb-6">111-111-111</p>
+                            </div>
+                            <div class="space-x-1">
+                                <span class="text-md px-6 py-2 rounded-md bg-green-500 text-indigo-50 font-semibold cursor-pointer" >Edit</span>
+                                <span class="text-md px-6 py-2 rounded-md bg-red-500 text-indigo-50 font-semibold cursor-pointer">Delete</span>
+                            </div>
+                        </div>
+                    </div>
+        </div>
+    </div>
+    
+    <!-- contact 10 end -->
+
 <!-- start of script section -->
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");
diff --git a/public/componets/cta/cta.html b/public/componets/cta/cta.html
index 0a96d50..3f7e14a 100644
--- a/public/componets/cta/cta.html
+++ b/public/componets/cta/cta.html
@@ -413,6 +413,40 @@
     <!-- end cta 17 -->
 
 
+    <!-- cta 18 start -->
+    <section class="section_divider">
+      <div>CTA 18</div>
+    </section>
+
+    <!-- Second Section -->
+    <div class="relative w-full px-8 py-20 bg-yellow-400 sm:py-32 md:py-40">
+      <div class="container flex flex-col items-center justify-center h-full max-w-6xl mx-auto sm:flex-row sm:justify-between">
+          <div class="relative flex flex-col items-start justify-center w-full mb-10 sm:w-5/6 sm:w-1/3 sm:mb-0 sm:pr-10">
+              <h2 class="mb-5 text-2xl font-black leading-tight xl:text-4xl">Easily Add Your Own Screenshots</h2>
+              <p class="mb-8 text-base text-yellow-900 xl:text-xl md:max-w-lg">You can easily customize this design by replacing your image with the image on the right. Cool, right?</p>
+              <a href="#_" class="relative">
+                  <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
+                  <span class="relative inline-block w-full h-full px-5 py-3 text-lg font-bold transition duration-100 bg-white border-2 border-black rounded fold-bold hover:bg-yellow-500 hover:text-white">GET STARTED</span>
+              </a>
+          </div>
+          <div class="relative flex flex-col items-center justify-center w-full -mr-0 sm:w-5/6 sm:w-2/3 sm:-mr-20">
+              <div class="overflow-hidden border-2 border-black rounded-lg">
+                  <img src="https://cdn.devdojo.com/images/october2020/screenshot.png" alt="Screen shot of Flare" class="object-cover w-full h-full">
+              </div>
+          </div>
+      </div>
+    </div>
+
+
+    <!-- cta 18 end -->
+
+    <!-- cta 19 start -->
+    <section class="section_divider">
+      <div>CTA 19</div>
+    </section>
+    
+    <!-- cta 19 end -->
+
 <!-- start of script section -->
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");
diff --git a/public/componets/faq/2_faq.html b/public/componets/faq/2_faq.html
index 748382f..26b8069 100644
--- a/public/componets/faq/2_faq.html
+++ b/public/componets/faq/2_faq.html
@@ -18,44 +18,44 @@
     </button>
       
 
-  <!-- faq 2 start -->
-  <section class="section_divider" id="faq_2">
-    <div>FAQ 2</div>
-</section>
-<section class="dark:bg-gray-800 dark:text-gray-100">
-  <div class="container flex flex-col items-center p-4 mx-auto md:p-8">
-      <h1 class="text-3xl font-bold leading-none text-center sm:text-4xl">Help Center</h1>
-      <div class="relative mt-6 mb-12">
-          <span class="absolute inset-y-0 flex items-center pl-2 mx-auto">
-              <button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
-                  <svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-gray-100">
-                      <path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
-                  </svg>
-              </button>
-          </span>
-          <input type="search" name="Search" placeholder="Search..." class="w-full py-3 pl-12 text-sm rounded-full border-2 sm:w-96 focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
-      </div>
-      <div class="flex flex-col w-full divide-y sm:flex-row sm:divide-y-0 sm:divide-x sm:px-8 lg:px-12 xl:px-32 divide-gray-700">
-          <div class="flex flex-col w-full divide-y divide-gray-700">
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Billing</a>
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Support</a>
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Account</a>
-          </div>
-          <div class="flex flex-col w-full divide-y divide-gray-700">
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Features</a>
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Contact us</a>
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">My orders</a>
-          </div>
-          <div class="hidden w-full divide-y sm:flex-col sm:flex divide-gray-700">
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Enterprise</a>
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Privacy</a>
-              <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Developers</a>
-          </div>
-      </div>
-  </div>
-</section>
+    <!-- faq 2 start -->
+        <section class="section_divider" id="faq_2">
+            <div>FAQ 2</div>
+        </section>
+        <section class="dark:bg-gray-800 dark:text-gray-100">
+        <div class="container flex flex-col items-center p-4 mx-auto md:p-8">
+            <h1 class="text-3xl font-bold leading-none text-center sm:text-4xl">Help Center</h1>
+            <div class="relative mt-6 mb-12">
+                <span class="absolute inset-y-0 flex items-center pl-2 mx-auto">
+                    <button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
+                        <svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-gray-100">
+                            <path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
+                        </svg>
+                    </button>
+                </span>
+                <input type="search" name="Search" placeholder="Search..." class="w-full py-3 pl-12 text-sm rounded-full border-2 sm:w-96 focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
+            </div>
+            <div class="flex flex-col w-full divide-y sm:flex-row sm:divide-y-0 sm:divide-x sm:px-8 lg:px-12 xl:px-32 divide-gray-700">
+                <div class="flex flex-col w-full divide-y divide-gray-700">
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Billing</a>
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Support</a>
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Account</a>
+                </div>
+                <div class="flex flex-col w-full divide-y divide-gray-700">
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Features</a>
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Contact us</a>
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">My orders</a>
+                </div>
+                <div class="hidden w-full divide-y sm:flex-col sm:flex divide-gray-700">
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Enterprise</a>
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Privacy</a>
+                    <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Developers</a>
+                </div>
+            </div>
+        </div>
+        </section>
 
-<!-- faq 2 end -->
+    <!-- faq 2 end -->
 
 
 <!-- start of script section -->
diff --git a/public/componets/features/feature.html b/public/componets/features/feature.html
index 937c807..73aa4c2 100644
--- a/public/componets/features/feature.html
+++ b/public/componets/features/feature.html
@@ -1004,6 +1004,340 @@
     </section>
     <!-- feature 14 end -->
 
+    
+    <!-- feature 15 start -->
+    <section class="section_divider">
+        <div>Feature 15</div>
+    </section>
+
+    <div id="features" class="relative w-full px-8 py-10 border-t border-gray-200 dark:bg-gray-800 md:py-16 lg:py-24 xl:py-40 xl:px-0">
+        <div class="container flex flex-col items-center justify-between h-full max-w-6xl mx-auto">
+            <h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 dark:text-cyan-300 uppercase">Our Features</h2>
+            <h3
+                class="max-w-2xl px-5 mt-2 text-3xl font-black leading-tight text-center text-gray-900 dark:text-emerald-300 sm:mt-0 sm:px-0 sm:text-6xl">
+                Built and Designed with you in Mind</h3>
+            <div class="flex flex-col w-full mt-0 lg:flex-row sm:mt-10 lg:mt-20">
+
+                <div class="w-full max-w-md p-4 mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3">
+                    <div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
+                        <svg class="absolute w-full h-full text-gray-100 dark:text-emerald-300 fill-current" viewBox="0 0 377 340"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                                <g>
+                                    <path
+                                        d="M342.8 3.7c24.7 14 18.1 75 22.1 124s18.6 85.8 8.7 114.2c-9.9 28.4-44.4 48.3-76.4 62.4-32 14.1-61.6 22.4-95.9 28.9-34.3 6.5-73.3 11.1-95.5-6.2-22.2-17.2-27.6-56.5-47.2-96C38.9 191.4 5 151.5.9 108.2-3.1 64.8 22.7 18 61.8 8.7c39.2-9.2 91.7 19 146 16.6 54.2-2.4 110.3-35.6 135-21.6z" />
+                                </g>
+                            </g>
+                        </svg>
+                        <!-- FEATURE Icon 1 -->
+                        <svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink">
+                            <defs>
+                                <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1TriangleIcon1">
+                                    <stop stop-color="#9C09DB" offset="0%" />
+                                    <stop stop-color="#1C0FD7" offset="100%" />
+                                </linearGradient>
+                                <filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
+                                    id="filter-3TriangleIcon1">
+                                    <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+                                    <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
+                                        result="shadowBlurOuter1" />
+                                    <feColorMatrix
+                                        values="0 0 0 0 0.141176471 0 0 0 0 0.031372549 0 0 0 0 0.501960784 0 0 0 0.15 0"
+                                        in="shadowBlurOuter1" />
+                                </filter>
+                                <path
+                                    d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
+                                    id="path-2TriangleIcon1" />
+                            </defs>
+                            <g id="Page-1TriangleIcon1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                <g id="Desktop-HDTriangleIcon1" transform="translate(-291 -1278)">
+                                    <g id="FeaturesTriangleIcon1" transform="translate(170 915)">
+                                        <g id="Group-9TriangleIcon1" transform="translate(0 365)">
+                                            <g id="Group-8TriangleIcon1" transform="translate(125)">
+                                                <g id="Rectangle-9TriangleIcon1">
+                                                    <use fill="#000" filter="url(#filter-3TriangleIcon1)"
+                                                        xlink:href="#path-2TriangleIcon1" />
+                                                    <use fill="url(#linearGradient-1TriangleIcon1)"
+                                                        xlink:href="#path-2TriangleIcon1" />
+                                                </g>
+                                                <g id="playTriangleIcon1" transform="translate(18 15)" fill="#FFF"
+                                                    fill-rule="nonzero">
+                                                    <path
+                                                        d="M9.432 2.023l8.919 14.879a1.05 1.05 0 01-.384 1.452 1.097 1.097 0 01-.548.146H-.42A1.07 1.07 0 01-1.5 17.44c0-.19.052-.375.15-.538L7.567 2.023a1.092 1.092 0 011.864 0z"
+                                                        id="TriangleIcon1" transform="rotate(90 8.5 10)" />
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                        </svg>
+                        <h4 class="relative mt-6 text-lg font-bold">Automated Tools</h4>
+                        <p class="relative mt-2 text-base text-center text-gray-600">Automate your workflow with these
+                            top of the
+                            line marketing tools.</p>
+                        <a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
+                            More</a>
+                    </div>
+                </div>
+
+                <div class="w-full max-w-md p-4 mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3">
+                    <div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
+                        <svg class="absolute w-full h-full text-gray-100 dark:text-emerald-200 fill-current" viewBox="0 0 358 372"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                                <g>
+                                    <path
+                                        d="M315.7 6.5c30.2 15.1 42.6 61.8 41.5 102.5-1.1 40.6-15.7 75.2-24.3 114.8-8.7 39.7-11.3 84.3-34.3 107.2-23 22.9-66.3 23.9-114.5 30.7-48.2 6.7-101.3 19.1-123.2-4.1-21.8-23.2-12.5-82.1-21.6-130.2C30.2 179.3 2.6 141.9.7 102c-2-39.9 21.7-82.2 57.4-95.6 35.7-13.5 83.3 2.1 131.2 1.7 47.9-.4 96.1-16.8 126.4-1.6z" />
+                                </g>
+                            </g>
+                        </svg>
+                        <!-- FEATURE Icon 2 -->
+                        <svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink">
+                            <defs>
+                                <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1Icon2">
+                                    <stop stop-color="#F2C314" offset="0%" />
+                                    <stop stop-color="#FC3832" offset="100%" />
+                                </linearGradient>
+                                <filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
+                                    id="filter-3Icon2">
+                                    <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+                                    <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
+                                        result="shadowBlurOuter1" />
+                                    <feColorMatrix
+                                        values="0 0 0 0 0.501960784 0 0 0 0 0.125490196 0 0 0 0 0 0 0 0 0.15 0"
+                                        in="shadowBlurOuter1" />
+                                </filter>
+                                <path
+                                    d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
+                                    id="path-2Icon2" />
+                            </defs>
+                            <g id="Page-1Icon2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                <g id="Desktop-HDIcon2" transform="translate(-691 -1278)">
+                                    <g id="FeaturesIcon2" transform="translate(170 915)">
+                                        <g id="Group-9-CopyIcon2" transform="translate(400 365)">
+                                            <g id="Group-8Icon2" transform="translate(125)">
+                                                <g id="Rectangle-9Icon2">
+                                                    <use fill="#000" filter="url(#filter-3Icon2)"
+                                                        xlink:href="#path-2Icon2" />
+                                                    <use fill="url(#linearGradient-1Icon2)" xlink:href="#path-2Icon2" />
+                                                </g>
+                                                <g id="machine-learningIcon2" transform="translate(14 12)" fill="#FFF"
+                                                    fill-rule="nonzero">
+                                                    <path
+                                                        d="M10.554 21.418v-2.68c-1.1-.204-1.932-1.143-1.932-2.271 0-.468.143-.903.388-1.267l-2.32-1.662L4.367 15.2a2.254 2.254 0 01-.005 2.541l5.28 4.05c.268-.182.577-.311.911-.373zm.892 0c.334.062.643.191.912.373l5.28-4.05a2.254 2.254 0 01-.006-2.54l-2.321-1.663L12.99 15.2c.245.364.388.8.388 1.267 0 1.128-.832 2.067-1.932 2.27v2.681zm1.538.997c.25.365.394.803.394 1.274C13.378 24.965 12.314 26 11 26s-2.378-1.035-2.378-2.311c0-.471.145-.91.394-1.274l-5.28-4.05c-.385.26-.853.413-1.358.413C1.065 18.778 0 17.743 0 16.467c0-1.129.832-2.068 1.932-2.27v-2.393C.832 11.6 0 10.662 0 9.534c0-1.277 1.065-2.312 2.378-2.312.505 0 .973.153 1.358.414l5.28-4.05a2.254 2.254 0 01-.394-1.275C8.622 1.035 9.686 0 11 0s2.378 1.035 2.378 2.311c0 .471-.145.91-.394 1.274l5.28 4.05c.385-.26.853-.413 1.358-.413C20.935 7.222 22 8.257 22 9.533c0 1.129-.832 2.068-1.932 2.27v2.393c1.1.203 1.932 1.142 1.932 2.27 0 1.277-1.065 2.312-2.378 2.312-.505 0-.973-.153-1.358-.414l-5.28 4.05zm-9.243-7.843L5.937 13l-2.196-1.572c-.27.183-.58.314-.917.376v2.392c.336.062.647.193.917.376zm.627-3.772l2.321 1.662L9.01 10.8a2.254 2.254 0 01-.388-1.267c0-1.128.832-2.067 1.932-2.27V4.582a2.403 2.403 0 01-.912-.373l-5.28 4.05a2.254 2.254 0 01.006 2.54zm13.89 3.772c.27-.183.582-.314.918-.376v-2.392a2.403 2.403 0 01-.917-.376L16.063 13l2.196 1.572zm-.62-6.313l-5.28-4.05a2.403 2.403 0 01-.912.373v2.68c1.1.204 1.932 1.143 1.932 2.271 0 .468-.143.903-.388 1.267l2.32 1.662 2.322-1.662a2.254 2.254 0 01.005-2.541zm-8 6.313A2.415 2.415 0 0111 14.156c.507 0 .977.154 1.363.416L14.559 13l-2.196-1.572a2.415 2.415 0 01-1.363.416c-.507 0-.977-.154-1.363-.416L7.441 13l2.196 1.572zM11 10.978c.821 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.486.647-1.486 1.444c0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445c0 .797.665 1.444 1.486 1.444zm8.622-6.933c.82 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.487.647-1.487 1.444c0 .798.666 1.445 1.487 1.445zm0 6.933c.82 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.487.647-1.487 1.445c0 .797.666 1.444 1.487 1.444zM2.378 10.978c.821 0 1.487-.647 1.487-1.445 0-.797-.666-1.444-1.487-1.444-.82 0-1.486.647-1.486 1.444 0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.487-.647 1.487-1.444 0-.798-.666-1.445-1.487-1.445-.82 0-1.486.647-1.486 1.445 0 .797.665 1.444 1.486 1.444zM11 25.133c.821 0 1.486-.646 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445.665 1.444 1.486 1.444zm0-21.377c.821 0 1.486-.647 1.486-1.445S11.821.867 11 .867s-1.486.646-1.486 1.444c0 .798.665 1.445 1.486 1.445z"
+                                                        id="ShapeIcon2" />
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                        </svg>
+                        <h4 class="relative mt-6 text-lg font-bold">Machine Learning</h4>
+                        <p class="relative mt-2 text-base text-center text-gray-600">Your Marketing tools will learn how
+                            to better
+                            convert and sell.</p>
+                        <a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
+                            More</a>
+                    </div>
+                </div>
+
+                <div class="w-full max-w-md p-4 mx-auto mb-16 lg:mb-0 lg:w-1/3">
+                    <div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
+                        <svg class="absolute w-full h-full text-gray-100 dark:text-emerald-100 fill-current" viewBox="0 0 378 410"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                                <g>
+                                    <path
+                                        d="M305.9 14.4c23.8 24.6 16.3 84.9 26.6 135.1 10.4 50.2 38.6 90.3 43.7 137.8 5.1 47.5-12.8 102.4-50.7 117.4-37.9 15.1-95.7-9.8-151.7-12.2-56.1-2.5-110.3 17.6-130-3.4-19.7-20.9-4.7-82.9-11.5-131.2C25.5 209.5-3 174.7 1.2 147c4.2-27.7 41-48.3 75-69.6C110.1 56.1 141 34.1 184 17.5c43.1-16.6 98.1-27.7 121.9-3.1z" />
+                                </g>
+                            </g>
+                        </svg>
+                        <!-- FEATURE Icon 3 -->
+                        <svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink">
+                            <defs>
+                                <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1Icon3">
+                                    <stop stop-color="#32FBFC" offset="0%" />
+                                    <stop stop-color="#3214F2" offset="100%" />
+                                </linearGradient>
+                                <filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
+                                    id="filter-3Icon3">
+                                    <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+                                    <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
+                                        result="shadowBlurOuter1" />
+                                    <feColorMatrix
+                                        values="0 0 0 0 0.031372549 0 0 0 0 0.149019608 0 0 0 0 0.658823529 0 0 0 0.15 0"
+                                        in="shadowBlurOuter1" />
+                                </filter>
+                                <path
+                                    d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
+                                    id="path-2Icon3" />
+                            </defs>
+                            <g id="Page-1Icon3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                <g id="Desktop-HDIcon3" transform="translate(-1091 -1278)">
+                                    <g id="FeaturesIcon3" transform="translate(170 915)">
+                                        <g id="Group-9-Copy-2Icon3" transform="translate(800 365)">
+                                            <g id="Group-8Icon3" transform="translate(125)">
+                                                <g id="Rectangle-9Icon3">
+                                                    <use fill="#000" filter="url(#filter-3Icon3)"
+                                                        xlink:href="#path-2Icon3" />
+                                                    <use fill="url(#linearGradient-1Icon3)" xlink:href="#path-2Icon3" />
+                                                </g>
+                                                <g id="smart-notificationsIcon3" transform="translate(15 11)"
+                                                    fill="#FFF" fill-rule="nonzero">
+                                                    <path
+                                                        d="M12.519 3.243a6.808 6.808 0 00-.187 1.298h-8.44a2.595 2.595 0 00-2.595 2.594v12.973a2.595 2.595 0 002.595 2.595h12.973a2.595 2.595 0 002.594-2.595v-8.44c.445-.02.88-.084 1.298-.187v8.627A3.892 3.892 0 0116.865 24H3.892A3.892 3.892 0 010 20.108V7.135a3.892 3.892 0 013.892-3.892h8.627zm6.616 6.487a4.865 4.865 0 110-9.73 4.865 4.865 0 010 9.73z"
+                                                        id="IconIcon3" />
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                        </svg>
+                        <h4 class="relative mt-6 text-lg font-bold">Smart Notifications</h4>
+                        <p class="relative mt-2 text-base text-center text-gray-600">Our smart notifications will notify
+                            you when
+                            users convert.</p>
+                        <a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
+                            More</a>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    
+    <!-- feature 15 end -->
+
+
+    <!-- feature 16 start -->
+    <section class="section_divider">
+        <div>Feature 16</div>
+    </section>
+
+
+    <div class="relative w-full py-20 pb-20 overflow-hidden bg-white md:pt-40 md:pb-64">
+        <!-- CURVED SVG BORDER INVERT -->
+        <svg class="absolute top-0 w-full text-yellow-400 fill-current" viewBox="0 0 1400 50" xmlns="http://www.w3.org/2000/svg"><path d="M0 50C309.151 16.667 542.484 0 700 0c157.516 0 390.849 16.667 700 50V0H0v50z"/></svg>
+        <div class="container relative flex flex-col justify-between h-full max-w-6xl px-8 mx-auto xl:px-0">
+            <h2 class="relative flex items-center self-start inline-block w-auto mb-20 text-4xl font-black">
+                <span class="absolute inline-block w-full h-4 mt-3 -ml-2 bg-yellow-400"></span>
+                <span class="relative">Feature List</span>
+            </h2>
+
+            <div class="flex w-full h-full">
+
+                <div class="w-full lg:w-2/3">
+
+                    <!-- Feature blocks first column -->
+                    <div class="flex flex-col w-full mb-10 sm:flex-row">
+                        <div class="w-full mb-10 sm:mb-0 sm:w-1/2">
+                            <div class="relative ml-0 mr-0 sm:mr-10">
+                                <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-indigo-500 rounded-lg"></span>
+                                <div class="relative p-5 bg-white border-2 border-indigo-500 rounded-lg">
+                                    <div class="flex items-center -mt-1">
+                                        <svg class="w-8 h-8 text-indigo-500 fill-current" viewBox="0 0 20 20">
+                                            <polygon points="18.198,7.95 3.168,7.95 3.168,8.634 9.317,9.727 9.317,19.564 12.05,19.564 12.05,9.727 18.198,8.634 "></polygon>
+                                            <path d="M2.485,10.057v-3.41H2.473l0.012-4.845h1.366c0.378,0,0.683-0.306,0.683-0.683c0-0.378-0.306-0.683-0.683-0.683H1.119c-0.378,0-0.683,0.306-0.683,0.683c0,0.378,0.306,0.683,0.683,0.683h0.683v4.845C1.406,6.788,1.119,7.163,1.119,7.609v2.733c0,0.566,0.459,1.025,1.025,1.025c0.053,0,0.105-0.008,0.157-0.016l-0.499,5.481l5.9,2.733h0.931C8.634,13.266,5.234,10.458,2.485,10.057z"></path>
+                                            <path d="M18.169,6.584c-0.303-3.896-3.202-6.149-7.486-6.149c-4.282,0-7.183,2.252-7.484,6.149H18.169z M15.463,3.187c0.024,0.351-0.103,0.709-0.394,0.977c-0.535,0.495-1.405,0.495-1.94,0c-0.29-0.268-0.418-0.626-0.394-0.977C13.513,3.827,14.683,3.827,15.463,3.187z"></path>
+                                            <path d="M18.887,10.056c-2.749,0.398-6.154,3.206-6.154,9.508h0.933l5.899-2.733L18.887,10.056z"></path>
+                                        </svg>
+                                        <h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Awesome Dashboard</h3>
+                                    </div>
+                                    <p class="mt-3 mb-1 text-xs font-medium text-indigo-500 uppercase">PREMIUM FEATURE</p>
+                                    <p class="mb-2 text-gray-600">You can get a quick snapshot of all your analytics on your beautiful dashboard.</p>
+                                </div>
+
+                            </div>
+                        </div>
+
+                        <div class="w-full sm:w-1/2">
+                            <div class="relative ml-0 md:mr-10">
+                                <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-purple-500 rounded-lg"></span>
+                                <div class="relative p-5 bg-white border-2 border-purple-500 rounded-lg">
+                                    <div class="flex items-center -mt-1">
+                                        <svg class="w-8 h-8 text-purple-500 fill-current" viewBox="0 0 20 20">
+                                            <path d="M19.629,9.655c-0.021-0.589-0.088-1.165-0.21-1.723h-3.907V7.244h1.378V6.555h-2.756V5.866h2.067V5.177h-0.689V4.488h-1.378V3.799h0.689V3.11h-1.378V2.421h0.689V1.731V1.294C12.88,0.697,11.482,0.353,10,0.353c-5.212,0-9.446,4.135-9.629,9.302H19.629z M6.555,2.421c1.522,0,2.756,1.234,2.756,2.756S8.077,7.933,6.555,7.933S3.799,6.699,3.799,5.177S5.033,2.421,6.555,2.421z"></path>
+                                            <path d="M12.067,18.958h-0.689v-0.689h2.067v-0.689h0.689V16.89h2.067v-0.689h0.689v-0.689h-1.378v-0.689h-2.067v-0.689h1.378v-0.689h2.756v-0.689h-1.378v-0.689h3.218c0.122-0.557,0.189-1.134,0.21-1.723H0.371c0.183,5.167,4.418,9.302,9.629,9.302c0.711,0,1.401-0.082,2.067-0.227V18.958z"></path>
+                                        </svg>
+                                        <h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Rad Tools</h3>
+                                    </div>
+                                    <p class="mt-3 mb-1 text-xs font-medium text-purple-500 uppercase">NEW FEATURE</p>
+                                    <p class="mb-2 text-gray-600">We've got some pretty rad tools to help you take on the world.</p>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Feature blocks second column -->
+                    <div class="flex flex-col w-full mb-5 sm:flex-row">
+                        <div class="w-full mb-10 sm:mb-0 sm:w-1/2">
+                            <div class="relative ml-0 mr-0 sm:mr-10">
+                                <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-blue-400 rounded-lg"></span>
+                                <div class="relative p-5 bg-white border-2 border-blue-400 rounded-lg">
+                                    <div class="flex items-center -mt-1">
+                                        <svg class="w-8 h-8 text-blue-400 fill-current" viewBox="0 0 20 20">
+                                            <path d="M18.21,16.157v-8.21c0-0.756-0.613-1.368-1.368-1.368h-1.368v1.368v1.368v6.841l-1.368,3.421h5.473L18.21,16.157z"></path>
+                                            <path d="M4.527,9.316V7.948V6.579H3.159c-0.756,0-1.368,0.613-1.368,1.368v8.21l-1.368,3.421h5.473l-1.368-3.421V9.316z"></path>
+                                            <path d="M14.766,5.895h0.023V5.21c0-2.644-2.145-4.788-4.789-4.788S5.211,2.566,5.211,5.21v0.685h0.023H14.766zM12.737,3.843c0.378,0,0.684,0.307,0.684,0.684s-0.306,0.684-0.684,0.684c-0.378,0-0.684-0.307-0.684-0.684S12.358,3.843,12.737,3.843z M10,1.448c0.755,0,1.368,0.613,1.368,1.368S10.755,4.185,10,4.185c-0.756,0-1.368-0.613-1.368-1.368S9.244,1.448,10,1.448z"></path>
+                                            <path d="M14.789,6.579H5.211v9.578l1.368,1.368h6.841l1.368-1.368V6.579z M12.052,12.052H7.948c-0.378,0-0.684-0.306-0.684-0.684c0-0.378,0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.306,0.684,0.684C12.737,11.746,12.431,12.052,12.052,12.052z M12.052,9.316H7.948c-0.378,0-0.684-0.307-0.684-0.684s0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.307,0.684,0.684S12.431,9.316,12.052,9.316z"></path>
+                                        </svg>
+                                        <h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Easy Collaboration</h3>
+                                    </div>
+                                    <p class="mt-3 mb-1 text-xs font-medium text-blue-400 uppercase">FREE FEATURE</p>
+                                    <p class="mb-2 text-gray-600">Collaborating with members of your team couldn't be easier.</p>
+                                </div>
+
+                            </div>
+                        </div>
+
+                        <div class="w-full sm:w-1/2">
+                            <div class="relative ml-0 md:mr-10">
+                                <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-teal-500 rounded-lg"></span>
+                                <div class="relative p-5 bg-white border-2 border-teal-500 rounded-lg">
+                                    <div class="flex items-center -mt-1">
+                                        <svg class="w-8 h-8 text-teal-500 fill-current" viewBox="0 0 20 20">
+                                            <path d="M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z"></path>
+                                        </svg>
+                                        <h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Automated Workflow</h3>
+                                    </div>
+                                    <p class="mt-3 mb-1 text-xs font-medium text-teal-500 uppercase">PREMIUM FEATURE</p>
+                                    <p class="mb-2 text-gray-600">Our automation tools will help you build and grow your marketing empire.</p>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="hidden w-1/3 lg:block">
+                    <div class="absolute w-full w-screen max-w-4xl pl-12 -mt-20">
+                        <div class="absolute top-0 left-0 w-full h-full mt-2 ml-10 bg-gray-900 rounded-lg"></div>
+                        <div class="relative overflow-hidden border-2 border-black rounded-lg">
+                            <img src="https://cdn.devdojo.com/images/october2020/screenshot2.png" alt="Screen shot of Flare's hero component" class="object-cover w-full h-full">
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Blob SVG Border -->
+        <svg class="absolute bottom-0 w-full text-gray-200 fill-current" viewBox="0 0 1400 74" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C87.243 11.422 173.12 5.133 257.633 5.133 468.305 5.133 578.027 74 700 74c136.015 0 290.882-96.208 481.234-68.867C1268.807 17.71 1341.73 24 1400 24v50H0V24z" /></svg>
+
+    </div>
+
+    
+    <!-- feature 16 end -->
+
 
 <!-- start of script section -->
 <script type="text/javascript">
diff --git a/public/componets/footer/footer.html b/public/componets/footer/footer.html
index 722eefc..a890193 100644
--- a/public/componets/footer/footer.html
+++ b/public/componets/footer/footer.html
@@ -4549,7 +4549,170 @@
     </section>
     <!-- footer 46 end -->
 
+    
 
+    <!-- footer 47 start -->
+    <section class="section_divider">
+      <div>Footer 47 (template 1) </div>
+    </section>
+    
+
+    <footer class="px-4 pt-12 pb-8 text-white bg-white dark:bg-gray-800 border-t border-gray-200">
+      <div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
+          <div class="w-full pl-12 mr-4 text-left lg:w-1/4 sm:text-center sm:pl-0 lg:text-left">
+              <a href="/"
+                  class="flex justify-start text-left sm:text-center lg:text-left sm:justify-center lg:justify-start">
+                  <span class="flex items-start sm:items-center">
+                      <svg class="w-auto h-6 text-gray-900 dark:text-cyan-300 fill-current" viewBox="0 0 194 116"
+                          xmlns="http://www.w3.org/2000/svg">
+                          <g fill-rule="evenodd">
+                              <path
+                                  d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z">
+                              </path>
+                              <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"></path>
+                          </g>
+                      </svg>
+                  </span>
+              </a>
+              <p class="mt-6 mr-4 text-base text-gray-500 dark:text-gray-300">Crafting the next-level of user experience and engagement.
+              </p>
+          </div>
+          <div class="block w-full pl-10 mt-6 text-sm lg:w-3/4 sm:flex lg:mt-0">
+              <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                      Product</li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600  dark:text-gray-300 dark:hover:text-cyan-300">Features</a>
+                  </li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Integrations</a>
+                  </li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Pricing</a>
+                  </li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">FAQ</a></li>
+              </ul>
+              <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                      Company</li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Privacy</a>
+                  </li>
+                  <li><a href="#_" class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Terms
+                          of
+                          Service</a></li>
+              </ul>
+              <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                      TailwindCSS
+                  </li>
+                  <li><a href="https://devdojo.com/tailwindcss/components"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
+                          Components</a></li>
+                  <li><a href="https://devdojo.com/tailwindcss/templates" 
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
+                          Templates</a></li>
+                  <li><a href="https://devdojo.com/tails"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tails</a></li>
+              </ul>
+              <div class="flex flex-col w-full text-gray-700">
+                  <div class="inline-block px-3 py-2 mt-5 font-bold text-gray-800 uppercase md:mt-0">Follow Us</div>
+                  <div class="flex justify-start pl-4 mt-2">
+                      <a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                          target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" />
+                          </svg>
+                      </a>
+                      <a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                          target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
+                          </svg>
+                      </a>
+                      <a class="flex items-center block text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                          target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                          </svg>
+                      </a>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class=" pt-6 mt-10 text-center text-gray-400 dark:text-cyan-300 border-t border-gray-100">© 2020 Landmark. All rights
+          reserved.</div>
+    </footer>
+
+    
+    <!-- footer 47 end -->
+
+
+    <!-- footer 48 start -->
+    <section class="section_divider">
+      Footer 48 
+    </section>
+
+    <footer class="px-4 pt-12 pb-8 text-white bg-black">
+      <div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
+
+              <a href="#_" class="block w-1/3 mr-4">
+                  <span class="flex items-center">
+                      <svg  class="w-auto h-8 mt-1 text-white fill-current" viewBox="0 0 215 151" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="56.965%" y1="53.262%" x2="7.891%" y2="29.24%" id="b"><stop stop-color="#FFCD26" offset="0%"/><stop stop-color="#FFDF95" offset="100%"/></linearGradient><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" fill="url(#b)" mask="url(#c)"/></g></svg>
+                      <span class="ml-2 text-lg font-black">Flare</span>
+                  </span>
+              </a>
+          <div class="block w-2/3 mt-6 text-sm sm:flex lg:mt-0">
+              <ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Product</li>
+                  <li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Features</a></li>
+                  <li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Integrations</a></li>
+                  <li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Pricing</a></li>
+                  <li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">FAQ</a></li>
+              </ul>
+              <ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Company</li>
+                  <li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Privacy</a></li>
+                  <li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Terms of Service</a></li>
+              </ul>
+              <ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">TailwindCSS</li>
+                  <li><a href="https://devdojo.com/tailwindcss/templates" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Templates</a></li>
+                  <li><a href="https://devdojo.com/tailwindcss/components" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Components</a></li>
+                  <li><a href="https://devdojo.com/tails" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Tails</a></li>
+                  </li>
+              </ul>
+              <div class="flex flex-col w-full text-gray-700">
+                  <div class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Follow Us</div>
+                  <div class="flex justify-start pl-4 mt-2">
+                      <a class="flex items-center block mr-6 text-gray-300 no-underline hover:text-white" target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" /></svg>
+                      </a>
+                      <a class="flex items-center block mr-6 text-gray-300 no-underline hover:text-white" target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" /></svg>
+                      </a>
+                      <a class="flex items-center block text-gray-300 no-underline hover:text-white" target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /></svg>
+                      </a>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="pt-4 pt-6 mt-10 text-center text-gray-600 border-t border-gray-800"> ©2020 Flare. All rights reserved.</div>
+    </footer>
+
+    
+    <!-- footer 48 end -->
+
+
+    
     <!-- start of script section -->
     <script type="text/javascript">
         let toogler = document.getElementById("dark_mood_toogler");
diff --git a/public/componets/hero/hero.html b/public/componets/hero/hero.html
index 58e1c23..7052c26 100644
--- a/public/componets/hero/hero.html
+++ b/public/componets/hero/hero.html
@@ -4,7 +4,7 @@
     <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>
+    <title>Hero</title>
     <link rel="stylesheet" href="./../../../dist/tailshape.css">
 </head>
 <body>
@@ -273,51 +273,42 @@
     <!-- hero 7 end -->
 
     <!-- hero 8 start -->
-    <section class="section_divider" id="hero_8">
+    <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="#" class="mb-8">
-                        <span class="">Start Shopping</span>
-                    </a> -->
-                    <!-- <a href="#">
-                        <span >Learn More</span>
-                    </a> -->
-                    <button class=" py-4 px-6 mb-6 font-medium text-white bg-green-500 border-4 border-transparent rounded-lg  hover:bg-green-600">
-                      Start Shopping
-                    </button>
-                    <button class=" py-4 px-6 font-medium text-gray-700 bg-gray-300 border-4 border-transparent rounded-lg hover:bg-gray-500">
-                      Learn More
-                    </button>
-                </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 class=" p-24 flex items-center justify-around dark:bg-gray-800">
+      <div class="float-left my-6">
+          <div class="">
+              <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 flex flex-col md:flex-row ">
+                  <a href="#" class=" m-3  py-4 px-6 font-medium text-white bg-green-500 border-4 border-transparent rounded-lg hover:bg-green-600 ">
+                      <span >Start Shopping</span>
+                  </a>
+                  <a href="#"  class="m-3 py-4 px-8  font-medium text-gray-700 bg-gray-300 border-4 border-transparent rounded-lg hover:bg-gray-500">
+                      <span >Learn More</span>
+                  </a>
+              </div>
+          </div> 
+      </div>
+      <div class="float-right px-20 my-8 hidden md:block">
+          <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" id="hero_9">
       <div>Hero 9</div>
@@ -1569,6 +1560,211 @@
   <!-- hero 33 end -->
 
 
+  <!-- hero 34 start -->
+  <section class="section_divider">
+    <div>Hero 34</div>
+  </section>
+
+    <!-- BEGIN HERO SECTION -->
+      <div class="relative items-center justify-center w-full overflow-x-hidden lg:pt-40 lg:pb-40 xl:pt-40 xl:pb-64">
+        <div
+            class="container flex flex-col items-center justify-between h-full max-w-6xl px-8 mx-auto -mt-32 lg:flex-row xl:px-0">
+            <div
+                class="z-30 flex flex-col items-center w-full max-w-xl pt-48 text-center lg:items-start lg:w-1/2 lg:pt-20 xl:pt-40 lg:text-left">
+                <h1 class="relative mb-4 text-3xl font-black leading-tight text-gray-900 sm:text-6xl xl:mb-8">Build the
+                    Next
+                    Great Thing</h1>
+                <p class="pr-0 mb-8 text-base text-gray-600 sm:text-lg xl:text-xl lg:pr-20">Are you ready to start your
+                    adventure and start building the next greatest SAAS app on the market?</p>
+                <a href="#_"
+                    class="relative self-start inline-block w-auto px-8 py-4 mx-auto mt-0 text-base font-bold text-white bg-indigo-600 border-t border-gray-200 rounded-md shadow-xl sm:mt-1 fold-bold lg:mx-0">Signup
+                    Today!</a>
+                <!-- Integrates with section -->
+                <div class="flex-col hidden mt-12 sm:flex lg:mt-24">
+                    <p class="mb-4 text-sm font-medium tracking-widest text-gray-500 uppercase">Integrates With</p>
+                    <div class="flex">
+                        <svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
+                            viewBox="0 0 2499 1037" xmlns="http://www.w3.org/2000/svg">
+                            <g stroke="none" stroke-width="1">
+                                <g>
+                                    <path
+                                        d="M261.062 466.768c-53.833-19.912-83.335-35.399-83.335-59.735 0-20.652 16.963-32.45 47.201-32.45 55.31 0 112.09 21.388 151.178 40.559l22.124-136.427c-30.973-14.752-94.397-39.088-182.151-39.088-61.947 0-113.573 16.223-150.443 46.46-38.352 31.71-58.263 77.434-58.263 132.744 0 100.293 61.211 143.07 160.769 179.203 64.159 22.86 85.547 39.088 85.547 64.16 0 24.336-20.652 38.346-58.263 38.346-46.46 0-123.153-22.86-173.302-52.356L0 786.087c42.771 24.337 122.417 49.409 205.017 49.409 65.63 0 120.204-15.487 157.08-44.984 41.293-32.45 62.682-80.381 62.682-142.328 0-102.511-62.683-145.282-163.717-181.416zm523.877-80.387l22.124-135.692H690.265V85.966l-157.035 25.84-22.677 138.883-55.232 8.96-20.675 126.732h75.68v266.227c0 69.32 17.7 117.257 53.833 146.754 30.238 24.336 73.745 36.134 134.956 36.134 47.196 0 75.957-8.109 95.868-13.275V678.416c-11.062 2.953-36.133 8.114-53.097 8.114-36.134 0-51.62-18.435-51.62-60.47V386.38h94.673zm350.752-143.618c-51.62 0-92.92 27.102-109.142 75.775l-11.062-67.849H855.459v573.745h182.887V452.017c22.865-28.026 55.31-38.159 99.558-38.159 9.59 0 19.911 0 32.45 2.213V247.188c-12.539-2.948-23.6-4.425-34.663-4.425zm171.095-48.86c53.098 0 95.869-43.507 95.869-96.604 0-53.839-42.771-96.61-95.869-96.61-53.838 0-96.609 42.771-96.609 96.61 0 53.097 42.771 96.604 96.61 96.604zm-92.184 56.786h183.628v573.745h-183.628V250.689zm703.999 51.62c-32.45-42.035-77.434-62.682-134.956-62.682-53.097 0-99.558 22.124-143.07 68.584l-9.585-57.522h-160.769v786.134l182.893-30.232V822.22c28.02 8.85 56.78 13.275 82.594 13.275 45.725 0 112.096-11.798 163.717-67.843 49.408-53.839 74.485-137.168 74.485-247.052 0-97.345-18.44-171.09-55.31-218.291zm-151.92 353.983c-14.75 28.025-37.61 42.777-64.159 42.777-18.435 0-34.662-3.69-49.408-11.062V415.142c30.973-32.445 58.993-36.134 69.32-36.134 46.46 0 69.32 50.15 69.32 148.23 0 56.045-8.11 99.557-25.073 129.054zm731.566-123.894c0-91.443-19.912-163.717-59-214.602-39.822-51.62-99.557-78.169-175.514-78.169-155.608 0-252.212 115.044-252.212 299.408 0 103.247 25.808 180.68 76.692 230.089 45.725 44.248 111.361 66.372 196.168 66.372 78.169 0 150.442-18.435 196.167-48.673l-19.912-125.365c-44.989 24.336-97.345 37.61-156.344 37.61-35.398 0-59.734-7.378-77.434-22.864-19.175-16.223-30.237-42.771-33.921-80.382h303.097c.736-8.85 2.213-50.15 2.213-63.424zm-306.787-48.672c5.16-81.859 27.284-120.205 69.32-120.205 41.3 0 62.688 39.087 65.636 120.205H2191.46z" />
+                                </g>
+                            </g>
+                        </svg>
+                        <svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
+                            viewBox="0 0 2350 2315" xmlns="http://www.w3.org/2000/svg">
+                            <g stroke="none" stroke-width="1"></g>
+                            <g>
+                                <path
+                                    d="M1175 0C525.8 0 0 525.8 0 1175c0 552.2 378.9 1010.5 890.1 1139.7-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4c-79.3 0-152.8-35.2-185.1-99.9-38.2-70.5-44.1-179.2-141-246.8-29.4-23.5-5.9-47 26.4-44.1 61.7 17.6 111.6 58.8 158.6 120.4 47 61.7 67.6 76.4 155.7 76.4 41.1 0 105.7-2.9 164.5-11.8 32.3-82.3 88.1-155.7 155.7-190.9-393.6-47-581.6-240.9-581.6-505.3 0-114.6 49.9-223.3 132.2-317.3-26.4-91.1-61.7-279.1 11.8-352.5 176.3 0 282 114.6 308.4 143.9 88.1-29.4 185.1-47 284.9-47 102.8 0 196.8 17.6 284.9 47 26.4-29.4 132.2-143.9 308.4-143.9 70.5 70.5 38.2 261.4 8.8 352.5 82.3 91.1 129.3 202.7 129.3 317.3 0 264.4-185.1 458.3-575.7 499.4 108.7 55.8 185.1 214.4 185.1 331.9V2256c0 8.8-2.9 17.6-2.9 26.4C2021 2123.8 2350 1689.1 2350 1175 2350 525.8 1824.2 0 1175 0z" />
+                            </g>
+                            </g>
+                        </svg>
+                        <svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
+                            viewBox="0 0 2500 2158" xmlns="http://www.w3.org/2000/svg">
+                            <g stroke="none" stroke-width="1">
+                                <g transform="translate(-.157)">
+                                    <path
+                                        d="M2498.932 499.093c-11.204 242.78-181.152 575.201-509.837 997.268-339.895 440.74-627.499 661.11-862.808 661.11-145.67 0-268.924-134.462-369.776-403.39l-201.693-739.547C480.115 745.61 399.81 611.145 313.904 611.145c-18.675 0-84.04 39.219-196.095 117.656L.155 577.53a31955.67 31955.67 0 00364.171-324.952C528.669 110.644 651.928 35.944 734.1 28.472c194.224-18.675 313.746 113.921 358.567 397.786 48.556 306.277 82.172 496.767 100.845 571.47 56.027 253.986 117.656 380.98 184.887 380.98 52.29 0 130.73-82.172 235.311-246.516 104.584-164.345 160.609-289.47 168.078-375.376 14.94-141.934-41.085-212.9-168.078-212.9-59.762 0-121.392 13.075-184.887 39.219C1552.082 183.48 1787.393-10.745 2134.757.462c257.721 7.471 379.113 173.683 364.17 498.635l.005-.004z" />
+                                </g>
+                            </g>
+                        </svg>
+                        <svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
+                            viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg">
+                            <g stroke="none" stroke-width="1">
+                                <g transform="translate(-401 -701)">
+                                    <g transform="translate(-293 -236)">
+                                        <g transform="translate(463 909)">
+                                            <g transform="translate(0 28)">
+                                                <g transform="translate(229.885)">
+                                                    <path
+                                                        d="M242.088 0c-36.478.027-66 29.582-65.973 66-.027 36.418 29.522 65.973 66 66h66V66.027C308.142 29.608 278.593.054 242.088 0c.027 0 .027 0 0 0zm.23 175H66.912c-36.365.027-65.824 29.576-65.797 65.987-.054 36.41 29.405 65.96 65.77 66.013h175.433c36.366-.027 65.824-29.576 65.797-65.987.027-36.437-29.431-65.986-65.797-66.013zM681.115 240.987c.027-36.411-29.522-65.96-66-65.987-36.478.027-66.027 29.576-66 65.987V307h66c36.478-.027 66.027-29.576 66-66.013zm-175 .214V65.772C506.142 29.506 476.614.054 440.13 0c-36.486.027-66.04 29.48-66.014 65.772v175.429c-.054 36.293 29.501 65.745 65.987 65.799 36.485-.027 66.04-29.48 66.013-65.8zM440.115 680c36.478-.027 66.027-29.582 66-66 .027-36.418-29.522-65.973-66-66h-66v66c-.027 36.392 29.522 65.946 66 66zm-.23-175h175.433c36.366-.027 65.824-29.576 65.797-65.987.054-36.41-29.404-65.96-65.77-66.013H439.912c-36.366.027-65.824 29.576-65.797 65.987-.027 36.437 29.405 65.986 65.77 66.013zM1.115 439c-.027 36.418 29.522 65.973 66 66 36.478-.027 66.027-29.582 66-66v-66h-66c-36.478.027-66.027 29.582-66 66zm175-.249v175.444c-.054 36.296 29.501 65.751 65.987 65.805 36.485-.027 66.04-29.482 66.013-65.778V438.805c.054-36.296-29.501-65.751-65.986-65.805-36.513 0-66.04 29.455-66.014 65.751 0 0 0 .027 0 0z" />
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                        </svg>
+                        <svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
+                            viewBox="0 0 1681 417" xmlns="http://www.w3.org/2000/svg">
+                            <g stroke="none" stroke-width="1">
+                                <g>
+                                    <path
+                                        d="M1621.33 306.03l.578.008c34.43 0 58.659-23.855 58.924-57.992.126-16.904-4.757-32.38-13.753-43.558-9.512-11.834-22.829-18.142-38.516-18.267h-.313c-21.17 0-40.83 16.062-60.1 49.112l-1.533 2.638-.984-2.875c-4.866-14.163-9.2-25.963-11.791-33.025-1.817-4.925-2.617-7.138-2.809-7.854-.925-3.575-3.979-5.796-7.987-5.796-2.463 0-5.08.837-7.554 2.412-2.455 1.563-3.825 3.471-4.317 6.021l-.125.383c-19.287 60.155-35.188 89.359-48.662 89.359-1.959-.017-3.492-.654-4.634-1.93-3.529-3.9-2.662-13.174-1.462-26.016.879-9.433 1.883-20.112 1.466-31.446-.791-21.787-12.716-34.87-31.879-35.012-24.358-.009-40.141 25.933-47.412 41.395l-2.171 4.609-.48-5.083c-1.816-19.134-8.237-41.988-28.512-42.138-23.65 0-41.667 27.75-52.658 51.042l-2.946 6.241.292-6.891c1.304-31.063 2.375-49.404 3.187-54.492.8-5.104.38-8.53-1.292-10.492-1.583-1.837-4.566-2.516-8.941-2.241-7.571.479-11.442 5.087-17.271 20.533-9.575 25.367-33.93 84.383-53.375 84.383-3.858-.029-6.912-1.341-9.15-3.912-8.154-9.346-4.892-34.621-.38-69.592l.342-2.646c2.138-16.558-1.504-20.091-10.5-21.745a15.487 15.487 0 00-2.733-.267c-7.183 0-10.541 6.879-17.25 25.996-11.937 34.016-27.291 69.791-45.241 69.791-.659 0-1.305-.05-1.967-.154-9.513-1.62-9.304-15.729-9.042-33.608.134-9.667.296-20.63-1.191-30.525-2.684-17.758-13.142-28.846-27.313-28.958-28.267 0-47.33 36.2-56.196 57.783l-2.008 4.883-.671-5.242a486.444 486.444 0 01-3.43-41.729l-.024-.52.32-.409c52.905-66.596 76.647-114.654 76.963-155.829.204-26.304-11.933-42.104-32.462-42.267-15.013 0-50.705 12.505-63.109 128.321a669.633 669.633 0 00-3.75 65.45l-.008.434-.246.35c-24.204 35.033-75.862 95.295-126.437 95.295-45.696 0-82.154-36.97-82.154-102.229 0-87.483 61.92-141.196 108.52-141.196h.388c10.125.075 18.808 2.904 25.108 8.18 6.542 5.474 9.971 13.15 9.9 22.191-.091 12.08-4.029 18.288-7.833 24.284-.971 1.545-1.95 3.079-2.842 4.704-.9 1.641-1.72 4.02-.525 6.058 1.225 2.087 4.354 3.4 8.167 3.43 11.091 0 27.866-16.06 28.05-40.25.192-25.322-21.138-51.413-59.192-51.413-57.587 0-135.15 63.266-135.15 165.8 0 72.529 45.475 122.658 107.075 122.658 43.713 0 86.954-31.3 125.25-83.58l2.346-3.166.167 3.934c.812 19.137 2.2 34.212 3.212 45.224.654 7.08 1.13 12.192 1.113 15.013-.05 6.18.954 10.48 3.091 13.112 2.13 2.638 5.513 3.884 10.646 3.917 8.6 0 10.325-5.862 13.73-20.329l.978-4.13c4.234-17.528 19.867-74.745 43.38-74.745 3.841.037 6.804 1.17 8.908 3.4 5.192 5.508 4.625 16.813 3.967 29.908-.417 8.171-.834 16.609-.017 24.83 2.213 22.191 11.796 33.045 29.292 33.17 17.966.009 36.716-19.346 46.612-37.329l1.867-3.387.729 3.808c1.825 9.625 9.992 41.217 35.563 41.217 23.175 0 43.058-24.404 64.85-74.634l2.854-6.558-.175 7.154c-.463 19.034-1.492 42.275-1.5 60.246-.009 13.9 1.396 19.204 7.82 19.204l1.459.067c6.162 0 10.346-3.68 12.433-10.954 16.4-57.155 30.571-83.771 44.613-83.771 13.75.104 15.037 25.246 16.141 69.67l.075 3.117c.334 15.538.896 22.413 10.546 22.484 7.325 0 9.146-5.755 12.934-19.921.725-2.7 1.508-5.663 2.437-8.863 13.242-45.937 24.217-64.679 37.883-64.679 11.7.088 12.35 12.15 12.567 16.113.45 8.487-.425 17.375-1.267 25.954-.787 7.975-1.596 16.225-1.291 23.887.716 17.967 10.55 27.938 27.7 28.067 22.258 0 42.35-26.033 59.946-77.358l1.22-3.575 1.396 3.52c3.196 8.067 7.354 18.988 11.2 32.017l.146.496-.213.47c-17.041 37.834-29.062 79.976-29.233 102.493-.229 29.654 13.188 48.925 34.184 49.087h.362c11.42 0 38.042-4.587 38.558-47.02.213-17.392-3.9-41.984-12.204-73.105l-.954-3.563 3.063 2.042c10.637 7.038 22.591 10.8 34.616 10.9zm-573.697-143.913c.475-10.634 1.371-20.988 2.642-30.78 8.242-63.091 25.433-107.15 41.83-107.15h.074c7.817.059 11.725 5.971 11.646 17.563-.225 28.487-18.275 69.27-53.642 121.217l-2.766 4.066.216-4.916zm522.804 226.82c-2.608 3.476-6.241 5.238-10.791 5.238-5.225-.046-9.15-1.863-11.821-5.433-7.483-9.996-5.375-33.496 6.833-76.15a370.41 370.41 0 014.717-15.234l1.417-4.254 1.245 4.304c14.221 49.238 17.046 80.03 8.4 91.53zm4.426-126.145l-.259-.471-.516-1.638.241-.487c16.217-33.417 34.8-52.571 50.967-52.571h.167c18.258.137 30.883 16.57 30.708 39.942-.121 15.6-7 24.583-12.742 29.37-6.554 5.467-15.283 8.592-23.95 8.592-21.367-.162-36.033-12.458-44.617-22.737zM540.55 300.504c25.033-2 44.892-36.046 52.267-50.596l1.9-3.75.72 4.142c3.542 20.458 14.671 54.833 49.484 55.108h.291c15.059 0 32.142-9.212 49.409-26.633l1.267-1.28.92 1.538c11.625 19.442 27.217 29.771 43.817 28.921 24.438-1.27 39.27-18.587 40.575-30.617.333-3.066-.475-5.954-2.23-7.9-2.195-2.45-5.387-2.733-7.728-.487l-1.121 1.058c-5.688 5.463-16.288 15.642-27.838 16.242-14.141.692-24.6-7.762-31.358-25.212l-.28-.734.476-.616c38.887-50.863 66.175-128.471 63.479-180.525-1.242-24.092-8.246-52.813-34.558-52.813l-1.963.05c-10.079.52-19.246 5.325-27.241 14.27-24.413 27.313-37.188 94.538-32.55 171.267.958 15.942 3.729 30.842 8.225 44.271l.254.754-.513.609c-14.429 16.862-28.667 26.15-40.091 26.15-27.488 0-26.563-46.092-24.392-84.309.47-8.241 1.167-13.491-1.271-16.475-1.742-2.137-4.658-3.191-8.908-3.225l-.496-.004c-9.784 0-11.83 2.013-16.833 16.53-10.413 30.158-30.967 80.77-51.642 80.77-5.73-.054-10.104-2.008-13.1-5.825-10.03-12.8-2.413-44.725 3.704-70.387 1.1-4.613 2.154-9.042 3.058-13.142 1.338-6.083.93-10.52-1.22-13.208-2.159-2.68-6.463-3.763-12.142-3.313-8.854.709-14.517 4.417-17.254 21.254l-.55 3.5-2.059-2.491c-3.866-5.708-11.404-12.508-25.4-12.508-1.225 0-2.495.05-3.808.154-14.933 1.225-31.938 11.629-44.383 27.158-14.53 18.13-21.471 41.075-19.538 64.62.1 1.247.28 2.442.459 3.63l.1.654-.45.496c-8.692 9.467-17.55 14.275-26.326 14.275-13.545-.1-21.316-10.167-21.316-26.938 0-28.225 19.129-113.32 19.129-144.125 0-32.783-14.608-50.629-39.975-50.825h-.383c-37.042 0-65.909 42.03-93.534 128.505a1413.034 1413.034 0 00-7.641 24.975l-3.88 13.004 1.146-13.517a1682.328 1682.328 0 005.238-87.112c1.375-41.792-4.271-68.688-17.275-82.221-7.013-7.3-16.288-10.896-28.371-10.988h-.308c-45.325 0-67.038 76.442-82.85 130.38-4.771 16.283-14.175 53.012-20.454 78.12l3.72-6.046c2.788-31.616 10.867-110.812 10.338-153.779-.575-46.091-15.917-66.754-49.771-67.012h-.417c-18.083 0-30.629 8.987-37.966 16.525C7.358 52.92.017 70.604.425 85.875c.25 9.283 5.946 17.546 10.262 17.546 2.813 0 4.371-3.754 5.046-5.992 10.475-34.62 24.03-51.454 41.421-51.454 7.213.054 12.583 2.18 16.6 6.5 13.592 14.58 11.117 53.946 6.638 125.417-1.45 23.033-3.084 49.129-4.463 78.816-.24 4.899-.527 9.795-.858 14.688-1.321 20.612-2.371 36.904 5.45 38.116 10.175 1.588 16.796-2.545 20.187-12.612 5.025-14.942 16.296-55.78 38.105-130.4 20.925-71.608 36.733-97.662 56.958-97.662 23.367 0 25.108 40.12 20.825 124.787-.913 17.95-2.133 38.28-3.071 60.4-.13 3.108-.275 6.125-.425 9.025-.9 18.32-1.608 32.767 3.625 38.308 1.633 1.725 3.85 2.58 6.787 2.596 10.13 0 13.175-8.879 18.221-23.6.892-2.596 1.838-5.37 2.892-8.27 34.708-95.746 60.37-178.817 94.817-178.817 10.329 0 18.37 8.391 18.37 24.758 0 37.78-18.475 110.775-18.475 147.792 0 13.262 3.817 25.162 11.026 33.529 7.4 8.591 17.754 13.166 29.941 13.27h.267c11.525 0 23.529-5.6 35.696-16.641l1.141-1.033.917 1.237c8.012 10.767 20.938 16.554 34.896 15.48 21.408-1.667 39.37-20.73 46.054-38.705l1.308-3.517 1.304 3.517c4.967 13.338 15.709 29.413 38.663 27.55zM737.817 50.33l.366-.008c2.446 0 4.596 1.225 6.38 3.65 8.5 11.492 8.629 53.437-5.992 101.162-8.354 27.275-19.592 53.042-32.484 74.504l-2.058 3.417-.525-3.954c-1.517-11.542-2.267-23.558-2.792-33.783-3.729-72.138 18.092-144 37.105-144.988zM500.283 218.925c-7.491 30.146-21.858 66.537-47.762 68.62l-2.108.088c-10.746 0-16.771-7.033-17.909-20.916-1.425-17.367 6.063-37.704 19.071-51.825 8.28-8.992 17.62-13.942 26.3-13.942h.175c10.954.083 18.633 8.88 22.162 17.083l.188.425-.117.467zm120.146-110.52c-9.562 0-17.283 7.532-17.358 16.795-.075 9.33 7.6 16.98 17.1 17.05l.137 1.387v-1.387c9.425 0 17.142-7.53 17.217-16.787.075-9.334-7.596-16.984-17.096-17.059zm601.221 0c-9.563 0-17.28 7.532-17.358 16.795-.075 9.33 7.596 16.98 17.1 17.05l.133 1.387v-1.387c9.433 0 17.15-7.53 17.225-16.787.067-9.334-7.6-16.984-17.1-17.059z" />
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <svg class="absolute left-0 max-w-md mt-24 -ml-64 left-svg" viewBox="0 0 423 423"
+                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <defs>
+                        <linearGradient x1="100%" y1="0%" x2="4.48%" y2="0%" id="linearGradient-1">
+                            <stop stop-color="#5C54DB" offset="0%" />
+                            <stop stop-color="#6A82E7" offset="100%" />
+                        </linearGradient>
+                        <filter x="-9.3%" y="-6.7%" width="118.7%" height="118.7%" filterUnits="objectBoundingBox"
+                            id="filter-3">
+                            <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                            <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" in="shadowBlurOuter1" />
+                        </filter>
+                        <rect id="path-2" x="63" y="504" width="300" height="300" rx="40" />
+                    </defs>
+                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity=".9">
+                        <g id="Desktop-HD" transform="translate(-39 -531)">
+                            <g id="Hero" transform="translate(43 83)">
+                                <g id="Rectangle-6" transform="rotate(45 213 654)">
+                                    <use fill="#000" filter="url(#filter-3)" xlink:href="#path-2" />
+                                    <use fill="url(#linearGradient-1)" xlink:href="#path-2" />
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+            <div class="relative z-50 flex flex-col items-end justify-center w-full h-full lg:w-1/2 ms:pl-10">
+                <div class="container relative left-0 w-full max-w-4xl lg:absolute xl:max-w-6xl lg:w-screen">
+                    <img src="https://cdn.devdojo.com/images/september2020/macbook-mockup.png"
+                        class="w-full h-auto mt-20 mb-20 ml-0 lg:mt-24 xl:mt-40 lg:mb-0 lg:h-full lg:-ml-12">
+                </div>
+            </div>
+        </div>
+      </div>
+    <!-- HERO SECTION END -->
+
+  
+  <!-- hero 34 end -->
+
+  <!-- hero 35 start -->
+  <section class="section_divider">
+    <div>Hero 35</div>
+  </section>
+
+
+
+    <!-- BEGIN HERO SECTION -->
+    <div class="relative items-center justify-center  h-screen">
+
+      <div class="container flex flex-col items-center justify-center h-full max-w-6xl pl-0 mx-auto -mt-24 sm:pl-8 xl:pl-0 md:flex-row md:justify-between">
+
+          <div class="flex flex-col items-center w-5/6 md:items-start sm:w-1/2 lg:w-3/8 lg:mt-10">
+              <div class="relative">
+                  <h1 class="relative mb-4 text-4xl font-black leading-none text-center text-black lg:text-5xl xl:text-6xl md:text-left">Master the Art of Marketing</h1>
+                  <svg class="absolute top-0 right-0 hidden w-20 -mt-16 -mr-10 transform rotate-90 lg:block xl:-mr-8 xl:-mt-12" viewBox="0 0 89 96" xmlns="http://www.w3.org/2000/svg">
+                      <g transform="rotate(-80 49.934 46.34)" fill-rule="nonzero" fill="none">
+                          <path d="M57.5 74.93c0 4.239 3.451 7.676 7.708 7.676 4.256 0 7.707-3.437 7.707-7.677s-3.45-7.676-7.707-7.676-7.707 3.437-7.707 7.676zm10.277 0a2.564 2.564 0 01-2.569 2.558 2.564 2.564 0 01-2.57-2.559 2.564 2.564 0 012.57-2.559 2.564 2.564 0 012.569 2.56zM35.914 44.836c0-4.24-3.45-7.676-7.707-7.676-4.256 0-7.707 3.437-7.707 7.676 0 4.24 3.45 7.677 7.707 7.677s7.707-3.437 7.707-7.677zm-10.276 0a2.564 2.564 0 012.57-2.558 2.564 2.564 0 012.568 2.558 2.564 2.564 0 01-2.569 2.56 2.564 2.564 0 01-2.569-2.56z" fill="#9D45FF" />
+                          <ellipse fill="#2F36FF" cx="5.281" cy="49.345" rx="5.138" ry="5.118" />
+                          <path d="M60.656 26.976a2.564 2.564 0 002.57 2.559 2.564 2.564 0 002.568-2.56v-2.558a2.564 2.564 0 00-2.569-2.559 2.564 2.564 0 00-2.569 2.56v2.558zM63.225 9.064a2.564 2.564 0 00-2.569 2.559v2.559a2.564 2.564 0 002.57 2.558 2.564 2.564 0 002.568-2.558v-2.56a2.564 2.564 0 00-2.569-2.558zM70.932 16.74h-2.569a2.564 2.564 0 00-2.569 2.56 2.564 2.564 0 002.57 2.558h2.568a2.564 2.564 0 002.57-2.559 2.564 2.564 0 00-2.57-2.559zM58.087 16.74h-2.569a2.564 2.564 0 00-2.569 2.56 2.564 2.564 0 002.57 2.558h2.568a2.564 2.564 0 002.57-2.559 2.564 2.564 0 00-2.57-2.559zM91.068 44.466a2.564 2.564 0 00-2.421 2.7 2.564 2.564 0 002.69 2.431l2.555-.134a2.564 2.564 0 002.421-2.7 2.564 2.564 0 00-2.69-2.43l-2.555.133zM85.404 48.852a2.564 2.564 0 00-2.69-2.432l-2.556.134a2.564 2.564 0 00-2.42 2.7 2.564 2.564 0 002.69 2.431l2.555-.134a2.564 2.564 0 002.42-2.7zM88.24 42.85l-.134-2.565a2.564 2.564 0 00-2.69-2.432 2.564 2.564 0 00-2.421 2.7l.134 2.565a2.564 2.564 0 002.69 2.432 2.564 2.564 0 002.421-2.7zM91.78 55.198l-.134-2.566a2.564 2.564 0 00-2.69-2.431 2.564 2.564 0 00-2.42 2.7l.134 2.565a2.564 2.564 0 002.69 2.431 2.564 2.564 0 002.42-2.699z" fill="#FFCE27" />
+                          <path d="M61.132 60.396a2.564 2.564 0 002.569-2.559V44.99a2.564 2.564 0 00-2.57-2.559H48.234a2.564 2.564 0 00-2.57 2.56v12.847a2.564 2.564 0 002.57 2.56h12.899zm-10.33-12.848h7.76v7.73h-7.76v-7.73z" fill="#2F36FF" />
+                          <path d="M38.127 11.425a2.566 2.566 0 00-2.073-1.74l-7.54-1.093-3.363-6.804A2.676 2.676 0 0022.846.476c-.947 0-1.823.5-2.304 1.312l-3.378 6.804-7.54 1.093a2.566 2.566 0 00-2.076 1.74 2.552 2.552 0 00.647 2.623l5.454 5.297-1.284 7.48a2.554 2.554 0 001.017 2.512c.793.576 1.846.651 2.713.194l6.744-3.541 6.743 3.531a2.578 2.578 0 002.706-.194 2.554 2.554 0 001.022-2.503l-1.284-7.48 5.456-5.296a2.552 2.552 0 00.645-2.623zm-10.664 5.194a2.553 2.553 0 00-.74 2.262l.637 3.698-3.327-1.748a2.578 2.578 0 00-2.389 0l-3.34 1.745.638-3.697a2.553 2.553 0 00-.728-2.26l-2.7-2.617 3.728-.54a2.568 2.568 0 001.935-1.4l1.662-3.36 1.664 3.36a2.568 2.568 0 001.932 1.4l3.725.54-2.697 2.617z" fill="#FFCE27" />
+                      </g>
+                  </svg>
+              </div>
+              <p class="my-3 text-base text-center text-gray-600 xl:text-xl md:text-left">Leverage our powerful tools to take advantage of the ground-breaking marketing strategies built for designers and developers.</p>
+              <a href="#_" class="relative mt-5">
+                  <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
+                  <span class="relative inline-block w-full h-full px-8 py-3 text-base font-bold bg-white border-2 border-black rounded hover:bg-yellow-400 xl:text-xl fold-bold">Signup Today!</span>
+              </a>
+          </div>
+
+          <div class="flex flex-col items-end justify-center w-5/6 h-auto pl-0 pr-0 mt-10 sm:pl-20 sm:pr-8 xl:pr-0 md:mt-0 md:h-full sm:w-2/3">
+              <!-- HERO SVG IMAGE -->
+              <svg class="w-full h-auto" viewBox="0 0 273 190" xmlns="http://www.w3.org/2000/svg">
+                  <g transform="translate(-1)" fill-rule="nonzero" fill="none">
+                      <path d="M87.27 99.64h-4.33a3.75 3.75 0 01-3.74-3.73v-7.9a3.75 3.75 0 013.74-3.73h22.94a3.75 3.75 0 013.74 3.73v7.9a3.75 3.75 0 01-3.74 3.73H87.27z" fill="#1A1A1A" />
+                      <path d="M16.64 123.09s-7.86 11.7-10.86 20.41c-3 8.71-7.46 19.49-1.43 24.42 6.03 4.93 12.52.52 12.52.52s.19 6.05 0 10.91-.54 9.7-.54 9.7l48.72.45s-2-10.09-2.6-16.15c-.6-6.06-.83-9.79-.83-9.79s8.05 1.5 10.49.65c2.44-.85 25.16-32.71 25.16-32.71l2.85-15.08a12.53 12.53 0 00-9.92-5.65c-7.13-.56-10.32 1.73-10.32 1.73l-7.41 22.16-7.08 5.49s-3.16-.71-6.2-9.49c-3.04-8.78-7.07-15.84-16.71-17.39-9.64-1.55-25.84 9.82-25.84 9.82z" fill="#FFCE26" />
+                      <path d="M38.27 119.01s6.78-3.36 6.42-8.63c-.41-6.14-5.33-9.66-8.13-10.22l.48-6.68a13.07 13.07 0 009.54-9.09l1 4.5s1.24-1 2.25-4.22c1.3-4.12-2.51-7.48-5.29-8.11-4.16-.94-7.54-.34-8.62 1l-.75 1a11.36 11.36 0 00-11.71.33s-4.79 3.34-1.59 7c0 0-4.19.81-4.89 4.78-.7 3.97 2.53 7.49 2.53 7.49s-5.48 0-6.28 4.62c-.8 4.62 4.4 8 4.4 8s-6.16 2.05-6 7.09c.15 4.63 5.25 6.19 8 5.64a5.89 5.89 0 003-1.08 10.24 10.24 0 0010.15 4.49c5.18-.67 5.89-4.33 5.91-5a25.82 25.82 0 00-.42-2.91z" fill="#FFF" />
+                      <path d="M198.56 112.66a10.09 10.09 0 017.11 2c3.58 2.6 4.3 6.79 3.62 10.34 0 0 4.78.6 7.87 2.9s5.45 5.12 10 15.82 6.54 17.17 7.92 23.12c1.38 5.95 1.84 11.08 1 15.59a18.37 18.37 0 01-2.48 6.86h-74.19l-.9-53.57s5.21-9.86 19.92-11.83a8.35 8.35 0 013.45-9.39c5.4-3.7 16.68-1.84 16.68-1.84z" fill="#FFCE26" />
+                      <path d="M197.32 108.4s3.62 2.08 5.78-1a3.94 3.94 0 00-1.43-6c-1.16-.42-4-1.05-5.35 1.25l-.5.5s-1.34-3.6-.41-6.57v-.92s-5.45.9-7.49 1c-1.81.13-3.7-.1-7.42-1.31 0 0-.32 12.84-.18 15.64.14 2.8 1.86 5.1 4.49 5.36v6.69l-2.63.33s3.22 3.6 5.49 3.62a48.63 48.63 0 0010.7-2.27 21.74 21.74 0 012.28-.86l-1.77-.26-1.08-14.44-.48-.76zM202.28 162.68s-5.4-7.26-7.21-8.81c-1.81-1.55-4.26-3.32-7.17-3.59l-4.35 4.74-2.34.51 3.78 11.82 3.55-.51s2.09.48 3.91 4.94a16 16 0 006.11-4.59 35.62 35.62 0 003.72-4.51zM180.13 153l2.52-3.3s-3.09.61-3.34 1.34l.82 1.96zM98.37 113.86s1.94-4 2-6.57c.06-2.57-1-3.88-2.41-3.85a3.12 3.12 0 00-3.56-2.25l2.67-8.09s.44-2.57-1.51-2.82-3 2.93-3 2.93l-3.66 11s-.49 2.15-2 2.15a2.25 2.25 0 01-2.3-2.1c0-.83-1.16-3.24-3.09-2.95-1.93.29-1.52 2-.56 5.45s1.36 4.55 1.36 4.55a17.43 17.43 0 018.75-.43 23 23 0 017.31 2.98z" fill="#FFF" />
+                      <path d="M141.78 135.99h32.62l15.42 45.31h-33.55a5.56 5.56 0 00-.33-2.92c-.61-2.09-14.16-42.39-14.16-42.39zM187.08 145.12l1.2-1.42 2.92 2.46-1.34 1.3z" fill="#FFF" />
+                      <path fill="#FFCE26" d="M187.08 145.12l2.92 2.61-6.26 7.29-2.57.51-.81-2.39z" />
+                      <path d="M191.62 108.2s-1.79 1.3-1.68 2.67a6 6 0 00.31 1.79s-4.19.93-4.27-1c-.05-1.27 1.14-1.46 1.86-1.46.72 0 1.82 0 1.76-.82-.06-.82.88-2.88 2.02-1.18zM202.42 101.58s2.88-4.27 2.66-7.92c-.22-3.65-2.46-5.57-6.35-5.95 0 0-3.49-4.12-6.88-3.82a13.11 13.11 0 00-5.93 2.17s-6.3-1.47-9.05 3.42c-2.75 4.89 1.83 9 3.34 9.52l.09-3.7a18.63 18.63 0 008.31 1.3 64.88 64.88 0 007-1s-1.25 4.73.24 7.16a4.59 4.59 0 013.59-1.83c2.3.03 2.98.65 2.98.65z" fill="#1A1A1A" />
+                      <path d="M159.52 40.14V21.63a8.27 8.27 0 018.25-8.25h60.22a8.27 8.27 0 018.25 8.25v33.52a8.28 8.28 0 01-8.25 8.25h-60.22a8.28 8.28 0 01-8.25-8.25V40.14z" fill="#FFCE26" />
+                      <path d="M71.46 134.29l4.49-2.42 59.23-.14a9.36 9.36 0 017 5.57l13.59 41.08s2.35 8.67-6.73 10.89l-3.21-.08-74.37-54.9z" fill="#FFF" />
+                      <path d="M143.64 189.5H87.11a8.61 8.61 0 01-8.2-5.67L65.5 145.11c-1.86-5.36 2.31-10.88 8.2-10.88h56.54a8.62 8.62 0 018.2 5.67l13.44 38.71c1.82 5.35-2.34 10.89-8.24 10.89z" fill="#1A1A1A" />
+                      <path d="M106.88 160.63c1.72 3 1.53 6.32-.43 7.45s-4.95-.36-6.68-3.35c-1.73-2.99-1.52-6.32.44-7.45s4.91.37 6.67 3.35z" fill="#FFF" />
+                      <path d="M37.08 134.21s3.83 26.71 24.8 34.4l-.26-5.07s-17.81-3.04-24.54-29.33z" fill="#1A1A1A" />
+                      <path d="M46.4 84.67s1 4.66 1.49 8.8l.17.39s2.83.43 3.18 1.61c.35 1.18-1.86 3.4-1.86 3.4s1 4.54-1.41 6.36c-2.41 1.82-3.94 1.72-3.94 1.72s-1.62-6.38-8.39-7.06c0 0-4.16 1.25-5.24-2.32a3.5 3.5 0 013.31-4.78c.89.108 1.766.316 2.61.62a57 57 0 006.22-4.49c1.69-1.63 3.86-4.25 3.86-4.25z" fill="#FFF" />
+                      <path d="M192.34 171.78l-1.76-3s-2.66 2.67-1.95 3.85c.71 1.18 3.71-.85 3.71-.85zM202.17 162.68l-2.13-2.79s2-1.18 3.1-.21-.97 3-.97 3zM184.52 116.33l.27 6.72-2.63.33s-2.74-4.11 2.12-7l.24-.05zM198.35 115.28s6.22.39 6.26 3.54c.04 3.15-4 4.78-4 4.78h-1.73l-.53-8.32z" fill="#1A1A1A" />
+                      <path d="M49.75 84.28a2.4 2.4 0 01-3.1.56l.3 1.79.61 2.54a18.7 18.7 0 002.08-4.5c.04-.17.08-.26.11-.39zM43.05 104.71a10.18 10.18 0 011 2.24s1.5.11 3.94-1.72c.36-.269.66-.61.88-1a5 5 0 01-5.82.48z" fill="#EEE" />
+                      <path d="M178.1 39.98a5.82 5.82 0 11-11.64 0 5.82 5.82 0 0111.64 0z" fill="#FEFEFE" />
+                      <circle fill="#FFCE26" cx="108.43" cy="37.6" r="2.38" />
+                      <path d="M195.39 95.62c-1.42.54-10.69-.48-14.47-1.91-3.17-1.2-2.58-5.05-2.31-6.26a6.63 6.63 0 00-1.74 2c-2.74 4.88 1.83 9 3.34 9.52l.09-3.7a18.63 18.63 0 008.31 1.3c3.74-.36 6.14-.82 6.79-.95.08-.02.08-.04-.01 0zM195.88 95.5l-.46.68c-.27 1.31-.81 4.68.37 6.61a4.87 4.87 0 011.23-1.13c-1.14-.73-1.14-6.16-1.14-6.16z"fill="#FFF" />
+                      <path d="M188.32 117.18c-3.68 0-7.38-1.41-8.09-4.82a28.67 28.67 0 01-.24-3.84v-1.13c0-1.45.19-11.36.2-11.78a.33.33 0 01.35-.34.34.34 0 01.33.35c0 .11-.23 10.32-.19 11.75v1.14a30.37 30.37 0 00.22 3.71c.73 3.54 5.23 4.64 9.09 4.17a14.86 14.86 0 003.19-.68.35.35 0 01.44.21.35.35 0 01-.21.44 15.7 15.7 0 01-3.33.71 14.72 14.72 0 01-1.76.11zM198.82 123.95a.35.35 0 01-.35-.33l-.75-14.82a.35.35 0 01.32-.37.38.38 0 01.37.33l.75 14.82a.35.35 0 01-.33.37h-.01z"fill="#000" />
+                      <path d="M199.79 109.5c-.99 0-1.95-.33-2.73-.94a.342.342 0 11.42-.54 3.79 3.79 0 10-1.25-4.37.34.34 0 01-.44.2.35.35 0 01-.2-.45 4.49 4.49 0 117.05 5.07 4.5 4.5 0 01-2.85 1.03zM180.56 99.87a.32.32 0 01-.14 0 .35.35 0 01-.17-.46s.84-1.73 3.28-1.1a.35.35 0 01-.18.67c-1.88-.5-2.47.71-2.48.72a.33.33 0 01-.31.17zM192.41 100.06a.34.34 0 01-.27-.13c-1.61-2.06-3.19-1.08-3.26-1a.34.34 0 01-.47-.1.34.34 0 01.1-.48s2.18-1.35 4.17 1.2a.34.34 0 01-.06.48.31.31 0 01-.21.03zM188.58 113.28a3.63 3.63 0 01-1.12-.17 2.49 2.49 0 01-1.69-1.31 1.33 1.33 0 01.18-1.34 1.93 1.93 0 011.77-.61c.93.11 1 .05 1.2-.09.2-.14.27-.2.43-1.11a1.92 1.92 0 011.11-1.51 1.31 1.31 0 011.33.22 2.4 2.4 0 01.69 1.93 3.89 3.89 0 01-3.9 4v-.01zm-1.16-2.78a1.15 1.15 0 00-.93.37.66.66 0 00-.08.67c.275.46.727.785 1.25.9a3.23 3.23 0 002.86-.52 3.31 3.31 0 001.28-2.66 1.79 1.79 0 00-.43-1.37.62.62 0 00-.66-.13 1.24 1.24 0 00-.68 1c-.19 1.08-.35 1.28-.71 1.55s-.59.35-1.68.21l-.22-.02z"fill="#000" />
+                      <path d="M190.32 112.83a.35.35 0 01-.3-.18c-1.29-2.3.58-4.16 1.74-4.82a.34.34 0 01.47.13.34.34 0 01-.13.47c-.11.06-2.75 1.6-1.48 3.88a.35.35 0 01-.13.47.34.34 0 01-.17.05zM201.11 107.5a.29.29 0 01-.16 0l-3.22-1.59a.35.35 0 01-.19-.25.34.34 0 01.1-.3l2.93-3a.34.34 0 01.48.48l-2.6 2.66 2.8 1.39a.34.34 0 01.15.46.34.34 0 01-.29.15zM190.55 101.44c-.27 0-.46.08-.51 1.07-.05.99.22 1.29.47 1.28.25-.01.49-.36.46-1.15-.03-.79-.09-1.14-.42-1.2zM182.57 101.36c-.27 0-.45.07-.55 1.06-.1.99.18 1.3.43 1.29.25-.01.5-.34.5-1.13 0-.79-.02-1.15-.38-1.22zM202.38 102.11a.41.41 0 01-.18-.05.34.34 0 01-.1-.48c1.73-2.69 4.24-7.73 1.53-11.22a5.76 5.76 0 00-2.46-1.83 6.91 6.91 0 00-1.49-.37h-.23c-.83-.08-.93-.09-1-.29a.35.35 0 01.15-.47.39.39 0 01.3 0c.12 0 .43 0 .65.08h.28a8.37 8.37 0 011.62.41 6.49 6.49 0 012.76 2.05c3 3.82.33 9.17-1.51 12a.32.32 0 01-.32.17zM196.1 90.09a.34.34 0 01-.17-.64c.31-.19 1.53-1.11 2-1.45a.34.34 0 01.48.06.35.35 0 01-.06.48c-.07.05-1.64 1.25-2.05 1.5a.41.41 0 01-.2.05zM183.66 155.23a.4.4 0 01-.22-.08.36.36 0 010-.49l5.93-7-2.39-2-6.52 7.75a.35.35 0 11-.53-.45l6.75-8a.33.33 0 01.48 0l2.92 2.45a.36.36 0 010 .49l-6.15 7.31a.36.36 0 01-.27.02z"fill="#000" />
+                      <path d="M189.82 147.92a.34.34 0 01-.23-.08.35.35 0 010-.48l1-1.16-2.39-2-1 1.16a.34.34 0 01-.52-.44l1.2-1.42a.35.35 0 01.49 0l2.92 2.45a.42.42 0 01.12.24.38.38 0 01-.08.25l-1.2 1.42a.35.35 0 01-.31.06zM182.64 160.72a.35.35 0 01-.08-.68 31.68 31.68 0 003.1-1 .35.35 0 01.44.2.34.34 0 01-.21.44 30.5 30.5 0 01-3.16 1l-.09.04zM180.98 155.87a.35.35 0 01-.34-.29.35.35 0 01.29-.39 15 15 0 005.37-1.61.35.35 0 01.48.09.36.36 0 01-.09.48 15.67 15.67 0 01-5.65 1.72h-.06zM183.88 164.35a.33.33 0 01-.34-.31.34.34 0 01.3-.37 26 26 0 003.18-.5.34.34 0 11.17.66 24.79 24.79 0 01-3.28.52h-.03zM179.38 151.2a.34.34 0 01-.18-.64 9.48 9.48 0 013.82-1.21.34.34 0 01.37.32.35.35 0 01-.32.37 8.79 8.79 0 00-3.51 1.11.41.41 0 01-.18.05zM202.28 163.02a.34.34 0 01-.27-.13c-.06-.08-6.4-8.23-8-9.58a13.68 13.68 0 00-6.48-2.74.342.342 0 11.07-.68 13.94 13.94 0 016.85 2.9c1.64 1.39 7.82 9.34 8.08 9.68a.34.34 0 01-.25.55zM192.74 172.13a.34.34 0 01-.29-.17c-1.54-2.57-3.24-4.76-3.71-4.78a4.83 4.83 0 00-.6.09 13.73 13.73 0 01-3.17.28.34.34 0 01-.33-.35.35.35 0 01.36-.33 12.76 12.76 0 003-.27 4 4 0 01.73-.11c1.11 0 3.37 3.58 4.3 5.12a.34.34 0 01-.12.47.37.37 0 01-.17.05zM223.49 176.44a.34.34 0 01-.29-.17c-3.9-6.83-15.43-14-20.09-16.24a.344.344 0 01.3-.62c4.91 2.35 16.37 9.49 20.38 16.52a.34.34 0 01-.12.47.391.391 0 01-.18.04zM207.81 189.82a.35.35 0 01-.19-.06 104.58 104.58 0 01-19.13-16.66.34.34 0 11.51-.45 104.56 104.56 0 0019 16.54.34.34 0 01.1.48.35.35 0 01-.29.15zM233.18 189.82a.41.41 0 01-.18 0 .34.34 0 01-.12-.47 22.46 22.46 0 003-10.35c.55-11.95-3.93-23.09-9-34.4a79.3 79.3 0 01-1-2.35c-2.16-5-4.85-11.31-9.28-14.2-3.05-2-6.81-2.63-10.44-3.26l-.81-.14a.34.34 0 01-.28-.4.36.36 0 01.4-.28l.81.14c3.7.64 7.53 1.3 10.69 3.36 4.61 3 7.34 9.38 9.54 14.5.35.82.69 1.61 1 2.35 5.08 11.39 9.59 22.62 9 34.71a23.32 23.32 0 01-3.05 10.62.34.34 0 01-.28.17zM200.72 124.06c-.75-.06-1.3-.09-1.92-.11a.36.36 0 01-.34-.36.35.35 0 01.36-.33c.63 0 1.19.05 1.93.11a.35.35 0 010 .69h-.03z"fill="#000" />
+                      <path d="M189.82 181.64h-33.68a.35.35 0 01-.35-.34.35.35 0 01.35-.35h33.2l-15.3-44.61h-32.52a.35.35 0 01-.34-.35.34.34 0 01.34-.34h32.76a.35.35 0 01.33.23l15.53 45.3c.05.1.05.22 0 .32a.35.35 0 01-.32.14zM189.42 173.5a1.17 1.17 0 01-.93-.36c-.71-.78-.12-2.36 1.75-4.69a.342.342 0 11.54.42c-1.81 2.27-2.09 3.47-1.78 3.81.31.34 1.11.2 2.85-.74a30 30 0 005.53-4.08c4.34-3.93 6.2-7.23 5.62-7.87-.32-.36-1.14-.17-2.5.56a.35.35 0 01-.47-.14.34.34 0 01.14-.46c1.24-.67 2.6-1.24 3.34-.42 1.21 1.34-1.93 5.46-5.67 8.84a30.34 30.34 0 01-5.67 4.18 6.46 6.46 0 01-2.75.95zM10.55 170.55a9.92 9.92 0 01-7.65-3.6c-6.25-7.06 4.15-30.27 13.14-43.74a.35.35 0 01.58.39c-10.64 15.9-18.48 36.9-13.2 42.9 5.69 6.43 13 1.84 13.26 1.64a.343.343 0 01.38.57 13.23 13.23 0 01-6.51 1.84zM43.17 90.39a.34.34 0 01-.24-.58 3.06 3.06 0 013.65-.63.34.34 0 01.14.46.34.34 0 01-.46.15 2.39 2.39 0 00-2.83.49.36.36 0 01-.26.11zM44.94 91.61c.28-.05.46.07.54 1.06.08.99-.19 1.29-.44 1.29s-.49-.35-.49-1.14c0-.79.03-1.16.39-1.21zM34.62 100.91a4.1 4.1 0 01-4-3.47 4.09 4.09 0 017.15-3.28.344.344 0 01-.52.45 3.41 3.41 0 00-5.33.2 3.4 3.4 0 00.73 4.75 3.42 3.42 0 004.36-.27.34.34 0 11.47.49 4 4 0 01-2.2 1.08 4.44 4.44 0 01-.66.05z"fill="#000" />
+                      <path d="M33.95 98.98a.33.33 0 01-.25-.12.34.34 0 010-.48l1.94-1.74-2.42-1.28a.35.35 0 01-.14-.47.35.35 0 01.47-.14l2.84 1.52c.1.05.168.148.18.26a.35.35 0 01-.11.3l-2.3 2.06a.32.32 0 01-.21.09zM44.24 107.3a.35.35 0 01-.34-.28.34.34 0 01.28-.4 6.07 6.07 0 004.33-2.59 7 7 0 00.54-5.06.35.35 0 01.08-.34c.77-.79 1.94-2.33 1.77-3.09-.17-.76-1.85-1.19-3-1.36a.34.34 0 01-.29-.31c0-.07-.8-7.45-1.34-8.9a.35.35 0 01.472-.432.34.34 0 01.178.192c.51 1.39 1.19 7.45 1.34 8.81.88.16 3.09.67 3.34 1.85.25 1.18-1.31 3-1.82 3.58a7.43 7.43 0 01-.66 5.41 6.68 6.68 0 01-4.8 2.91l-.08.01zM82.25 111.71a.35.35 0 01-.31-.2 21.79 21.79 0 01-1-3.21c-.21-.77-.4-1.5-.57-2a6.74 6.74 0 01-.58-3.94 2.13 2.13 0 011.09-1.36 2.24 2.24 0 012.17.2 4.19 4.19 0 011.37 1.58c.155.348.275.71.36 1.08.23.88.52 2 1.32 2.18 1.3.3 2.3-.923 3-3.67.35-1.35.66-2.47 1-3.5a44.5 44.5 0 012.57-6.8l.11-.22a3.78 3.78 0 011.11-1.55 2.08 2.08 0 011.35-.37 2.14 2.14 0 011.67.89c.54.828.692 1.85.42 2.8-.36 1.44-1.86 5.64-2.4 7.14a3.15 3.15 0 011.95.47 2.8 2.8 0 011.14 1.86 3.44 3.44 0 012 1.11c.639.837.9 1.902.72 2.94a.35.35 0 01-.38.3.33.33 0 01-.3-.38 3.09 3.09 0 00-.57-2.41 2.81 2.81 0 00-1.77-.91.35.35 0 01-.32-.3 2.27 2.27 0 00-.88-1.64 2.84 2.84 0 00-2-.29.34.34 0 01-.33-.1.32.32 0 01-.07-.35c0-.06 2.15-5.92 2.58-7.6a2.84 2.84 0 00-.31-2.24 1.54 1.54 0 00-1.17-.61 1.44 1.44 0 00-.9.24 3.35 3.35 0 00-.89 1.3l-.11.22a43.86 43.86 0 00-2.53 6.69c-.31 1-.62 2.14-1 3.48-.83 3.18-2.13 4.59-3.85 4.17-1.2-.29-1.56-1.67-1.83-2.68a4.71 4.71 0 00-.3-.92 3.49 3.49 0 00-1.13-1.33 1.58 1.58 0 00-1.5-.17 1.5 1.5 0 00-.73.94 6.21 6.21 0 00.55 3.48c.19.55.39 1.3.6 2.09a22.48 22.48 0 001 3.08.34.34 0 01-.16.46.28.28 0 01-.19.05z"fill="#000" />
+                      <path d="M95.95 108.27a.31.31 0 01-.19-.06.34.34 0 01-.1-.48 8.74 8.74 0 001.69-4.43c0-.19.15-.345.34-.35a.37.37 0 01.35.34 9.26 9.26 0 01-1.81 4.82.33.33 0 01-.28.16zM92.88 105.58h-.14a.34.34 0 01-.17-.45 21.13 21.13 0 001.52-4 .35.35 0 01.39-.29.34.34 0 01.29.39 19.69 19.69 0 01-1.57 4.14.37.37 0 01-.32.21zM98.25 114.4a.33.33 0 01-.19-.06.34.34 0 01-.1-.47 15.05 15.05 0 002.1-7.31.35.35 0 01.69 0 15.51 15.51 0 01-2.21 7.68.36.36 0 01-.29.16zM65.05 189.82a.33.33 0 01-.32-.23c-1.63-4.85-3.05-19.35-3.46-26a.35.35 0 01.33-.37.35.35 0 01.36.33c.4 6.65 1.82 21.07 3.42 25.85a.34.34 0 01-.22.43l-.11-.01zM16.33 189.38a.35.35 0 01-.34-.38 174 174 0 00.31-25c-.39-5.9-.3-12.86-.22-18.45 0-2.13.05-4.1.05-5.81a58.81 58.81 0 011.93-16.11.34.34 0 01.43-.24.33.33 0 01.23.42 58.4 58.4 0 00-1.9 15.93c0 1.71 0 3.69-.06 5.82-.07 5.58-.16 12.52.23 18.4a174.72 174.72 0 01-.32 25.14.35.35 0 01-.34.28zM65.39 140.5h-.11a5.51 5.51 0 01-1.74-1 12.62 12.62 0 01-3.19-5c-.37-.9-.74-1.82-1.11-2.73a82.83 82.83 0 00-3.9-8.72c-2.7-4.95-6.3-7.92-11-9.06a.35.35 0 01-.25-.42.34.34 0 01.41-.25c4.84 1.18 8.69 4.34 11.45 9.4a81.11 81.11 0 013.93 8.78c.37.92.73 1.83 1.11 2.73a12.06 12.06 0 003 4.78 5 5 0 001.52.86.35.35 0 01.22.44.35.35 0 01-.34.19z" fill="#000" />
+                      <path d="M72.47 134.43h-.1a.34.34 0 01-.22-.43l6.91-21.12a.41.41 0 01.07-.11c.1-.13 2.65-3 10.29-2.32 8.49.76 10.92 5.64 11 5.85a.34.34 0 010 .2v.21c-.91 5.37-1.69 10-2.82 14.89a.34.34 0 01-.41.26.34.34 0 01-.26-.41c1.12-4.87 1.9-9.5 2.81-14.85v-.09c-.38-.66-3-4.71-10.41-5.38-6.71-.6-9.32 1.69-9.67 2l-6.89 21a.34.34 0 01-.3.3zM68.88 164.72a29.23 29.23 0 01-13-2.94 29.53 29.53 0 01-7.83-5.79 38.67 38.67 0 01-5.46-7.17 49.51 49.51 0 01-3.45-7 50.1 50.1 0 01-1.82-5.33c-.16-.58-.37-1.35-.52-2.13a.34.34 0 01.26-.4.34.34 0 01.41.27c.15.75.36 1.5.52 2.07a50.13 50.13 0 001.78 5.26 49.34 49.34 0 003.41 6.91 38.47 38.47 0 005.36 7 27.54 27.54 0 0021.31 8.51 22.72 22.72 0 002.27-.17.343.343 0 11.09.68 19.53 19.53 0 01-2.34.17l-.99.06zM182.51 123.72a.35.35 0 01-.34-.31.36.36 0 01.31-.38l2.49-.21a.33.33 0 01.37.32.34.34 0 01-.31.37l-2.49.21h-.03zM158 136.34a.34.34 0 01-.28-.54c4.48-6.78 11-10.68 20.35-12.26a.34.34 0 01.12.67c-9.2 1.56-15.53 5.36-19.9 12a.35.35 0 01-.29.13zM106.64 166.73a4.77 4.77 0 01-2.11-.55 9.05 9.05 0 01-4.6-8 3.56 3.56 0 015.52-3.19 8.54 8.54 0 013.39 3.36c1.82 3.14 1.56 6.69-.56 7.92a3.29 3.29 0 01-1.64.46zm-3.3-11.57a2.63 2.63 0 00-1.3.34 3.26 3.26 0 00-1.43 2.75 7.82 7.82 0 001.12 4.23 7.66 7.66 0 003.11 3.08 3.19 3.19 0 003.1.14c1.79-1 1.93-4.17.31-7a7.78 7.78 0 00-3.11-3.08 4 4 0 00-1.8-.46z" fill="#000" />
+                      <path d="M145.88 148.89a.34.34 0 01-.32-.23l-3.61-10.9a8.3 8.3 0 00-7.88-5.69H77.54a8.31 8.31 0 00-1.79.19l-4.87 2.76a.34.34 0 11-.33-.59l4.93-2.79h.09a9.48 9.48 0 012-.22h56.51a9 9 0 018.53 6.16l3.61 10.9a.35.35 0 01-.22.44l-.12-.03zM147.49 189.82a.35.35 0 01-.35-.34.35.35 0 01.35-.35 8.31 8.31 0 007.88-10.91l-5.12-15.43a.343.343 0 11.65-.22l5.12 15.44a9 9 0 01-8.53 11.81z" fill="#000" />
+                      <path d="M143.64 189.82H87.11a9 9 0 01-8.53-5.9L65.17 145.2a8.24 8.24 0 011.11-7.57 9.1 9.1 0 017.42-3.76h56.54a8.93 8.93 0 018.52 5.9l13.41 38.73a8.26 8.26 0 01-1.1 7.57 9.121 9.121 0 01-7.43 3.75zM73.7 134.56a8.4 8.4 0 00-6.86 3.47 7.56 7.56 0 00-1 6.94l13.41 38.73a8.26 8.26 0 007.88 5.43h56.53a8.43 8.43 0 006.87-3.47 7.56 7.56 0 001-6.94L138.11 140a8.24 8.24 0 00-7.87-5.44H73.7zM241.44 154.21a.34.34 0 01-.34-.3.33.33 0 01.3-.38s.58-.08 1.57-.29a.33.33 0 01.4.27.35.35 0 01-.26.41c-1 .21-1.61.28-1.63.29h-.04zm5.44-1.31a.34.34 0 01-.1-.67c1.23-.39 2.47-.86 3.68-1.37a.343.343 0 11.27.63c-1.23.53-2.49 1-3.74 1.4l-.11.01zm7.28-3.1a.35.35 0 01-.3-.18.35.35 0 01.14-.47 37.85 37.85 0 003.35-2 .35.35 0 01.47.09.34.34 0 01-.09.48 40.06 40.06 0 01-3.4 2.08.35.35 0 01-.18 0h.01zm6.53-4.46a.36.36 0 01-.27-.12.35.35 0 010-.48 34.63 34.63 0 002.84-2.7.35.35 0 01.49 0 .36.36 0 010 .49 35.89 35.89 0 01-2.89 2.75.32.32 0 01-.18.06h.01zm5.4-5.75a.38.38 0 01-.21-.09.35.35 0 01-.07-.48 36.83 36.83 0 002.15-3.27.34.34 0 01.59.34 34.88 34.88 0 01-2.19 3.34.35.35 0 01-.28.16h.01zm3.94-6.83a.31.31 0 01-.13 0 .33.33 0 01-.18-.45c.51-1.18 1-2.41 1.38-3.66a.34.34 0 01.43-.23.35.35 0 01.22.44 37.51 37.51 0 01-1.4 3.72.35.35 0 01-.33.18h.01zm2.41-7.51h-.07a.34.34 0 01-.27-.41c.27-1.24.49-2.54.66-3.86a.34.34 0 01.38-.3.36.36 0 01.3.39c-.17 1.34-.39 2.66-.67 3.92a.33.33 0 01-.34.26h.01zm1-7.83a.34.34 0 01-.34-.36c0-.89.06-1.82.06-2.74v-1.18c0-.19.15-.345.34-.35a.35.35 0 01.35.33v1.2c0 .94 0 1.87-.07 2.78a.34.34 0 01-.35.32h.01zm-.15-7.9a.35.35 0 01-.34-.32c-.1-1.27-.24-2.59-.42-3.91a.34.34 0 01.29-.39.35.35 0 01.39.3c.18 1.33.32 2.66.43 4a.35.35 0 01-.32.37l-.03-.05zm-1.06-7.84a.34.34 0 01-.34-.27c-.26-1.3-.56-2.58-.91-3.82a.34.34 0 01.24-.42.34.34 0 01.42.24c.36 1.25.67 2.55.93 3.86a.36.36 0 01-.27.41h-.07zm-2.14-7.59a.33.33 0 01-.32-.22c-.47-1.24-1-2.45-1.55-3.6a.34.34 0 01.15-.46.35.35 0 01.46.16c.57 1.17 1.1 2.4 1.58 3.66a.34.34 0 01-.2.44.25.25 0 01-.13.02h.01zm-3.48-7.07a.32.32 0 01-.29-.17 36 36 0 00-2.26-3.19.35.35 0 01.54-.43 36 36 0 012.28 3.27.34.34 0 01-.28.52h.01zm-4.91-6.18a.33.33 0 01-.24-.1 34.31 34.31 0 00-2.92-2.6.35.35 0 11.43-.54 34 34 0 013 2.65.34.34 0 010 .49.31.31 0 01-.28.1h.01zm-6.18-4.91a.41.41 0 01-.18-.05 38 38 0 00-3.43-1.9.344.344 0 01.3-.62 38 38 0 013.49 1.94.34.34 0 01-.19.63h.01zm-7.12-3.43a.2.2 0 01-.11 0c-1.22-.44-2.48-.83-3.75-1.16a.34.34 0 01-.25-.42.35.35 0 01.42-.25c1.29.34 2.57.74 3.81 1.19a.35.35 0 01.21.44.36.36 0 01-.33.2zm-7.66-2h-.05a29 29 0 00-3.91-.38.34.34 0 01-.34-.34c0-.19.15-.345.34-.35a29 29 0 014 .39.34.34 0 01.29.39.34.34 0 01-.33.29zM24.71 75.09a.35.35 0 01-.33-.24c-.42-1.25-.84-2.5-1.23-3.76a.342.342 0 01.65-.21c.4 1.26.81 2.51 1.23 3.75a.34.34 0 01-.21.44l-.11.02zm-2.36-7.59a.35.35 0 01-.33-.25c-.36-1.33-.68-2.63-.95-3.86a.34.34 0 01.26-.41.35.35 0 01.41.27c.27 1.21.58 2.5.95 3.82a.34.34 0 01-.24.42l-.1.01zm-1.67-7.73a.34.34 0 01-.34-.29c-.08-.56-.16-1.12-.23-1.68-.09-.76-.15-1.53-.2-2.28a.34.34 0 01.32-.36.35.35 0 01.37.32c0 .74.11 1.49.2 2.24.06.56.14 1.11.22 1.66a.34.34 0 01-.29.39h-.05zm-.46-7.88a.35.35 0 01-.34-.36c.06-1.34.194-2.675.4-4a.35.35 0 01.39-.29c.19.03.32.21.29.4a35.58 35.58 0 00-.39 3.89.34.34 0 01-.35.39v-.03zm1.24-7.8h-.09a.35.35 0 01-.24-.43 35 35 0 011.31-3.77.35.35 0 01.64.27 32.83 32.83 0 00-1.29 3.69.34.34 0 01-.33.27v-.03zm3-7.28a.35.35 0 01-.3-.52 31.94 31.94 0 012.2-3.33.343.343 0 01.55.41 29.24 29.24 0 00-2.15 3.27.35.35 0 01-.25.2l-.05-.03zm48.26-.79a.35.35 0 01-.33-.26.35.35 0 01.25-.42 3.52 3.52 0 002.37-2.51.34.34 0 01.43-.22.34.34 0 01.22.43 4.18 4.18 0 01-2.86 3l-.08-.02zm-3.47-1.37a.36.36 0 01-.27-.12 7.69 7.69 0 01-1.53-3.81.342.342 0 11.68-.08 7 7 0 001.38 3.45.35.35 0 01-.05.49.33.33 0 01-.16.1l-.05-.03zm-40-4.14a.31.31 0 01-.24-.1.34.34 0 010-.48 31.37 31.37 0 013-2.69.344.344 0 11.44.53 31.65 31.65 0 00-2.9 2.64.31.31 0 01-.29.09l-.01.01zm45.77-1.01a.34.34 0 01-.31-.19 9.26 9.26 0 00-2.43-2.9.34.34 0 010-.48.35.35 0 01.49 0 9.82 9.82 0 012.61 3.12.35.35 0 01-.16.46.37.37 0 01-.2-.01zm-7-2.35h-.05a.34.34 0 01-.29-.39 18.68 18.68 0 01.73-3 27.44 27.44 0 00-2.79-1.34.35.35 0 01-.19-.45.35.35 0 01.45-.19 30.38 30.38 0 012.76 1.32l.1-.27a.35.35 0 01.64-.01.33.33 0 010 .26l-.13.36.21.13a.343.343 0 01-.35.59l-.09-.06a17.08 17.08 0 00-.66 2.72.34.34 0 01-.38.3l.04.03zm84.69-1.07a.36.36 0 01-.3-.18c-.37-.67-.76-1.33-1.16-2a.36.36 0 01.11-.48.34.34 0 01.47.12c.41.65.81 1.33 1.18 2a.35.35 0 01-.3.52v.02zm-117.27-.47a.37.37 0 01-.3-.16.36.36 0 01.11-.48l1.23-.74a34.7 34.7 0 012.26-1.2.344.344 0 11.3.62c-.75.36-1.5.76-2.21 1.17-.41.24-.82.48-1.21.73a.32.32 0 01-.22.03l.04.03zm7.1-3.45a.34.34 0 11-.12-.67 37.37 37.37 0 013.84-1.12.35.35 0 01.41.26.34.34 0 01-.26.41 35.85 35.85 0 00-3.76 1.1l-.11.02zM62 21.22h-.08a30.66 30.66 0 00-3.84-.75.34.34 0 01-.29-.39.32.32 0 01.38-.29 29.86 29.86 0 013.92.77.35.35 0 01-.09.68v-.02zm87.31-.41a.33.33 0 01-.27-.14c-.78-1-1.61-2.08-2.47-3.06a.36.36 0 010-.49.35.35 0 01.49 0c.87 1 1.71 2 2.5 3.1a.35.35 0 01-.07.48.33.33 0 01-.22.08l.04.03zm-99.08-.42a.35.35 0 010-.69 34 34 0 013.65-.2h.23a.35.35 0 110 .69h-.23a34.9 34.9 0 00-3.68.2h.03zm20.61-.58a.27.27 0 01-.18-.05.34.34 0 01-.12-.47 28.49 28.49 0 012.34-3.27.34.34 0 01.48-.05.35.35 0 01.05.49 25.21 25.21 0 00-2.29 3.16.34.34 0 01-.32.16l.04.03zm73.27-5a.34.34 0 01-.24-.09c-.99-.9-1.99-1.78-2.99-2.62a.35.35 0 010-.48.34.34 0 01.48 0c1 .85 2 1.75 3 2.67a.34.34 0 010 .48.33.33 0 01-.29.05l.04-.01zM75.88 13.7a.32.32 0 01-.25-.1.35.35 0 010-.49c.94-.89 2-1.76 3-2.59a.342.342 0 11.42.54c-1.06.82-2.06 1.68-3 2.55a.33.33 0 01-.17.09zm62.15-3.92a.36.36 0 01-.2-.06c-1.07-.75-2.19-1.47-3.31-2.13a.34.34 0 01-.12-.47.35.35 0 01.47-.12c1.14.67 2.27 1.4 3.35 2.16a.34.34 0 01-.24.62h.05zm-55.91-.93a.34.34 0 01-.29-.15.35.35 0 01.1-.48c1.1-.7 2.26-1.38 3.44-2a.34.34 0 01.46.14.35.35 0 01-.14.47c-1.16.62-2.3 1.29-3.39 2a.29.29 0 01-.23.02h.05zm49.09-3.07a.28.28 0 01-.15 0 57.58 57.58 0 00-3.6-1.57.33.33 0 01-.2-.44.36.36 0 01.45-.2c1.23.48 2.46 1 3.65 1.59a.35.35 0 01.16.46.34.34 0 01-.36.16h.05zm-42.13-.67a.34.34 0 01-.2-.61c1.21-.54 2.45-1 3.7-1.49a.35.35 0 01.44.21.35.35 0 01-.21.44c-1.23.44-2.46.94-3.65 1.47a.32.32 0 01-.13-.02h.05zm34.77-2.2h-.1c-1.25-.37-2.53-.7-3.81-1a.35.35 0 01-.26-.41.34.34 0 01.41-.26c1.3.28 2.59.62 3.85 1a.32.32 0 01.23.42.34.34 0 01-.37.25h.05zm-27.33-.48a.35.35 0 01-.298-.52.34.34 0 01.208-.16c1.29-.36 2.6-.67 3.88-.92a.34.34 0 01.4.27.33.33 0 01-.27.4c-1.26.25-2.55.56-3.82.91l-.1.02zm19.6-1.21c-1.33-.19-2.65-.32-3.95-.41a.35.35 0 010-.69c1.33.09 2.66.23 4 .41a.34.34 0 01.29.39.34.34 0 01-.39.3h.05zm-11.83-.3a.33.33 0 01-.34-.31.34.34 0 01.3-.38c1.35-.14 2.69-.22 4-.23a.34.34 0 01.34.34.35.35 0 01-.34.35 37.74 37.74 0 00-3.92.23h-.04z" fill="#000" />
+                      <path d="M264.09 189.82H1.38a.34.34 0 01-.34-.34c0-.19.15-.345.34-.35h262.71a.35.35 0 01.35.35.35.35 0 01-.35.34zM221.93 133.81a.34.34 0 01-.34-.34V79.2a.34.34 0 11.68 0v54.3a.34.34 0 01-.34.31zM150.38 42.91h-26a.35.35 0 01-.35-.35.35.35 0 01.35-.34h26a.34.34 0 01.34.34.35.35 0 01-.34.35zM54.88 58.5a.35.35 0 01-.35-.35v-7.34a8.61 8.61 0 018.6-8.59h28.19c.19 0 .345.15.35.34a.35.35 0 01-.35.35H63.13a7.91 7.91 0 00-7.91 7.9v7.33a.35.35 0 01-.34.36zM54.88 121.69a.35.35 0 01-.35-.34V77.03a.35.35 0 01.69 0v44.32a.34.34 0 01-.34.34zM222.88 73.7h-60.25a8.6 8.6 0 01-8.59-8.59V31.59a8.6 8.6 0 018.59-8.6h60.25a8.6 8.6 0 018.59 8.6v33.52a8.6 8.6 0 01-8.59 8.59zm-60.23-50a7.91 7.91 0 00-7.9 7.91v33.52a7.91 7.91 0 007.9 7.91h60.23a7.91 7.91 0 007.9-7.91V31.59a7.91 7.91 0 00-7.9-7.91l-60.23.02zM187.74 127.34a.25.25 0 01-.12 0c-.2-.07-5-1.86-6.21-4.68a5.3 5.3 0 01.13-4 4.75 4.75 0 012.71-2.66.35.35 0 01.24.65 4.06 4.06 0 00-2.32 2.28 4.68 4.68 0 00-.13 3.44c1 2.38 5.17 4.06 5.75 4.28 8.31-.6 15.93-3.77 16.33-6.8a2.78 2.78 0 00-.53-2.14c-.83-1.07-2.58-1.77-5.19-2.09a.34.34 0 01-.3-.38.34.34 0 01.38-.3c2.8.34 4.7 1.13 5.65 2.35a3.4 3.4 0 01.67 2.65c-.51 3.86-9.24 6.85-17 7.4h-.06z"fill="#000" />
+                      <path d="M182.96 128.57a.4.4 0 01-.15 0c-2.63-1.27-4.31-3-5-5a8 8 0 01.73-6.2 7.1 7.1 0 013-3.12.33.33 0 01.46.13.34.34 0 01-.12.47 6.44 6.44 0 00-2.69 2.84 7.3 7.3 0 00-.69 5.66c.63 1.9 2.19 3.46 4.65 4.65a.34.34 0 01.16.46.34.34 0 01-.35.11zM208.98 125.32h-.1a.34.34 0 01-.25-.41c0-.07 1.51-6.54-3.54-10a11.15 11.15 0 00-6.85-1.88.34.34 0 110-.68 11.93 11.93 0 017.24 2c5.44 3.76 3.84 10.68 3.82 10.75a.34.34 0 01-.32.22z" fill="#000" />
+                      <path d="M191 129.26a.34.34 0 110-.68c15-1.84 16.39-7.37 16.4-7.42a.35.35 0 01.41-.27.35.35 0 01.27.4c-.05.25-1.4 6.07-17 8l-.08-.03zM185 123.5a.35.35 0 01-.34-.33l-.25-6.84a.35.35 0 01.33-.36.34.34 0 01.35.33l.26 6.84a.36.36 0 01-.34.36H185zM109.71 96.3H96.49a.35.35 0 01-.34-.35.34.34 0 01.34-.34h13.22a3.39 3.39 0 003.39-3.39v-7.9a3.39 3.39 0 00-3.39-3.39H86.79a3.4 3.4 0 00-3.4 3.39v7.9a3.4 3.4 0 003.4 3.39h4.33a.34.34 0 01.34.34.35.35 0 01-.34.35h-4.33a4.08 4.08 0 01-4.08-4.08v-7.9a4.08 4.08 0 014.08-4.08h22.92a4.08 4.08 0 014.08 4.08v7.9a4.08 4.08 0 01-4.08 4.08zM149.67 115.42a.35.35 0 01-.34-.35.34.34 0 01.34-.34 3.39 3.39 0 003.39-3.39v-7.9a3.39 3.39 0 00-3.39-3.39h-22.92a3.39 3.39 0 00-3.39 3.39v7.9a3.39 3.39 0 003.39 3.39h8.51c.19 0 .345.15.35.34a.35.35 0 01-.35.35h-8.51a4.08 4.08 0 01-4.08-4.08v-7.9a4.08 4.08 0 014.08-4.08h22.92a4.08 4.08 0 014.08 4.08v7.9a4.08 4.08 0 01-4.08 4.08zM48.42 101.61a3.76 3.76 0 01-2.86-1.55.34.34 0 01.08-.48.35.35 0 01.48.08 2.83 2.83 0 003.23 1.07.35.35 0 01.45.18.34.34 0 01-.18.45 3 3 0 01-1.2.25zM212.47 165.64a.35.35 0 01-.34-.35c.08-9.55-5.55-19.38-5.61-19.48a.35.35 0 01.13-.47.34.34 0 01.47.13c.06.1 5.78 10.08 5.69 19.83a.34.34 0 01-.34.34zM36.82 94.13a.34.34 0 010-.68s2.11-.21 5.88-3.44a14.46 14.46 0 003.47-5.34c.2-.45.4-.89.61-1.31a.34.34 0 11.61.3c-.2.42-.39.85-.59 1.29a15.27 15.27 0 01-3.65 5.59c-4 3.42-6.19 3.59-6.29 3.59h-.04z" fill="#000" />
+                      <path d="M19.94 98.56a.34.34 0 01-.34-.26c-.39-1.6-2.24-12.44-1-15.5 1.74-4.36 7.58-5.57 9.33-5.83a12.27 12.27 0 014.42.15 6.06 6.06 0 012.75 1.07c1.23-1.67 3.59-2.37 5.52-2.47a11.45 11.45 0 016.66 1.78 6.18 6.18 0 013.13 5.68 11.56 11.56 0 01-2.61 6.23.33.33 0 01-.48 0 .34.34 0 010-.48 10.94 10.94 0 002.41-5.81 5.41 5.41 0 00-2.81-5 10.8 10.8 0 00-6.27-1.67c-2 .1-4.39.85-5.32 2.69a.34.34 0 11-.64-.23.14.14 0 000-.13c-.12-.19-.59-.56-2.41-.93a11.72 11.72 0 00-4.23-.16c-1.66.25-7.19 1.38-8.79 5.4-1.09 2.74.54 13 1 15.09a.34.34 0 01-.25.41l-.07-.03z" fill="#000" />
+                      <path d="M31.24 127.26a11 11 0 01-8.7-4.43 8.23 8.23 0 01-6 .85 7.18 7.18 0 01-4.78-3.79c-1.36-3 0-6.35 3.22-8 .24-.12 1.29-.73 1.93-1.09l-.91-.6a7.27 7.27 0 01-1.39-1.26 7.56 7.56 0 01-1.66-4.27 6.79 6.79 0 011.19-4.55 6 6 0 015.81-2.2.342.342 0 01-.08.68 5.38 5.38 0 00-5.18 1.93 6.08 6.08 0 00-1.05 4.08 6.75 6.75 0 001.5 3.88c.362.436.783.82 1.25 1.14l1.36.9c.1.062.16.172.16.29a.34.34 0 01-.17.29c-.09.05-2.09 1.21-2.44 1.39-2.93 1.54-4.13 4.48-2.92 7.14a6.48 6.48 0 004.32 3.41 7.49 7.49 0 005.7-.92.36.36 0 01.46.08c2.75 3.58 6.53 5.06 10.63 4.15a6.86 6.86 0 004.21-2.55 3.86 3.86 0 00.64-2 12.56 12.56 0 00-.46-2.41.35.35 0 01.04-.64 9.47 9.47 0 005.19-4.21c1.27-2.26 1.31-4.82.15-7.84-1-2.63-3.66-5.63-6.73-6.27a.34.34 0 01-.26-.4.33.33 0 01.4-.27c3.31.68 6.14 3.88 7.23 6.69 1.24 3.23 1.18 6-.19 8.43a10.13 10.13 0 01-5.16 4.37c.244.839.405 1.7.48 2.57a4.54 4.54 0 01-.76 2.39 7.3 7.3 0 01-4.63 2.84 11.31 11.31 0 01-2.4.2zM180.3 99.35a.37.37 0 01-.17 0c-.06 0-6.51-3.76-3.62-9.71a6.89 6.89 0 014.84-3.88 11.18 11.18 0 018.8 2.29.36.36 0 010 .49.34.34 0 01-.48 0 10.44 10.44 0 00-8.22-2.15 6.12 6.12 0 00-4.36 3.52c-2.61 5.37 3.1 8.67 3.34 8.8a.35.35 0 01-.17.65l.04-.01z" fill="#000" />
+                      <path d="M198.73 88.03a.33.33 0 01-.25-.11c-2.28-2.44-4.64-3.68-7-3.7h-.06a7.78 7.78 0 00-5.13 2.08.35.35 0 11-.5-.48 8.43 8.43 0 015.63-2.29h.07c2.58 0 5.11 1.34 7.52 3.92a.34.34 0 010 .48.3.3 0 01-.28.1zM184.42 108.98a2.26 2.26 0 01-1.79-.57 1 1 0 010-1.18c.89-1.71 2.24-7.53 2.26-7.59a.344.344 0 11.67.16c-.06.24-1.4 6-2.32 7.75-.08.15-.16.35-.08.46.26.35 1.63.32 2.53.16a.35.35 0 01.39.28.34.34 0 01-.28.4 7.87 7.87 0 01-1.38.13zM196.1 103.5a.35.35 0 01-.3-.18c-1.34-2.57-.86-5.91-.59-7.23-9.83 2.44-16.36-.85-16.76-1.29a.36.36 0 010-.49.36.36 0 01.46 0c.19.12 6.61 3.65 16.65 1a.37.37 0 01.33.09.35.35 0 01.08.34s-1.15 4.31.41 7.29a.34.34 0 01-.15.46.29.29 0 01-.13.01zM170.19 44.55a6.17 6.17 0 116.17-6.16 6.18 6.18 0 01-6.17 6.16zm0-11.64a5.48 5.48 0 105.48 5.48 5.49 5.49 0 00-5.48-5.48zM221.32 36.5h-37a.34.34 0 01-.34-.34c0-.19.15-.345.34-.35h37c.19.005.34.16.34.35a.34.34 0 01-.34.34zM221.32 51.81h-30.77a.34.34 0 01-.34-.34c0-.19.15-.345.34-.35h30.77c.19.005.34.16.34.35a.34.34 0 01-.34.34zM180.56 51.81h-16.18a.35.35 0 01-.35-.34.35.35 0 01.35-.35h16.18a.35.35 0 01.32.38.35.35 0 01-.32.31zM123.01 67.27H93.63a.35.35 0 01-.35-.35V32.57a.35.35 0 01.35-.35h29.38a.35.35 0 01.35.35v34.35a.35.35 0 01-.35.35zm-29-.69h28.7V32.91h-28.7v33.67z" fill="#000" />
+                      <path d="M115.97 46.14h-15.09a.34.34 0 110-.68h15.08a.34.34 0 110 .68h.01zM115.97 51.5h-15.09a.34.34 0 110-.68h15.08a.34.34 0 110 .68h.01zM115.97 56.76h-15.09a.35.35 0 01-.35-.34.35.35 0 01.35-.35h15.08a.35.35 0 01.35.35.35.35 0 01-.34.34zM158 104.06a.35.35 0 01-.34-.35v-15.1h-36.6a.34.34 0 110-.68H158c.19 0 .345.15.35.34v15.44a.35.35 0 01-.35.35zM108.43 40.33a2.73 2.73 0 11-.02-5.46 2.73 2.73 0 01.02 5.46zm0-4.77a2 2 0 100 4 2 2 0 000-4zM117.25 90.99a2.73 2.73 0 112.73-2.72 2.72 2.72 0 01-2.73 2.72zm0-4.76a2 2 0 100 4 2 2 0 000-4zM158 110.27a2.73 2.73 0 112.73-2.73 2.72 2.72 0 01-2.73 2.73zm0-4.76a2 2 0 102 2 2 2 0 00-2-2.01v.01z" fill="#000" />
+                  </g>
+              </svg>
+                  <!-- END HERO SVG IMAGE -->
+          </div>
+
+      </div>
+
+      <!-- CURVED SVG BORDER -->
+      <svg class="absolute bottom-0 w-full text-yellow-400 fill-current" viewBox="0 0 1400 50" xmlns="http://www.w3.org/2000/svg"><path d="M0 0c309.151 33.333 542.484 50 700 50 157.516 0 390.849-16.667 700-50v50H0V0z"/></svg>
+
+
+    </div>
+  <!-- HERO SECTION END -->
+  
+  <!-- hero 35 end -->
 
 
 
diff --git a/public/componets/navs_headers/19_header.html b/public/componets/navs_headers/19_header.html
index acd98ed..57db632 100644
--- a/public/componets/navs_headers/19_header.html
+++ b/public/componets/navs_headers/19_header.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">
@@ -20,45 +20,45 @@
 
     <!-- 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>Header 19</div>
+    </section>
+    <nav class="flex flex-col  md:flex-row md: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=" md:flex justify-center md:justify-end mt-4 md:mt-0  items-center w-full " >
+        <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>
-          <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 -->
+      </div>
+        <ul class="flex py-3 px-10 justify-center  md:justify-end w-full mt-4 md:mt-0 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 -->
   
 
 
diff --git a/public/componets/navs_headers/21_header.html b/public/componets/navs_headers/21_header.html
index b3a8819..9db7de9 100644
--- a/public/componets/navs_headers/21_header.html
+++ b/public/componets/navs_headers/21_header.html
@@ -23,7 +23,8 @@
     <section class="section_divider">
       <div>Header 21</div>
     </section>
-    <nav class="w-full py-6 bg-white dark:bg-gray-800 ">
+ 
+    <nav x-data="{mobile_nav_status:false}" class="w-full py-6 bg-white dark:bg-gray-800 ">
       <div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
         <section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
@@ -31,30 +32,35 @@
           </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">
+          <button @click="mobile_nav_status=!mobile_nav_status" class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
             </svg>
           </button>
+          <!-- :class="mobile_nav_status ? 'block ' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex' " -->
+          <ul :class="mobile_nav_status ? ' absolute w-full text-center flex flex-col bg-gray-800 -ml-60 rounded' : 'hidden  md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex'">
+            <li class="relative group py-2">
+              <a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a>
+            </li>
+          </ul>
         </section>
       </div>
     </nav>
+      
     
     <!-- header 21 end -->
 
diff --git a/public/componets/navs_headers/header.html b/public/componets/navs_headers/header.html
index 52417cc..50d225b 100644
--- a/public/componets/navs_headers/header.html
+++ b/public/componets/navs_headers/header.html
@@ -1257,13 +1257,14 @@
         
     <!-- 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">
+    <nav class="flex flex-col  md:flex-row md: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=" md:flex justify-center md:justify-end mt-4 md:mt-0  items-center w-full " >
         <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">
@@ -1273,7 +1274,7 @@
           <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">
+        <ul class="flex py-3 px-10 justify-center  md:justify-end w-full mt-4 md:mt-0 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>
@@ -1299,6 +1300,8 @@
     
     <!-- header 19 end -->
 
+
+
     <!-- header 20 start -->
     <section class="section_divider">
       <div>Header 20 </div>
@@ -1489,6 +1492,123 @@
     
     <!-- header 23 end -->
 
+
+    <!-- header 24 start -->
+    <section class="section_divider">
+      <div>Header 24</div>
+    </section>
+
+    <header class="relative z-50 w-full h-24 overflow-hidden">
+      <div
+          class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
+
+          <a href="/" class="relative flex items-center inline-block h-5 h-full font-black leading-none">
+              <svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <g fill-rule="evenodd">
+                      <path
+                          d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
+                      <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
+                  </g>
+              </svg>
+              <span class="ml-3 text-xl text-gray-800">Landmark<span class="text-pink-500">.</span></span>
+          </a>
+
+          <nav id="nav"
+              class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
+              <a href="#"
+                  class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Home</a>
+              <a href="#features"
+                  class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Features</a>
+              <a href="#pricing"
+                  class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Pricing</a>
+              <a href="#testimonials"
+                  class="font-bold duration-100 transition-color hover:text-indigo-600">Testimonials</a>
+              <div class="flex flex-col w-full font-medium border-t border-gray-200 md:hidden">
+                  <a href="#_" class="w-full py-2 font-bold text-center text-pink-500">Login</a>
+                  <a href="#_"
+                      class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
+                      Started</a>
+              </div>
+          </nav>
+
+          <div
+              class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
+              <a href="#_"
+                  class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
+              <a href="#_"
+                  class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
+                  Started</a>
+              <svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
+                  viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <defs>
+                      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
+                          <stop stop-color="#E614F2" offset="0%" />
+                          <stop stop-color="#FC3832" offset="100%" />
+                      </linearGradient>
+                      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
+                          <stop stop-color="#657DE9" offset="0%" />
+                          <stop stop-color="#1C0FD7" offset="100%" />
+                      </linearGradient>
+                      <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                          id="a">
+                          <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                          <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
+                      </filter>
+                      <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                          id="d">
+                          <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                          <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
+                      </filter>
+                      <path
+                          d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
+                          id="b" />
+                      <path
+                          d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
+                          id="e" />
+                  </defs>
+                  <g fill="none" fill-rule="evenodd" opacity=".9">
+                      <g transform="rotate(65 416.452 409.167)">
+                          <use fill="#000" filter="url(#a)" xlink:href="#b" />
+                          <use fill="url(#c)" xlink:href="#b" />
+                      </g>
+                      <g transform="rotate(29 421.929 414.496)">
+                          <use fill="#000" filter="url(#d)" xlink:href="#e" />
+                          <use fill="url(#f)" xlink:href="#e" />
+                      </g>
+                  </g>
+              </svg>
+          </div>
+
+          <div id="nav-mobile-btn"
+              class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
+              <span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
+              <span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
+          </div>
+
+      </div>
+    </header>
+    
+    <script>
+      if (document.getElementById('nav-mobile-btn')) {
+          document.getElementById('nav-mobile-btn').addEventListener('click', function () {
+              if (this.classList.contains('close')) {
+                  document.getElementById('nav').classList.add('hidden');
+                  this.classList.remove('close');
+              } else {
+                  document.getElementById('nav').classList.remove('hidden');
+                  this.classList.add('close');
+              }
+          });
+      }
+    </script>
+    
+    <!-- header 24 end -->
+
+    
+
 <!-- start of script section -->
 <script type="text/javascript">
   let toogler = document.getElementById("dark_mood_toogler");
diff --git a/public/componets/pricing/pricing.html b/public/componets/pricing/pricing.html
index 338d405..3520b3e 100644
--- a/public/componets/pricing/pricing.html
+++ b/public/componets/pricing/pricing.html
@@ -2095,6 +2095,466 @@
   <!-- pricing 16 end  -->
 
 
+  <!-- pricing 17 start -->
+  <section class="section_divider">
+    <div>Pricing 17</div>
+  </section>
+  
+  <div class="relative w-full pt-24 pb-56 bg-gray-200">
+
+      <div class="container relative flex flex-col justify-between h-full max-w-6xl px-8 mx-auto">
+          <div class="flex flex-col justify-center w-full">
+              <h2 class="relative flex items-center self-center inline-block w-auto mb-5 text-4xl font-black">
+                  <span class="absolute inline-block w-full h-4 mt-3 -ml-2 bg-yellow-400"></span>
+                  <span class="relative">Pricing</span>
+              </h2>
+              <p class="self-center mb-12 font-medium text-gray-600">Simple, Transparent Pricing for Everyone</p>
+
+
+              <div class="flex flex-col md:flex-row">
+
+                  <!-- FEATURE 1 -->
+                  <div class="w-full md:w-1/3">
+                      <div class="flex flex-col items-center px-2 py-12 bg-white border-2 border-black rounded-lg lg:px-5 xl:px-12 md:rounded-r-none md:rounded-l-lg">
+
+                          <div class="font-light"><span class="font-bold text-yellow-500">Basic</span> Plan</div>
+                          <h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>48</h4>
+                          <span class="w-1/2 h-1 bg-yellow-400"></span>
+
+                          <div class="flex flex-col justify-start w-full px-6 py-10">
+
+                              <div class="flex items-start w-full">
+                                  <div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">And</span> Another</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">Another Feature Here</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">And Another One</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">And One More</p>
+                              </div>
+
+                          </div>
+
+                          <a href="#_" class="relative w-full text-center">
+                              <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-yellow-500 rounded"></span>
+                              <span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
+                          </a>
+
+                      </div>
+                  </div>
+                   <!-- End FEATURE 1 -->
+
+                  <!-- FEATURE 2-->
+                  <div class="w-full md:w-1/3">
+                      <div class="flex flex-col items-center px-2 py-12 my-8 bg-white border-2 border-black rounded-lg md:border-l-0 md:border-r-0 md:my-0 md:rounded-none lg:px-5 xl:px-12">
+
+                          <div class="font-light"><span class="font-bold text-green-400">Pro</span> Plan</div>
+                          <h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>98</h4>
+                          <span class="w-1/2 h-1 bg-green-400"></span>
+
+                          <div class="flex flex-col justify-start w-full px-6 py-10">
+
+                              <div class="flex items-start w-full">
+                                  <div class="w-6 h-6 p-1 bg-green-400 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-green-400 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-green-400 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">And</span> Another</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-green-400 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">Another Feature Here</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-green-400 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">And Another One</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-green-400 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">And One More</p>
+                              </div>
+
+                          </div>
+
+                          <a href="#_" class="relative w-full text-center">
+                              <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-green-400 rounded"></span>
+                              <span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
+                          </a>
+
+                      </div>
+                  </div>
+                  <!-- END FEATURE 2 -->
+
+                  <!-- FEATURE 3 -->
+                  <div class="w-full md:w-1/3">
+                      <div class="flex flex-col items-center px-2 py-12 ml-0 bg-white border-2 border-black rounded-lg lg:px-6 xl:px-12 md:rounded-l-none md:rounded-r-lg">
+
+                          <div class="font-light"><span class="font-bold text-purple-500">Premium</span> Plan</div>
+                          <h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>68</h4>
+                          <span class="w-1/2 h-1 bg-purple-400"></span>
+
+                          <div class="flex flex-col justify-start w-full px-6 py-10">
+
+                              <div class="flex items-start w-full">
+                                  <div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2"><span class="font-bold">And</span> Another</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">Another Feature Here</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">And Another One</p>
+                              </div>
+
+                              <div class="flex items-start w-full mt-3">
+                                  <div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
+                                      <svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
+                                          <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
+                                      </svg>
+                                  </div>
+                                  <p class="ml-2">And One More</p>
+                              </div>
+
+                          </div>
+
+                          <a href="#_" class="relative w-full text-center">
+                              <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-purple-500 rounded"></span>
+                              <span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
+                          </a>
+
+                      </div>
+                  </div>
+                  <!-- END FEATURE 3 -->
+
+              </div>
+          </div>
+      </div>
+
+      <!-- Blob SVG Border -->
+      <svg class="absolute bottom-0 w-full text-black fill-current" viewBox="0 0 1400 74" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C87.243 11.422 173.12 5.133 257.633 5.133 468.305 5.133 578.027 74 700 74c136.015 0 290.882-96.208 481.234-68.867C1268.807 17.71 1341.73 24 1400 24v50H0V24z" /></svg>
+
+
+  </div>
+  
+  <!-- pricing 17 end -->
+
+  <!-- pricing 18 start -->
+  <section class="section_divider">
+    <div>Pricing 18</div>
+  </section>
+
+  <div class="relative px-8 py-10 bg-white border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
+
+    <div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
+        <h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
+        <h3
+            class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
+            Simple, Transparent Pricing for Everyone</h3>
+
+        <div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
+            <!-- Basic Pricing -->
+            <div class="relative flex flex-col items-center block sm:flex-row">
+                <div
+                    class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
+                    <div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
+                        <div
+                            class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
+                            <h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
+                                    class="ml-2 font-light">Plan</span></h3>
+                            <h4
+                                class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
+                                <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
+                            <p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
+                                features below.
+                            </p>
+                        </div>
+
+                        <div class="flex flex-wrap px-6 mt-8">
+                            <ul>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">One More Feature</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="flex items-center block p-8 uppercase">
+                            <a href="#_"
+                                class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
+                                This Plan</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Pro Pricing -->
+                <div
+                    class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
+                    <div
+                        class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
+                        Most Popular</div>
+                    <div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
+                        <h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
+                                class="ml-2 font-light">Plan</span></h3>
+                        <h4
+                            class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
+                            <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
+                        <p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
+                            access to the
+                            following:</p>
+                    </div>
+                    <div class="flex justify-start pl-12 mt-8 sm:justify-start">
+                        <ul>
+                            <li class="flex items-center">
+                                <div class="p-2 text-green-500 rounded-full fill-current">
+                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                    </svg>
+                                </div>
+                                <span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
+                            </li>
+                            <li class="flex items-center">
+                                <div class="p-2 text-green-500 rounded-full fill-current ">
+                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                    </svg>
+                                </div>
+                                <span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
+                            </li>
+                            <li class="flex items-center">
+                                <div class="p-2 text-green-500 rounded-full fill-current ">
+                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                    </svg>
+                                </div>
+                                <span class="ml-3 text-lg text-gray-700">And One More</span>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="flex items-center block p-8 uppercase">
+                        <a href="#_"
+                            class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
+                            This Plan</a>
+                    </div>
+                </div>
+                <!-- Premium Pricing -->
+                <div
+                    class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
+                    <div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
+                        <div
+                            class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
+                            <h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
+                                    class="ml-2 font-light">Plan</span></h3>
+                            <h4
+                                class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
+                                <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
+                            <p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
+                                all the following
+                                features:</p>
+                        </div>
+                        <div class="flex flex-wrap px-8 mt-8">
+                            <ul>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">And One More</span>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div class="flex items-center block p-8 uppercase">
+                            <a href="#_"
+                                class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
+                                This Plan</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+  </div>
+
+  
+  <!-- pricing 18 end -->
+
 
 <!-- start of script section -->
 <script type="text/javascript">
diff --git a/public/componets/section/4_section.html b/public/componets/section/4_section.html
index 6814883..a118a5c 100644
--- a/public/componets/section/4_section.html
+++ b/public/componets/section/4_section.html
@@ -17,6 +17,29 @@
     </button>
 
     
+    <!-- section 4 start -->
+
+    <section class="section_divider">
+      <div>Section 4 (about me template)</div>
+    </section>
+    <section class="bg-gray-100 dark:bg-gray-800">
+        <div class="container mx-auto ">
+        <div class="grid grid-cols-1 md:grid-cols-2 h-screen">
+        <div class="max-h-96 md:h-screen">
+            <img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
+        </div>
+        <div class="flex bg-gray-100 dark:bg-gray-800 p-10">
+            <div class="mb-auto mt-auto max-w-lg">
+            <h1 class="text-3xl uppercase dark:text-white dark:font-bold">Brand Name</h1>
+            <p class="font-semibold mb-5 dark:text-cyan-100">Company Type</p>
+            <p class="dark:text-cyan-300">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+            <button class="bg-black rounded-md py-3 px-7 mt-6 text-white dark:hover:bg-emerald-300 dark:hover:text-gray-800 font-bold">Email Me</button>
+            </div>
+        </div>
+        </div>
+        </div>
+    </section>
+  <!-- section 4 end -->
 
 <!-- start of script section -->
 <script type="text/javascript">
diff --git a/public/componets/section/section.html b/public/componets/section/section.html
index 9225136..5dc38fa 100644
--- a/public/componets/section/section.html
+++ b/public/componets/section/section.html
@@ -194,24 +194,23 @@
     <section class="section_divider">
         <div>Section 4 (about me template)</div>
     </section>
-    <!-- about  -->
-    <!-- component -->
-    <div class="container mx-auto">
-    <div class="grid grid-cols-1 md:grid-cols-2 h-screen">
-      <div class="max-h-96 md:h-screen">
-        <img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
-      </div>
-      <div class="flex bg-gray-100 p-10">
-        <div class="mb-auto mt-auto max-w-lg">
-          <h1 class="text-3xl uppercase">Jun Santilla</h1>
-          <p class="font-semibold mb-5">Web Developer</p>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
-          <button class="bg-black rounded-md py-3 px-7 mt-6 text-white">Email Me</button>
+    <section class="bg-gray-100 dark:bg-gray-800">
+        <div class="container mx-auto ">
+        <div class="grid grid-cols-1 md:grid-cols-2 h-screen">
+        <div class="max-h-96 md:h-screen">
+            <img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
         </div>
-      </div>
-    </div>
-    </div>
-    <!-- about  -->
+        <div class="flex bg-gray-100 dark:bg-gray-800 p-10">
+            <div class="mb-auto mt-auto max-w-lg">
+            <h1 class="text-3xl uppercase dark:text-white dark:font-bold">Brand Name</h1>
+            <p class="font-semibold mb-5 dark:text-cyan-100">Company Type</p>
+            <p class="dark:text-cyan-300">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+            <button class="bg-black rounded-md py-3 px-7 mt-6 text-white dark:hover:bg-emerald-300 dark:hover:text-gray-800 font-bold">Email Me</button>
+            </div>
+        </div>
+        </div>
+        </div>
+    </section>
     <!-- section 4 end -->
 
 
diff --git a/public/componets/testimonial/13_testimonial.html b/public/componets/testimonial/13_testimonial.html
index 8cc12e8..31c1755 100644
--- a/public/componets/testimonial/13_testimonial.html
+++ b/public/componets/testimonial/13_testimonial.html
@@ -15,8 +15,35 @@
     <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
         d
     </button>
+        
+
+    <!-- testimonial 13 start -->
+
+    <section class="section_divider">
+        <div>Testimonial 13</div>
+    </section>
+    <section class="bg-gray-900">
+        <div class="w-full px-4 py-20 mx-auto text-center max-w-7xl md:w-4/5 lg:w-4/6">
+        <h1 class="mt-3 mb-10 text-xl font-extrabold text-white md:leading-snug md:text-3xl">
+            “Implementation is a breeze, particularly because the team at Hellonext is
+            <span class="text-white bg-transparent bg-clip-border xl:bg-clip-text xl:text-transparent xl:bg-gradient-to-r from-green-400 to-purple-500"> very fast to respond and help </span>
+            where needed, even if it means rolling out new features on their platform.  We're super happy and are loving how Hellonext brings us closer to the members of our community“
+        </h1>
+            <div class="mx-auto mb-3 shadow-lg avatar w-1/5">
+                <img src="https://www.hyperui.dev/photos/man-4.jpeg" alt="man standing up a mounten" class=" object-cover rounded-full h-20 w-20  mx-auto " />
+            </div>
+        <p class="text-base font-medium text-gray-200">example example</p>
+        <p class="text-xs font-medium text-gray-400">CEO, example</p>
+        </div>
+    </section>
     
 
+
+
+    <!-- testimonial 13 end -->
+
+
+
 <!-- start of script section -->
 <script type="text/javascript">
     let toogler = document.getElementById("dark_mood_toogler");
diff --git a/public/componets/testimonial/testimonial.html b/public/componets/testimonial/testimonial.html
index 93e6ba7..28c6156 100644
--- a/public/componets/testimonial/testimonial.html
+++ b/public/componets/testimonial/testimonial.html
@@ -515,172 +515,172 @@
         <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
 
       <section class="bg-gray-100 dark:bg-gray-800">
-      <div class="px-4 py-16 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 ">
-          <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
-          <div class="max-w-xl space-y-8">
-              <h2 class="text-4xl dark:text-emerald-200 font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
+        <div class="px-4 py-16 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 ">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
+            <div class="max-w-xl space-y-8">
+                <h2 class="text-4xl dark:text-emerald-200 font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
 
-              <p class="max-w-lg text-lg text-gray-500">
-              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
-              fugit a culpa sunt id!
-              </p>
+                <p class="max-w-lg text-lg text-gray-500">
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
+                fugit a culpa sunt id!
+                </p>
 
-              <div class="hidden lg:flex">
-              <button
-                  class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
-                  aria-label="Previous slide"
-              >
-                  <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="w-5 h-5 transform -rotate-180"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                  </svg>
-              </button>
+                <div class="hidden lg:flex">
+                <button
+                    class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
+                    aria-label="Previous slide"
+                >
+                    <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5 transform -rotate-180"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
 
-              <button
-                  class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
-                  aria-label="Next slide"
-              >
-                  <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="w-5 h-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                  </svg>
-              </button>
-              </div>
-          </div>
+                <button
+                    class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
+                    aria-label="Next slide"
+                >
+                    <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
+                </div>
+            </div>
 
-          <div class="-mx-6 lg:col-span-2 lg:mx-0 ">
-              <div class="swiper-container overflow-hidden">
-              <div class="swiper-wrapper ">
-                  <div class="swiper-slide">
-                  <blockquote class="flex flex-col justify-between h-full p-12 bg-white dark:bg-gray-300 rounded">
-                      <div>
-                      <div class="flex space-x-0.5 text-green-500">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                      </div>
+            <div class="-mx-6 lg:col-span-2 lg:mx-0 ">
+                <div class="swiper-container overflow-hidden">
+                <div class="swiper-wrapper ">
+                    <div class="swiper-slide">
+                    <blockquote class="flex flex-col justify-between h-full p-12 bg-white dark:bg-gray-300 rounded">
+                        <div>
+                        <div class="flex space-x-0.5 text-green-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                        </div>
 
-                      <div class="mt-4">
-                          <p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
+                        <div class="mt-4">
+                            <p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
 
-                          <p class="mt-4 text-lg text-gray-600">
-                          Lorem ipsum dolor sit amet consectetur adipisicing elit.Number 1 Ipsam cumque recusandae dolorum porro,
-                          quasi sunt necessitatibus dolorem ab laudantium vel.
-                          </p>
-                      </div>
-                      </div>
+                            <p class="mt-4 text-lg text-gray-600">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit.Number 1 Ipsam cumque recusandae dolorum porro,
+                            quasi sunt necessitatibus dolorem ab laudantium vel.
+                            </p>
+                        </div>
+                        </div>
 
-                      <footer class="mt-8 text-gray-500">Eddie Murphy</footer>
-                  </blockquote>
-                  </div>
+                        <footer class="mt-8 text-gray-500">Eddie Murphy</footer>
+                    </blockquote>
+                    </div>
 
-                  <div class="swiper-slide">
-                  <blockquote class="flex flex-col justify-between h-full p-12 dark:bg-gray-300 bg-white">
-                      <div>
-                      <div class="flex space-x-0.5 text-green-500">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                          <path
-                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                          />
-                          </svg>
-                      </div>
+                    <div class="swiper-slide">
+                    <blockquote class="flex flex-col justify-between h-full p-12 dark:bg-gray-300 bg-white">
+                        <div>
+                        <div class="flex space-x-0.5 text-green-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                            />
+                            </svg>
+                        </div>
 
-                      <div class="mt-4">
-                          <p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
+                        <div class="mt-4">
+                            <p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
 
-                          <p class="mt-4 text-lg text-gray-600">
-                          Lorem ipsum dolor sit amet consectetur adipisicing elit. number 2 Ipsam cumque recusandae dolorum porro,
-                          quasi sunt necessitatibus dolorem ab laudantium vel.
-                          </p>
-                      </div>
-                      </div>
+                            <p class="mt-4 text-lg text-gray-600">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. number 2 Ipsam cumque recusandae dolorum porro,
+                            quasi sunt necessitatibus dolorem ab laudantium vel.
+                            </p>
+                        </div>
+                        </div>
 
-                      <footer class="mt-8 text-gray-500">Eddie Murphy</footer>
-                  </blockquote>
-                  </div>
-              </div>
-              </div>
-          </div>
-          </div>
+                        <footer class="mt-8 text-gray-500">Eddie Murphy</footer>
+                    </blockquote>
+                    </div>
+                </div>
+                </div>
+            </div>
+            </div>
 
-          <div class="flex justify-center mt-8 lg:hidden">
-          <button
-              class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
-              aria-label="Previous slide"
-          >
-              <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="w-5 h-5 transform -rotate-180"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-              </svg>
-          </button>
+            <div class="flex justify-center mt-8 lg:hidden">
+            <button
+                class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
+                aria-label="Previous slide"
+            >
+                <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-5 h-5 transform -rotate-180"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </button>
 
-          <button
-              class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
-              aria-label="next-slide"
-          >
-              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-              </svg>
-          </button>
-          </div>
-      </div>
+            <button
+                class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
+                aria-label="next-slide"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </button>
+            </div>
+        </div>
       </section>
 
       <script>
@@ -1143,9 +1143,7 @@
         },
       },
     })
-  </script>
-  <!-- testimonial 11 end -->
-
+  </script> 
 <!-- testimonial 11 end -->
 
 
@@ -1925,6 +1923,132 @@
 
 <!-- testimonial 23 end -->
 
+  <!-- testimonial 24 start -->
+      <section class="section_divider">
+        <div>Testimonial 24 (template 1 ) </div>
+      </section>
+
+
+      <div id="testimonials"
+      class="flex items-center justify-center w-full px-8 py-10 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
+      <div class="max-w-6xl mx-auto">
+          <div class="flex-col items-center ">
+              <div class="flex flex-col items-center justify-center w-full h-full max-w-2xl pr-8 mx-auto text-center">
+                  <p class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love
+                      our product
+                  </p>
+                  <h2
+                      class="text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">
+                      Testimonials</h2>
+                  <p class="my-6 text-xl font-medium text-gray-500">Don't just take our word for it, read from our
+                      extensive
+                      list of case studies and customer testimonials.</p>
+
+              </div>
+              <div class="flex flex-col items-center justify-center max-w-2xl py-8 mx-auto xl:flex-row xl:max-w-full">
+                  <div class="w-full xl:w-1/2 xl:pr-8">
+                      <blockquote
+                          class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
+                          <div class="flex flex-col pr-8">
+                              <div class="relative pl-12">
+                                  <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
+                                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                                      <path
+                                          d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
+                                  </svg>
+                                  <p class="mt-2 text-base text-gray-600">I'm loving these templates! Very nice
+                                      features and layouts.
+                                  </p>
+                              </div>
+
+                              <h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Sandra
+                                  Walton <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
+                                      SomeCompany</span></h3>
+                              <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                          </div>
+                          <img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
+                              src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2694&q=80"
+                              alt="">
+                      </blockquote>
+                      <blockquote
+                          class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 mb-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease xl:mb-0">
+                          <div class="flex flex-col pr-10">
+                              <div class="relative pl-12">
+                                  <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
+                                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                                      <path
+                                          d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
+                                  </svg>
+                                  <p class="mt-2 text-base text-gray-600">Really digging this service. Now I can
+                                      quickly bootstrap any
+                                      project.</p>
+                              </div>
+                              <h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Kenny
+                                  Jones <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
+                                      SomeCompany</span></h3>
+                              <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                          </div>
+                          <img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
+                              src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80"
+                              alt="">
+                      </blockquote>
+                  </div>
+                  <div class="w-full xl:w-1/2 xl:pl-8">
+                      <blockquote
+                          class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
+                          <div class="flex flex-col pr-10">
+                              <div class="relative pl-12">
+                                  <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
+                                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                                      <path
+                                          d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
+                                  </svg>
+                                  <p class="mt-2 text-base text-gray-600">Extremely helpful in every single project we
+                                      have released.
+                                  </p>
+                              </div>
+
+                              <h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Mike Smith
+                                  <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
+                              </h3>
+                              <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                          </div>
+                          <img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
+                              src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
+                              alt="">
+                      </blockquote>
+                      <blockquote
+                          class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
+                          <div class="flex flex-col pr-10">
+                              <div class="relative pl-12">
+                                  <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
+                                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                                      <path
+                                          d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
+                                  </svg>
+                                  <p class="mt-2 text-base text-gray-600">Finally a quick and easy system I can use
+                                      for any type of
+                                      project.</p>
+                              </div>
+
+                              <h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Molly
+                                  Sanchez <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
+                                      SomeCompany</span></h3>
+                              <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                          </div>
+                          <img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
+                              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80"
+                              alt="">
+                      </blockquote>
+                  </div>
+              </div>
+
+
+          </div>
+      </div>
+      </div>
+
+  <!-- testimonial 24 end -->
 
 
 <!-- start of script section -->
diff --git a/public/template/10_template.html b/public/template/10_template.html
index cde770d..9c40632 100644
--- a/public/template/10_template.html
+++ b/public/template/10_template.html
@@ -98,7 +98,7 @@
 
 
     <!-- hero 6 start --> 
-    <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="relative flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 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">
@@ -236,7 +236,7 @@
 
     <!-- testimonial 6 start  -->
        
-    <section class="py-24 dark:bg-gray-800 ">
+    <section class="py-24 dark:bg-gray-900 ">
       <div class="container px-4 mx-auto">
         <div class="max-w-lg mx-auto mb-12 text-center">
           <img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
diff --git a/public/template/1_template.html b/public/template/1_template.html
index 9c0683b..465010d 100644
--- a/public/template/1_template.html
+++ b/public/template/1_template.html
@@ -870,5 +870,7 @@
             });
         }
     </script>
+
+    
 </body>
 </html>
diff --git a/public/template/28_template.html b/public/template/28_template.html
index 750a461..51226f5 100644
--- a/public/template/28_template.html
+++ b/public/template/28_template.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./../../../dist/tailshape.css">
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+
+    <!-- swiper cdn for slider  -->
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
     <title>Template 28</title>
 </head>
 <body>
@@ -13,8 +18,565 @@
         d
     </button>
     
+    
+
+    <!-- header 21 start --> 
+    
+    <nav x-data="{mobile_nav_status:false}" class="w-full py-6 bg-white dark:bg-gray-800 ">
+      <div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
+        <section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" />
+          </svg>
+          <a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
+        </section>
+        
+        <section>
+          <button @click="mobile_nav_status=!mobile_nav_status" class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <!-- :class="mobile_nav_status ? 'block ' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex' " -->
+          <ul :class="mobile_nav_status ? ' absolute w-full text-center flex flex-col bg-gray-800 -ml-60 rounded' : 'hidden  md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex'">
+            <li class="relative group py-2">
+              <a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
+              <div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
+            </li>
+            <li class="relative group py-2">
+              <a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </nav>
+    
+    <!-- header 21 end -->
 
 
+    <!-- hero 15 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-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 text-red-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 bg-red-400 dark:bg-violet-400 dark:text-gray-900">Get started</button>
+          <button class="px-8 py-3 m-2 text-lg border rounded bg-gray-400 dark:bg-gray-800 dark:text-gray-50 dark:border-gray-700">Learn more</button>
+        </div>
+      </div>
+    </section>  
+
+    <!-- hero 15 end -->
+
+
+    <!-- start cta 11  --> 
+    <section class="py-24 dark:bg-gray-900 dark:text-gray-50">
+        <div class="container mx-auto flex flex-col justify-around  p-4 text-center md:p-10 lg:flex-row">
+            <div class="flex flex-col justify-center lg:text-left">
+                <p class="mb-1 text-sm font-medium tracking-widest uppercase dark:text-violet-400">Hic eligendi necessitatibus quod quia</p>
+                <h1 class="py-2 text-3xl font-medium leading-tight title-font">Master Cleanse Reliac Heirloom</h1>
+            </div>
+            <div class="flex flex-col items-center justify-center flex-shrink-0 mt-6 space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 lg:ml-4 lg:mt-0 lg:justify-end">
+                <button class="inline-flex items-center px-6 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current w-7 h-7 dark:text-coolGray-900">
+                        <path d="M 5.4160156 2.328125 L 12.935547 10.158203 C 13.132547 10.363203 13.45925 10.363203 13.65625 10.158203 L 15.179688 8.5742188 C 15.405688 8.3392188 15.354312 7.956875 15.070312 7.796875 C 11.137313 5.571875 6.2620156 2.811125 5.4160156 2.328125 z M 3.140625 2.8476562 C 3.055625 3.0456562 3 3.2629063 3 3.5039062 L 3 20.591797 C 3 20.788797 3.044375 20.970625 3.109375 21.140625 L 11.576172 12.324219 C 11.762172 12.131219 11.762172 11.826813 11.576172 11.632812 L 3.140625 2.8476562 z M 17.443359 9.2578125 C 17.335484 9.2729375 17.233297 9.32375 17.154297 9.40625 L 15.015625 11.632812 C 14.829625 11.825812 14.829625 12.130219 15.015625 12.324219 L 17.134766 14.529297 C 17.292766 14.694297 17.546141 14.729188 17.744141 14.617188 C 19.227141 13.777188 20.226563 13.212891 20.226562 13.212891 C 20.725562 12.909891 21.007 12.443547 21 11.935547 C 20.992 11.439547 20.702609 10.981938 20.224609 10.710938 C 20.163609 10.676937 19.187672 10.124359 17.763672 9.3183594 C 17.664172 9.2623594 17.551234 9.2426875 17.443359 9.2578125 z M 13.296875 13.644531 C 13.165875 13.644531 13.034047 13.696328 12.935547 13.798828 L 5.4746094 21.566406 C 6.7566094 20.837406 11.328781 18.249578 15.050781 16.142578 C 15.334781 15.981578 15.386156 15.599281 15.160156 15.363281 L 13.65625 13.798828 C 13.55775 13.696328 13.427875 13.644531 13.296875 13.644531 z"></path>
+                    </svg>
+                    <span class="flex flex-col items-start ml-4 leading-none">
+                        <span class="mb-1 text-xs">GET IT ON</span>
+                        <span class="font-semibold title-font">Google Play</span>
+                    </span>
+                </button>
+                <button class="inline-flex items-center px-5 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fill-current w-7 h-7 dark:text-coolGray-900">
+                        <path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"></path>
+                    </svg>
+                    <span class="flex flex-col items-start ml-4 leading-none">
+                        <span class="mb-1 text-xs">Download on the</span>
+                        <span class="font-semibold title-font">App Store</span>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </section>
+    
+    <!-- end cta 11  -->
+
+
+    <!-- feature 12 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100 py-24">
+        <div class="container px-4  mx-auto  space-y-1 text-center">
+            <span class="text-sm py-2 font-semibold tracking-wider uppercase dark:text-green-400">shortcut to your dream ui</span>
+            <h2 class="pb-3 text-3xl font-bold md:text-4xl">Create a stylish website in minutes</h2>
+            <p>Get a jumpstart to creating your new webpage! With our fully responsive and carefully styled components you can get the structure of your website done with just a couple of clicks.</p>
+        </div>
+        <div class="container grid justify-center gap-4 mx-auto lg:grid-cols-2 xl:grid-cols-4">
+            <div class="flex flex-col px-8 py-6">
+                <h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Components</h2>
+                <p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Individual components that can be re-used multiple times in your designs.</p>
+                <a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/components">
+                    <span>Learn More</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                </a>
+            </div>
+            <div class="flex flex-col px-8 py-6 lg:border-none xl:border-solid">
+                <h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Sections</h2>
+                <p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Pre-made building blocks that you can stack on top of each other like Legos to build a website of your own in minutes.</p>
+                <a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/sections">
+                    <span>Learn More</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                </a>
+            </div>
+            <div class="flex flex-col px-8 py-6">
+                <h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Templates</h2>
+                <p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Full pages that showcase pieces of what you can achieve with the building blocks that are in this UI kit.</p>
+                <a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/templates">
+                    <span>Learn More</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                </a>
+            </div>
+            <div class="flex flex-col px-8 py-6">
+                <h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Customization</h2>
+                <p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Choose your primary color from any of the Tailwind CSS 2.0 colors. You can also view all of the components in our light and dark themes.</p>
+                <a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/docs">
+                    <span>Learn More</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+    
+    <!-- feature 12 end -->
+
+    <!-- pricing 4 start  --> 
+    <div class="px-4 py-24 mx-auto dark:bg-gray-900">
+      <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12 ">
+        <div>
+          <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900  uppercase rounded-full bg-teal-400">
+            Our Pricing
+          </p>
+        </div>
+        <h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 dark:text-gray-300 sm:text-4xl md:mx-auto">
+          <span class="relative inline-block dark:text-emerald-300 ">
+            <svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
+              <defs>
+                <pattern id="7e5e8ff8-1960-4094-a63a-2a0c0f922d69" x="0" y="0" width=".135" height=".30">
+                  <circle cx="1" cy="1" r=".7"></circle>
+                </pattern>
+              </defs>
+              <rect fill="url(#7e5e8ff8-1960-4094-a63a-2a0c0f922d69)" width="52" height="24"></rect>
+            </svg>
+            <span class="relative">Transparent</span>
+          </span>
+          pricing. Pay as you grow.
+        </h2>
+        <p class="text-base text-gray-700 dark:text-gray-300 md:text-lg">
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.
+        </p>
+      </div>
+      <div class="grid max-w-md gap-10 row-gap-5 lg:max-w-screen-lg sm:row-gap-10 lg:grid-cols-3 xl:max-w-screen-lg sm:mx-auto">
+        <div class="flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border-2 dark:border-emerald-200 rounded shadow-sm sm:items-center hover:shadow">
+          <div class="text-center dark:text-gray-300 ">
+            <div class="text-lg font-semibold">Start</div>
+            <div class="flex items-center justify-center mt-2">
+              <div class="mr-1 text-5xl font-bold">Free</div>
+            </div>
+            <div class="mt-2 space-y-3 ">
+              <div class="text-gray-700 dark:text-gray-400">10 deploys per day</div>
+              <div class="text-gray-700 dark:text-gray-400">10 GB of storage</div>
+              <div class="text-gray-700 dark:text-gray-400">20 domains</div>
+            </div>
+          </div>
+          <div>
+            <a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 bg-gray-800 dark:bg-emerald-300 dark:hover:bg-emerald-500 dark:text-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
+              Start for free
+            </a>
+            <p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
+              Sed ut unde omnis iste natus accusantium doloremque.
+            </p>
+          </div>
+        </div>
+        <div class="relative flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border rounded shadow-sm sm:items-center hover:shadow border-purple-800">
+          <div class="absolute inset-x-0 top-0 flex justify-center -mt-3 ">
+            <div class="inline-block px-3 py-1 text-xs font-medium tracking-wider text-white uppercase rounded bg-purple-800">
+              Most Popular
+            </div>
+          </div>
+          <div class="text-center dark:text-gray-300">
+            <div class="text-lg font-semibold">Pro</div>
+            <div class="flex items-center justify-center mt-2">
+              <div class="mr-1 text-5xl font-bold">$38</div>
+              <div class="text-gray-700">/ mo</div>
+            </div>
+            <div class="mt-2 space-y-3">
+              <div class="text-gray-700 dark:text-gray-400 ">200 deploys per day</div>
+              <div class="text-gray-700 dark:text-gray-400 ">80 GB of storage</div>
+              <div class="text-gray-700 dark:text-gray-400 ">Global CDN</div>
+            </div>
+          </div>
+          <div>
+            <a
+              href="/"
+              class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
+            >
+              Buy Pro
+            </a>
+            <p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
+              Sed ut unde omnis iste natus accusantium doloremque.
+            </p>
+          </div>
+        </div>
+        <div class="flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border-2 dark:border-emerald-200 rounded shadow-sm sm:items-center hover:shadow">
+          <div class="text-center dark:text-gray-300">
+            <div class="text-lg font-semibold">Business</div>
+            <div class="flex items-center justify-center mt-2">
+              <div class="mr-1 text-5xl font-bold">$78</div>
+              <div class="text-gray-700">/ mo</div>
+            </div>
+            <div class="mt-2 space-y-3">
+              <div class="text-gray-700 dark:text-gray-400">500 GB of storage</div>
+              <div class="text-gray-700 dark:text-gray-400">Unlimited domains</div>
+              <div class="text-gray-700 dark:text-gray-400">24/7 Support</div>
+            </div>
+          </div>
+          <div>
+            <a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 bg-gray-800 dark:bg-emerald-300 dark:hover:bg-emerald-500 dark:text-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
+              Buy Business
+            </a>
+            <p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
+              Sed ut unde omnis iste natus accusantium doloremque.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  
+    <!-- pricing 4 end -->
+
+
+  
+    <!-- testimonial 9 start  --> 
+
+    <section class="bg-gray-100 dark:bg-gray-800">
+    <div class="px-4 py-24 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 max-w-[1340px]">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
+        <div class="max-w-xl space-y-8">
+            <h2 class="text-4xl dark:text-emerald-200 font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
+
+            <p class="max-w-lg text-lg text-gray-500">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
+            fugit a culpa sunt id!
+            </p>
+
+            <div class="hidden lg:flex">
+            <button
+                class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
+                aria-label="Previous slide"
+            >
+                <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-5 h-5 transform -rotate-180"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </button>
+
+            <button
+                class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
+                aria-label="Next slide"
+            >
+                <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-5 h-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </button>
+            </div>
+        </div>
+
+        <div class="-mx-6 lg:col-span-2 lg:mx-0 ">
+            <div class="swiper-container overflow-hidden">
+            <div class="swiper-wrapper ">
+                <div class="swiper-slide">
+                <blockquote class="flex flex-col justify-between h-full p-12 bg-white dark:bg-gray-300 rounded">
+                    <div>
+                    <div class="flex space-x-0.5 text-green-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                    </div>
+
+                    <div class="mt-4">
+                        <p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
+
+                        <p class="mt-4 text-lg text-gray-600">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.Number 1 Ipsam cumque recusandae dolorum porro,
+                        quasi sunt necessitatibus dolorem ab laudantium vel.
+                        </p>
+                    </div>
+                    </div>
+
+                    <footer class="mt-8 text-gray-500">Eddie Murphy</footer>
+                </blockquote>
+                </div>
+
+                <div class="swiper-slide">
+                <blockquote class="flex flex-col justify-between h-full p-12 dark:bg-gray-300 bg-white">
+                    <div>
+                    <div class="flex space-x-0.5 text-green-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                        />
+                        </svg>
+                    </div>
+
+                    <div class="mt-4">
+                        <p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
+
+                        <p class="mt-4 text-lg text-gray-600">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. number 2 Ipsam cumque recusandae dolorum porro,
+                        quasi sunt necessitatibus dolorem ab laudantium vel.
+                        </p>
+                    </div>
+                    </div>
+
+                    <footer class="mt-8 text-gray-500">Eddie Murphy</footer>
+                </blockquote>
+                </div>
+            </div>
+            </div>
+        </div>
+        </div>
+
+        <div class="flex justify-center mt-8 lg:hidden">
+        <button
+            class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
+            aria-label="Previous slide"
+        >
+            <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-5 h-5 transform -rotate-180"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+        </button>
+
+        <button
+            class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
+            aria-label="next-slide"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+        </button>
+        </div>
+    </div>
+    </section>
+
+    <script>
+    const swiper = new Swiper('.swiper-container', {
+        loop: true,
+        slidesPerView: 1,
+        spaceBetween: 32,
+        autoplay: {
+        delay: 2000,
+        },
+        navigation: {
+        nextEl: '.next-button',
+        prevEl: '.prev-button',
+        },
+        breakpoints: {
+        640: {
+            slidesPerView: 1.5,
+            centeredSlides: true,
+        },
+        1024: {
+            centeredSlides: false,
+            slidesPerView: 1.5,
+        },
+        },
+    })
+    </script>
+  
+    <!-- testimonial 9 end -->
+
+
+    <!-- start cta 12  --> 
+    <div class="w-full dark:bg-gray-500 bg-[url('https://source.unsplash.com/random/640x480/?grayscale')] bg-center bg-blend-multiply bg-cover">
+        <div class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:p-10">
+            <h1 class="text-5xl antialiased font-semibold leading-none text-center dark:text-gray-100">Get Our Updates</h1>
+            <p class="pt-2 pb-8 text-xl antialiased text-center dark:text-gray-100">Find out about events and other news</p>
+            <div class="flex flex-row">
+                <input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
+                <button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-gray-900">Subscribe</button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- end cta 12  -->
+
+
+    <!-- footer 13 start -->
+ 
+    <section class="dark:bg-gray-800">
+        <footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 ">
+        <div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
+          <div class="sm:col-span-2">
+            <a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
+              <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                <rect x="3" y="1" width="7" height="12"></rect>
+                <rect x="3" y="17" width="7" height="6"></rect>
+                <rect x="14" y="1" width="7" height="6"></rect>
+                <rect x="14" y="11" width="7" height="12"></rect>
+              </svg>
+              <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-300 uppercase">Company</span>
+            </a>
+            <div class="mt-6 lg:max-w-sm">
+              <p class="text-sm text-gray-500 ">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
+              </p>
+              <p class="mt-4 text-sm text-gray-500 ">
+                Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+              </p>
+            </div>
+          </div>
+          <div class="space-y-2 text-sm">
+            <p class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Contacts</p>
+            <div class="flex">
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Phone:</p>
+              <a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">850-123-5021</a>
+            </div>
+            <div class="flex">
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Email:</p>
+              <a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300  text-gray-300 hover:text-purple-400">info@lorem.mail</a>
+            </div>
+            <div class="flex">
+              <p class="mr-1 text-gray-800  dark:text-gray-400">Address:</p>
+              <a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-400 text-gray-300 hover:text-purple-300">
+                312 Lovely Street, NY
+              </a>
+            </div>
+          </div>
+          <div>
+              <span class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Social</span>
+            <div class="flex items-center mt-1 space-x-3">
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                  <path
+                    d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
+                  ></path>
+                </svg>
+              </a>
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                <svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
+                  <circle cx="15" cy="15" r="4"></circle>
+                  <path
+                    d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10   C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1   c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
+                  ></path>
+                </svg>
+              </a>
+              <a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
+                <svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
+                  <path
+                    d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
+                  ></path>
+                </svg>
+              </a>
+            </div>
+            <p class="mt-4 text-sm text-gray-500">
+              Bacon ipsum dolor amet short ribs pig sausage prosciutto chicken spare ribs salami.
+            </p>
+          </div>
+        </div>
+        <div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
+          <p class="text-sm text-gray-600">
+            © Copyright 2020 Lorem Inc. All rights reserved.
+          </p>
+          <ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
+            <li>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
+            </li>
+            <li>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
+            </li>
+            <li>
+              <a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms &amp; Conditions</a>
+            </li>
+          </ul>
+        </div>
+        </footer>
+    </section>
+    <!-- footer 13 end -->
 
 
 
diff --git a/public/template/29_template.html b/public/template/29_template.html
index 5628040..eea3e71 100644
--- a/public/template/29_template.html
+++ b/public/template/29_template.html
@@ -15,6 +15,552 @@
     
 
 
+    <!-- header 19 start --> 
+    <nav class="flex flex-col  md:flex-row md:justify-between px-20 py-6 items-center bg-white dark:bg-gray-800">
+      <h1 class="text-xl text-gray-800 dark:text-red-400 font-bold">Brand</h1>
+      <div class=" md:flex justify-center md:justify-end mt-4 md:mt-0  items-center w-full " >
+        <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 py-3 px-10 justify-center  md:justify-end w-full mt-4 md:mt-0 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 -->
+  
+
+  <!-- hero 27 start --> 
+  <section class="pt-24 bg-white dark:bg-gray-800">
+    <div class="px-12 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-8 text-4xl font-extrabold leading-none tracking-normal text-gray-900 md:text-6xl md:tracking-tight">
+                <span>Start</span> <span class="block w-full py-2 text-transparent bg-clip-text leading-12 bg-gradient-to-r from-green-400 to-purple-500 lg:inline">building a buzz</span> <span>around your product 🚀</span>
+            </h1>
+            <p class="px-0 mb-8 text-lg text-gray-600 md:text-xl lg:px-24">
+                Start gaining the traction you've always wanted with our next-level templates and designs. Crafted to help you tell your story.
+            </p>
+            <div class="mb-4 space-x-0 md:space-x-2 md:mb-8">
+                <a href="#_" class="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg text-white bg-green-400 hover:text-gray-800 rounded-2xl sm:w-auto sm:mb-0">
+                    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"></path></svg>
+                </a>
+                <a href="#_" class="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg bg-gray-100 hover:text-gray-800 rounded-2xl sm:w-auto sm:mb-0">
+                    Learn More
+                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
+                </a>
+            </div>
+        </div>
+        <div class="w-full mx-auto mt-20 text-center md:w-10/12">
+            <div class="relative z-0 w-full mt-8">
+                <div class="relative overflow-hidden shadow-2xl">
+                    <div class="flex items-center flex-none px-4 bg-green-400 rounded-b-none h-11 rounded-xl">
+                        <div class="flex space-x-1.5">
+                            <div class="w-3 h-3 border-2 border-white rounded-full"></div>
+                            <div class="w-3 h-3 border-2 border-white rounded-full"></div>
+                            <div class="w-3 h-3 border-2 border-white rounded-full"></div>
+                        </div>
+                    </div>
+                    <img src="https://cdn.devdojo.com/images/march2021/green-dashboard.jpg">
+                </div>
+            </div>
+        </div>
+    </div>
+  </section>
+  
+  <!-- hero 27 end -->
+
+
+  <!-- feature 10 start --> 
+  <section class="dark:bg-gray-800 dark:text-gray-100">
+      <div class="container max-w-xl p-6 py-24 mx-auto space-y-24 lg:px-8 lg:max-w-7xl">
+          <div>
+              <h2 class="text-3xl font-bold tracking-tight text-center sm:text-5xl dark:text-gray-50">Aliquip definiebas ad est</h2>
+              <p class="max-w-3xl mx-auto mt-4 text-xl text-center dark:text-gray-400">Quando cetero his ne, eum admodum sapientem ut.</p>
+          </div>
+          <div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
+              <div>
+                  <h3 class="text-2xl font-bold tracking-tight sm:text-3xl dark:text-gray-50">Ad vix debet docendi</h3>
+                  <p class="mt-3 text-lg dark:text-gray-400">Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates.</p>
+                  <div class="mt-12 space-y-12">
+                      <div class="flex">
+                          <div class="flex-shrink-0">
+                              <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                  </svg>
+                              </div>
+                          </div>
+                          <div class="ml-4">
+                              <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Per ei quaeque sensibus</h4>
+                              <p class="mt-2 dark:text-gray-400">Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.</p>
+                          </div>
+                      </div>
+                      <div class="flex">
+                          <div class="flex-shrink-0">
+                              <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                  </svg>
+                              </div>
+                          </div>
+                          <div class="ml-4">
+                              <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Cu imperdiet posidonium sed</h4>
+                              <p class="mt-2 dark:text-gray-400">Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.</p>
+                          </div>
+                      </div>
+                      <div class="flex">
+                          <div class="flex-shrink-0">
+                              <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                  </svg>
+                              </div>
+                          </div>
+                          <div class="ml-4">
+                              <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Nulla omittam sadipscing mel ne</h4>
+                              <p class="mt-2 dark:text-gray-400">At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.</p>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div aria-hidden="true" class="mt-10 lg:mt-0">
+                  <img src="https://source.unsplash.com/random/360x480/?tech" alt="" class="mx-auto rounded-lg shadow-lg dark:bg-gray-500">
+              </div>
+          </div>
+          <div>
+              <div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
+                  <div class="lg:col-start-2">
+                      <h3 class="text-2xl font-bold tracking-tight sm:text-3xl dark:text-gray-50">Eam nibh gloriatur ex</h3>
+                      <p class="mt-3 text-lg dark:text-gray-400">Per odio fabellas consulatu cu. Utroque detracto mel ea, quo te latine theophrastus. Ea his tale nibh dissentias, mei exerci tamquam euripidis cu.</p>
+                      <div class="mt-12 space-y-12">
+                          <div class="flex">
+                              <div class="flex-shrink-0">
+                                  <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                      </svg>
+                                  </div>
+                              </div>
+                              <div class="ml-4">
+                                  <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Cibo augue offendit has ad</h4>
+                                  <p class="mt-2 dark:text-gray-400">An per velit appellantur, ut utinam minimum nominavi sit, odio nostro habemus ne nec. Ne sonet regione contentiones est.</p>
+                              </div>
+                          </div>
+                          <div class="flex">
+                              <div class="flex-shrink-0">
+                                  <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                      </svg>
+                                  </div>
+                              </div>
+                              <div class="ml-4">
+                                  <h4 class="text-lg font-medium leading-6 dark:text-gray-50">At eum ferri luptatum lobortis</h4>
+                                  <p class="mt-2 dark:text-gray-400">Te per quidam maiorum ocurreret, etiam delicatissimi usu ad. Ne has quod periculis. Te sit primis iisque efficiantur.</p>
+                              </div>
+                          </div>
+                          <div class="flex">
+                              <div class="flex-shrink-0">
+                                  <div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
+                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
+                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                      </svg>
+                                  </div>
+                              </div>
+                              <div class="ml-4">
+                                  <h4 class="text-lg font-medium leading-6 dark:text-gray-50">Dicunt verterem evertitur eu sea</h4>
+                                  <p class="mt-2 dark:text-gray-400">Audire principes rationibus eam an, autem nominavi luptatum per te. Sumo fabulas vim eu, sonet saperet eleifend ut vix.</p>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="mt-10 lg:mt-0 lg:col-start-1 lg:row-start-1">
+                      <img src="https://source.unsplash.com/random/361x481/?office" alt="" class="mx-auto rounded-lg shadow-lg dark:bg-gray-500">
+                  </div>
+              </div>
+          </div>
+      </div>
+  </section>
+  
+  <!-- feature 10 end -->
+
+
+  <!-- start cta 9 --> 
+  <section class="text-white bg-gray-900">
+    <div class="flex flex-col items-stretch justify-between px-4 py-20 mx-auto max-w-7xl lg:flex-row sm:items-center">
+      <div>
+        <h2 class="mb-1 text-xl font-semibold text-left sm:text-2xl sm:text-center lg:text-left">Built for companies of all sizes</h2>
+        <p class="mb-6 text-lg font-normal text-left text-gray-200 sm:text-xl lg:mb-0 sm:text-center lg:text-left">Start your 14-day free trial or book a personal demo.</p>
+      </div>
+      <div class="flex flex-col mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
+        <a href="#" class="w-full py-2 px-4 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded text-lg sm:w-auto">Start free trial</a>
+        <a href="#" class="w-full py-2 px-4 bg-gray-800 border-2 border-gray-300 text-gray-300 hover:border-gray-400 hover:bg-gray-400 hover:text-gray-800 rounded text-lg sm:w-auto">Book a demo</a>
+      </div>
+    </div>
+  </section>
+  
+  <!-- end cta 9 -->
+ 
+    
+  <!-- team 4 start --> 
+  <section class="bg-white dark:bg-gray-800">
+      <div class="container px-6 py-24 mx-auto">
+          <h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Our Executive Team</h1>
+          
+          <p class="max-w-2xl mx-auto my-6 text-center text-gray-500 dark:text-gray-300">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo incidunt ex placeat modi magni quia error alias, adipisci rem similique, at omnis eligendi optio eos harum.
+          </p>
+          
+          <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4">
+              <div class="flex flex-col items-center p-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
+                  <img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
+                  
+                  <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">arthur melo</h1>
+                  
+                  <p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">design director</p>
+                  
+                  <div class="flex mt-3 -mx-2">
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                              </path>
+                          </svg>
+                      </a>
+
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
+                          aria-label="Facebook">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                              </path>
+                          </svg>
+                      </a>
+
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                              </path>
+                          </svg>
+                      </a>
+                  </div>
+              </div>
+
+              <div class="flex flex-col items-center p-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
+                  <img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1531590878845-12627191e687?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="">
+                  
+                  <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">Amelia. Anderson</h1>
+                  
+                  <p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lead Developer</p>
+                  
+                  <div class="flex mt-3 -mx-2">
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                              </path>
+                          </svg>
+                      </a>
+
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
+                          aria-label="Facebook">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                              </path>
+                          </svg>
+                      </a>
+
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                              </path>
+                          </svg>
+                      </a>
+                  </div>
+              </div>
+
+              <div class="flex flex-col items-center p-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
+                  <img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1488508872907-592763824245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+                  
+                  <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">Olivia Wathan</h1>
+                  
+                  <p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lead designer</p>
+                  
+                  <div class="flex mt-3 -mx-2">
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                              </path>
+                          </svg>
+                      </a>
+
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
+                          aria-label="Facebook">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                              </path>
+                          </svg>
+                      </a>
+
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                              </path>
+                          </svg>
+                      </a>
+                  </div>
+              </div>
+
+              <div class="flex flex-col items-center p-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
+                  <img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
+                  
+                  <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">John Doe</h1>
+                  
+                  <p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Full stack developer</p>
+                  
+                  <div class="flex mt-3 -mx-2">
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
+                              </path>
+                          </svg>
+                      </a>
+
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
+                          aria-label="Facebook">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
+                              </path>
+                          </svg>
+                      </a>
+
+                      <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                              </path>
+                          </svg>
+                      </a>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </section>
+  
+  <!-- team 4 end -->
+
+
+  <!-- contact 2 start --> 
+
+  <section class="dark:bg-gray-900 dark:text-gray-100">
+      
+    <div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-24 mx-auto rounded-lg md:grid-cols-2 md:px-12  xl:px-32 ">
+        <div class="flex flex-col justify-between">
+            <div class="space-y-2">
+                <h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
+                <div class="dark:text-gray-400">Vivamus in nisl metus? Phasellus.</div>
+            </div>
+            <img src="https://www.mambaui.com/assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64">
+        </div>
+        <form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
+            <div>
+                <label for="name" class="text-sm">Full name</label>
+                <input id="name" type="text" placeholder="" class="w-full p-3 rounded dark:bg-gray-800">
+            </div>
+            <div>
+                <label for="email" class="text-sm">Email</label>
+                <input id="email" type="email" class="w-full p-3 rounded dark:bg-gray-800">
+            </div>
+            <div>
+                <label for="message" class="text-sm">Message</label>
+                <textarea id="message" rows="3" class="w-full p-3 rounded dark:bg-gray-800"></textarea>
+            </div>
+            <button type="submit" class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-green-400 dark:text-gray-900">Send Message</button>
+        </form>
+    </div>
+
+  </section>
+    
+  <!-- contact 2 end -->
+
+
+  <!--footer 6 start--> 
+  <footer class="bg-gray-50 dark:bg-gray-800">
+    <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
+      <span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+  
+      <div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-3">
+        <div class="lg:order-last">
+          <p class="font-medium dark:text-gray-300 dark:hover:text-sky-300">
+            Newsletter
+          </p>
+  
+          <form class="max-w-sm mt-4">
+            <div class="relative">
+              <label class="sr-only" for="email"> Email </label>
+  
+              <input class="w-full py-4 pl-3 pr-16 text-sm border-2 border-gray-200 rounded-lg" id="email" type="email" placeholder="Enter your email address">
+  
+              <button class="absolute p-2 text-white -translate-y-1/2 bg-blue-600 rounded-full hover:bg-blue-700 active:bg-blue-500 top-1/2 right-4" type="button">
+                <svg class="w-4 h-4 rotate-45 translate-x-[1px] -translate-y-[1px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                </svg>
+              </button>
+            </div>
+          </form>
+  
+          <div class="flex mt-8 space-x-6 text-gray-500">
+            <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Facebook </span>
+  
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+              </svg>
+            </a>
+  
+            <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Instagram </span>
+  
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+              </svg>
+            </a>
+  
+            <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Twitter </span>
+  
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+              </svg>
+            </a>
+  
+            <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> GitHub </span>
+  
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+              </svg>
+            </a>
+  
+            <a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
+              <span class="sr-only"> Dribbble </span>
+  
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+  
+        <div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
+          <div>
+            <p class="font-medium dark:text-gray-300 ">
+              Company
+            </p>
+  
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
+            </nav>
+          </div>
+  
+          <div>
+            <p class="font-medium dark:text-gray-300">
+              Services
+            </p>
+  
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
+            </nav>
+          </div>
+  
+          <div>
+            <p class="font-medium dark:text-gray-300">
+              Helpful Links
+            </p>
+  
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
+            </nav>
+          </div>
+  
+          <div>
+            <p class="font-medium dark:text-gray-300">
+              Legal
+            </p>
+  
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms &amp; Conditions </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
+              <a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
+            </nav>
+          </div>
+        </div>
+      </div>
+  
+      <p class="mt-8 text-xs text-gray-500">
+        © 2022 Company Name
+      </p>
+    </div>
+  </footer>
+  <!--footer 6 end -->
+
+  
 
 
 
diff --git a/public/template/30_template.html b/public/template/30_template.html
index 4b4ba5a..2895e0a 100644
--- a/public/template/30_template.html
+++ b/public/template/30_template.html
@@ -15,6 +15,278 @@
     
 
 
+    <!-- header 20 start --> 
+    <div class="bg-gray-100 dark:bg-gray-800 ">
+      <nav class="bg-white dark:bg-gray-800 px-6 relative shadow-md">
+        <div class="flex flex-row justify-between items-center py-2">
+          <h3 class="font-semibold text-3xl text-gray-500 dark:text-cyan-300 dark:focus:text-cyan-600">Webapp</h3>
+          <div class="group flex flex-col items-center">
+            <button class="p-2 rounded-lg md:hidden">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-10 fill-current" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /></svg>
+            </button>
+            <div class="hidden group-hover:block md:block absolute md:static bg-white dark:bg-gray-800 inset-x-0 top-16 py-3 shadow-md md:shadow-none text-gray-600">
+              <div class="flex flex-row justify-center items-center text-center font-semibold text-gray-500">
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/></svg>
+                  Home 
+                </a>
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/></svg>
+                  Account 
+                </a>
+                <a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#"> 
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/></svg>
+                  Logout 
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+    
+    <!-- header 20 end -->
+
+
+    <!-- hero 21 start --> 
+    <section class="bg-white dark:bg-gray-900  py-24 "> 
+
+      <div class="container flex flex-col px-6 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
+          <div class="w-full lg:w-1/2">
+              <div class="lg:max-w-lg">
+                  <h1 class="text-3xl text-left font-bold tracking-wide text-gray-800 dark:text-white lg:text-5xl">
+                      Easiest way to create your website
+                  </h1>
+                  
+                  <div class="mt-8 space-y-5 ">
+                      <p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+
+                          <span class="mx-2">Clean and Simple Layout</span>
+                      </p>
+
+                      <p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+
+                          <span class="mx-2">Just Copy Paste Codeing</span>
+                      </p>
+
+                      <p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+
+                          <span class="mx-2">Easy to Use</span>
+                      </p>
+                  </div>
+                  
+              </div>
+
+              <div class="w-full mt-8 bg-transparent border rounded-md lg:max-w-sm dark:border-gray-700 focus-within:border-blue-400 focus-within:ring focus-within:ring-blue-300 dark:focus-within:border-blue-400 focus-within:ring-opacity-40">
+                  <form class="flex flex-col lg:flex-row">
+                      <input type="email" placeholder="Enter your email address" class="flex-1 h-10 px-4 py-2 m-1 text-gray-700 placeholder-gray-400 bg-transparent border-none appearance-none dark:text-gray-200 focus:outline-none focus:placeholder-transparent focus:ring-0" /> 
+                      
+                      <button type="button" class=" h-10 px-2 py-2 m-1 text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
+                          Join Us
+                      </button>
+                  </form>
+              </div>
+          </div>
+
+          <div class="flex items-center justify-center w-full h-96 lg:w-1/2">
+              <img class="object-cover w-full h-full mx-auto rounded-md lg:max-w-2xl" src="https://images.unsplash.com/photo-1543269664-7eef42226a21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="glasses photo">
+          </div>
+      </div>
+    </section>
+
+    <!-- hero 21 end -->
+
+
+
+
+    <!-- feature 9 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100 py-24">
+        <div class=" container flex flex-col mx-auto lg:flex-row">
+            <div class="w-full lg:w-1/3" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-size: cover;"></div>
+            <div class="flex flex-col w-full p-6 lg:w-2/3 md:p-8 lg:p-12">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 mb-8 dark:text-green-400">
+                    <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                </svg>
+                <h2 class="text-3xl font-semibold leading-none">Modern solutions to all kinds of problems</h2>
+                <p class="mt-4 mb-8 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non voluptatum rem amet!</p>
+                <button class="self-start px-10 py-3 text-lg font-medium rounded-3xl dark:bg-green-400 dark:text-gray-900">Get started</button>
+            </div>
+        </div>
+    </section>
+    <!-- feature 9 end -->
+
+
+
+    <!-- start cta 14  --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100 py-24">
+
+      <div class="container m-auto px-6 ">
+      <div class="flex flex-col md:flex-row items-center justify-between relative w-100 h-auto md:h-64 bg-100 shadow-2xl rounded-lg p-8 dark:bg-gray-900">
+          <div class="w-8/12 text-2xl">
+              <img alt="quote" class="float-left mr-1" src="https://assets-global.website-files.com/5b5a66e9f3166b36708705fa/5cf8fb1f994fb7168d0d66fb_quote-intro.svg">
+              <span class="flex dark:text-yellow-100">We are team of developers with houndreds hours spend on coding, we create professional apps, webs.</span>
+          </div>
+          <div class="relative shadow-md font-medium my-5 py-2 px-4 text-white dark:text-gray-800 cursor-pointer bg-yellow-600 hover:bg-yellow-500 rounded text-lg text-center w-48">
+              <span class="absolute h-3 right-0 top-0 animate-ping inline-flex rounded-full bg-yellow-600">
+              </span>
+              Call now
+          </div>
+      </div>
+      </div>
+    </section>
+    <!-- end cta 14  -->
+  
+  
+
+    <!-- pricing 9 start --> 
+    <section class="bg-gray-100 dark:bg-gray-900">
+      <div class="max-w-7xl px-4 py-24 mx-auto text-left md:text-center ">
+    
+        <div class="grid grid-cols-1 gap-24 md:grid-cols-2">
+          <div>
+            <p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Developers</p>
+            <h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$9<span class="text-2xl font-medium text-gray-600 dark:text-gray-300"> per month</span></h1>
+            <p class="mb-6 text-lg text-gray-600 dark:text-gray-400">
+              One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
+            </p>
+            <div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
+              <a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
+              <a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300  md:w-auto">Contact Us</a>
+            </div>
+          </div>
+          <div>
+            <p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Designers</p>
+            <h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$19<span class="text-2xl font-medium text-gray-600 dark:text-gray-300 "> per month</span></h1>
+            <p class="mb-6 text-lg text-gray-600 dark:text-gray-400 ">
+              One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
+            </p>
+            <div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
+              <a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900  md:w-auto">Get Started</a>
+              <a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </section>
+    
+    <!-- pricing 9 end -->
+
+
+
+    <!-- testimonial 13 start -->
+ 
+    <section class="bg-gray-800">
+        <div class="w-full px-4 py-20 mx-auto text-center max-w-7xl md:w-4/5 lg:w-4/6">
+        <h1 class="mt-3 mb-10 text-xl font-extrabold text-white md:leading-snug md:text-3xl">
+            “Implementation is a breeze, particularly because the team at Hellonext is
+            <span class="text-white bg-transparent bg-clip-border xl:bg-clip-text xl:text-transparent xl:bg-gradient-to-r from-green-400 to-purple-500"> very fast to respond and help </span>
+            where needed, even if it means rolling out new features on their platform.  We're super happy and are loving how Hellonext brings us closer to the members of our community“
+        </h1>
+            <div class="mx-auto mb-3 shadow-lg avatar w-1/5">
+                <img src="https://www.hyperui.dev/photos/man-4.jpeg" alt="man standing up a mounten" class=" object-cover rounded-full h-20 w-20  mx-auto " />
+            </div>
+        <p class="text-base font-medium text-gray-200">example example</p>
+        <p class="text-xs font-medium text-gray-400">CEO, example</p>
+        </div>
+    </section>
+   
+    <!-- testimonial 13 end -->
+
+  
+    <!--  footer 25 start --> 
+    <footer class="px-4 pt-24 divide-y dark:bg-gray-900 dark:text-gray-100">
+      <div class="container flex flex-col justify-between py-10 mx-auto space-y-8 lg:flex-row lg:space-y-0">
+        <div class="lg:w-1/3">
+          <a rel="noopener noreferrer" href="#" class="flex justify-center space-x-3 lg:justify-start">
+            <div class="flex items-center justify-center w-12 h-12 rounded-full dark:bg-indigo-400">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="flex-shrink-0 w-5 h-5 rounded-full dark:text-gray-900">
+                <path d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"></path>
+              </svg>
+            </div>
+            <span class="self-center text-2xl font-semibold">Brand name</span>
+          </a>
+        </div>
+        <div class="grid grid-cols-2 text-sm gap-x-3 gap-y-8 lg:w-2/3 sm:grid-cols-4">
+          <div class="space-y-3">
+            <h3 class="tracking-wide uppercase dark:text-gray-50">Product</h3>
+            <ul class="space-y-1">
+              <li>
+                <a rel="noopener noreferrer" href="#">Features</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#">Integrations</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#">Pricing</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#">FAQ</a>
+              </li>
+            </ul>
+          </div>
+          <div class="space-y-3">
+            <h3 class="tracking-wide uppercase dark:text-gray-50">Company</h3>
+            <ul class="space-y-1">
+              <li>
+                <a rel="noopener noreferrer" href="#">Privacy</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#">Terms of Service</a>
+              </li>
+            </ul>
+          </div>
+          <div class="space-y-3">
+            <h3 class="uppercase dark:text-gray-50">Developers</h3>
+            <ul class="space-y-1">
+              <li>
+                <a rel="noopener noreferrer" href="#">Public API</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#">Documentation</a>
+              </li>
+              <li>
+                <a rel="noopener noreferrer" href="#">Guides</a>
+              </li>
+            </ul>
+          </div>
+          <div class="space-y-3">
+            <div class="uppercase dark:text-gray-50">Social media</div>
+            <div class="flex justify-start space-x-3">
+              <a rel="noopener noreferrer" href="#" title="Facebook" class="flex items-center p-1">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
+                  <path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"></path>
+                </svg>
+              </a>
+              <a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center p-1">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
+                  <path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"></path>
+                </svg>
+              </a>
+              <a rel="noopener noreferrer" href="#" title="Instagram" class="flex items-center p-1">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-5 h-5 fill-current">
+                  <path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="py-6 text-sm text-center dark:text-gray-400">© 1968 Company Co. All rights reserved.</div>
+    </footer>
+    
+    <!--  footer 25 end -->
+
 
 
 
diff --git a/public/template/31_template.html b/public/template/31_template.html
new file mode 100644
index 0000000..26a4db9
--- /dev/null
+++ b/public/template/31_template.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Template 30</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/32_template.html b/public/template/32_template.html
new file mode 100644
index 0000000..26a4db9
--- /dev/null
+++ b/public/template/32_template.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Template 30</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/6_template.html b/public/template/6_template.html
index 2c66107..afa9fb8 100644
--- a/public/template/6_template.html
+++ b/public/template/6_template.html
@@ -15,7 +15,7 @@
     
     <!-- header 2 start -->
      
-    <section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-800 body-font">
+    <section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-900 body-font">
       <div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
         <a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
     
@@ -120,7 +120,7 @@
     <!-- hero 2 end -->
 
     <!-- start cta 2 -->
-        <section class="flex justify-around pb-24 dark:bg-gray-800">
+        <section class="flex justify-around py-24 dark:bg-gray-900">
         <div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
             <a href="#">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
@@ -159,7 +159,7 @@
 
     <!-- feature 2 start --> 
   
-    <section class="bg-white dark:bg-gray-900 p-24">
+    <section class="bg-white dark:bg-gray-800 p-24">
         <div class="container   py-10 mx-auto">
             <h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
             
@@ -231,7 +231,7 @@
     <!-- pricing 2 start -->
     
     <section x-data="{ toggle: 'basic' }"
-    class="relative py-24 bg-gray-200 dark:bg-gray-800 min-w-screen animation-fade animation-delay">
+    class="relative py-24 bg-gray-200 dark:bg-gray-900 min-w-screen animation-fade animation-delay">
     <div class="container w-full px-10 mx-auto sm:px-5 ">
         <div class="sm:flex ">
             <aside class="w-full sm:flex-initial">
diff --git a/public/template/7_template.html b/public/template/7_template.html
index 0decfbf..d421df7 100644
--- a/public/template/7_template.html
+++ b/public/template/7_template.html
@@ -42,6 +42,7 @@
     <!-- header 3 end -->
 
 
+
     <!-- hero 3 start -->
     
     <div class="relative flex flex-col items-center justify-center min-h-screen bg-cover "
@@ -81,57 +82,65 @@
 
     <!-- hero 3 end -->
     
-
-    <!-- accordion 2 start -->
     
-  
-  <div class="flex items-center justify-center py-20 transition-height duration-300 from-purple-100 via-red-300 to-indigo-500 bg-gradient-to-br">
-      <div class='w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg shadow-xl'>
-          <h1 class="text-xl mb-10 text-center">TAILWINDCSS ACCORDION WITH <code>&lt;details&gt; &lt;summary&gt;</code> HTML Tag</h1>
-
-          <details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
-              <summary class="w-full bg-white text-dark flex justify-between px-4 py-3  after:content-['+'] ">Morbi at sagittis velit</summary>
-              <p class="px-4 py-3">
-              Nunc posuere dapibus urna quis cursus. Mauris malesuada tincidunt diam vel placerat mi tincidunt ac. Nullam augue urna, venenatis ut blandit eget, auctor vel eros. In ut dolor ante
-              </p>
-          </details>
-
-          <details class="w-full bg-white border border-blue-500 cursor-pointer  mb-3 transition-all duration-700 ">
-              <summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">Etiam ut lacus in enim sagittis posuere at a elit</summary>
-              <p class="px-4 py-3 transition-all duration-700">
-              Fusce sed laoreet ex. Aenean justo nisl, eleifend eget eleifend sit amet, imperdiet id libero. Suspendisse et tempus leo, et lacinia arcu. Etiam at ante in est efficitur fringilla eleifend nec tellus. Integer sed auctor lectus, nec ullamcorper arcu. Nullam nec eros elit. Nulla tempor massa ut quam elementum dignissim. Sed eu pulvinar est, vel vehicula dolor. Pellentesque in ante vel elit facilisis consectetur eu id felis
-              </p>
-          </details>
-
-          <details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
-              <summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">
-              Nam auctor fringilla magna id porta
-              </summary>
-              <p class="px-4 py-3 transition-all duration-700">
-              Etiam maximus vitae eros eu vestibulum. Donec posuere, magna non tincidunt dignissim, magna tortor mollis augue, at maximus ante lacus vel tellus. Vestibulum vestibulum consectetur tortor id sagittis. Suspendisse nisi ipsum, pretium a lorem at, laoreet condimentum arcu
-              </p>
-          </details>
-
-              
-      <!-- THE CSS -->
-      <style>
-
-      details[open] summary::after {
-          content: "-";
-          transition: all;
-          transition-duration: 1s;
-      }
-  </style>
+    <!-- blog 7 start --> 
+    <div class="dark:bg-gray-800 dark:text-gray-50">
+      <div class="container grid grid-cols-12 mx-auto">
+          <div class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover dark:bg-gray-700 lg:col-span-6 lg:h-auto" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;">
+              <div class="flex flex-col items-center p-8 py-12 text-center">
+                  <span>12 June</span>
+                  <h1 class="py-4 text-5xl font-bold">Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
+                  <p class="pb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7">
+                      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                  </svg>
+              </div>
+          </div>
+          <div class="flex flex-col col-span-12 p-6 divide-y lg:col-span-6 lg:p-10 divide-gray-700">
+              <div class="pt-6 pb-4 space-y-2">
+                  <span>12 June</span>
+                  <h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
+                  <a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
+                      <span>Read more</span>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                          <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                      </svg>
+                  </a>
+              </div>
+              <div class="pt-6 pb-4 space-y-2">
+                  <span>12 June</span>
+                  <h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
+                  <a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
+                      <span>Read more</span>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                          <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                      </svg>
+                  </a>
+              </div>
+              <div class="pt-6 pb-4 space-y-2">
+                  <span>12 June</span>
+                  <h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
+                  <a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
+                      <span>Read more</span>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                          <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                      </svg>
+                  </a>
+              </div>
+          </div>
       </div>
-  </div>
+    </div>
   
-  <!-- accordion 2 end -->
+    <!-- blog 7 end -->
 
     
     <!-- team 1 start -->
-    <section class="dark:bg-gray-800 bg-white  py-24">
+    <section class="dark:bg-gray-900 bg-white  py-24">
       <section class="container p-6 mx-auto ">
-          <h2 class="text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
+          <h2 class="text-center text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
 
           <div class="flex items-center justify-center">
               <div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
@@ -180,7 +189,7 @@
 
     <!-- feature 2 start -->
   
-    <section class="bg-white dark:bg-gray-900 py-24">
+    <section class="bg-white dark:bg-gray-800 py-24">
       <div class="container px-6 py-10 mx-auto">
           <h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
           
@@ -243,47 +252,47 @@
               </div>
           </div>
       </div>
-  </section>
+    </section>
   
     <!-- feature 2 end -->
 
-   <!-- testimonial 3 start  -->
+    <!-- testimonial 3 start  -->
     
-  <section class="text-gray-600 dark:bg-gray-800 body-font ">
-    <div class="container px-5 py-24 mx-auto">
-      <div class="flex flex-wrap -m-4">
-        <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
-          <div class="h-full text-center">
-            <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
-            <p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
-            <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
-            <h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
-            <p class="text-gray-500  dark:text-indigo-500">Senior Product Designer</p>
+    <section class="text-gray-600 dark:bg-gray-900 body-font ">
+      <div class="container px-5 py-24 mx-auto">
+        <div class="flex flex-wrap -m-4">
+          <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
+            <div class="h-full text-center">
+              <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
+              <p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+              <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
+              <h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
+              <p class="text-gray-500  dark:text-indigo-500">Senior Product Designer</p>
+            </div>
           </div>
-        </div>
-        <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
-          <div class="h-full text-center">
-            <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
-            <p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
-            <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
-            <h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
-            <p class="text-gray-500  dark:text-indigo-500">UI Develeoper</p>
+          <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
+            <div class="h-full text-center">
+              <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
+              <p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+              <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
+              <h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
+              <p class="text-gray-500  dark:text-indigo-500">UI Develeoper</p>
+            </div>
           </div>
-        </div>
-        <div class="lg:w-1/3 lg:mb-0 p-4">
-          <div class="h-full text-center">
-            <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
-            <p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
-            <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
-            <h2 class="text-gray-900  dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
-            <p class="text-gray-500 dark:text-indigo-500">CTO</p>
+          <div class="lg:w-1/3 lg:mb-0 p-4">
+            <div class="h-full text-center">
+              <img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
+              <p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+              <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
+              <h2 class="text-gray-900  dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
+              <p class="text-gray-500 dark:text-indigo-500">CTO</p>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
 
-  <!-- testimonial 3 end -->
+    <!-- testimonial 3 end -->
 
 
 
diff --git a/public/template/8_template.html b/public/template/8_template.html
index b281183..82986e6 100644
--- a/public/template/8_template.html
+++ b/public/template/8_template.html
@@ -272,7 +272,7 @@
 
     <!-- blog 1 start -->
  
-    <section class="py-24 sm:py-12 dark:bg-gray-800 dark:text-gray-100">
+    <section class="py-24 sm:py-12 dark:bg-gray-900 dark:text-gray-100">
         <div class="container p-6 mx-auto space-y-8">
             <div class="space-y-2 text-center">
                 <h2 class="text-3xl font-bold">Partem reprimique an pro</h2>
diff --git a/public/template/9_template.html b/public/template/9_template.html
index 3aa9784..68f2cca 100644
--- a/public/template/9_template.html
+++ b/public/template/9_template.html
@@ -72,7 +72,7 @@
 
     <!-- start cta 3  -->
     
-    <section class="flex flex-col md:flex-row justify-around py-24 bg-white border-gray-200 dark:bg-gray-800 ">
+    <section class="flex flex-col md:flex-row justify-around py-24 bg-white border-gray-200 dark:bg-gray-900 ">
         
             
         <div class="max-w-sm  my-3 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
@@ -128,7 +128,7 @@
 
     <!-- feature 6 start -->
   
-    <section class="py-24 bg-white dark:bg-gray-900">
+    <section class="py-24 bg-white dark:bg-gray-800">
         <div class="container px-6 py-10 mx-auto">
             <h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome Components</h1>
             
@@ -210,7 +210,7 @@
     
     <!-- pricing 5 start  -->
   
-    <section class="py-24 dark:bg-gray-800">
+    <section class="py-24 dark:bg-gray-900">
       <div class="px-4 py-16 mx-auto container md:px-24 lg:px-8 lg:py-20 ">
         <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
           <div>
@@ -394,9 +394,78 @@
     <!-- pricing 5 end  -->
 
 
+
+    <!-- testimonial 5 start --> 
+    <section class="flex items-center justify-center py-16 bg-gray-100 dark:bg-gray-800 min-w-screen">
+        <div class="max-w-6xl px-12 mx-auto dark:bg-gray-800 bg-gray-100 md:px-16 xl:px-10">
+            <div class="flex flex-col items-center lg:flex-row">
+            <div class="flex flex-col items-start justify-center w-full h-full pr-8 mb-10 lg:mb-0 lg:w-1/2">
+                <p class="mb-2 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love our product</p>
+                <h2 class="text-4xl font-extrabold leading-10 tracking-tight dark:text-white text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">Testimonials</h2>
+                <p class="my-6 text-lg text-gray-600 dark:text-gray-300">Don't just take our word for it, read from our extensive list of case studies and customer testimonials.</p>
+                <a href="#_" class="flex items-center justify-center px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10">View Case Studies</a>
+            </div>
+            <div class="w-full lg:w-1/2">
+                  <blockquote class="sm:flex justify-center  sm:justify-between  w-full col-span-1 p-6 bg-white rounded-lg shadow">
+                  <div class="flex flex-col pr-8">
+                      <div class="relative pl-12">
+                      <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                          <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
+                      </svg>
+                      <p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">Awesome product! And the customer service is exceptionally well.</p>
+                      </div>
+
+                      <h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
+                      Jane Cooper
+                      <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
+                      </h3>
+                  </div>
+                  <img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full xl:w-24 xl:h-24" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
+                  </blockquote>
+                <blockquote class="sm:flex justify-center  sm:justify-between  w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
+                <div class="flex flex-col pr-10 mx-auto">
+                    <div class="relative pl-12">
+                    <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                        <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
+                    </svg>
+                    <p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">I can't express enough, how amazing this service has been for my company.</p>
+                    </div>
+                    <h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
+                    John Doe
+                    <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
+                    </h3>
+                    <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                </div>
+                <img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;aauto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
+                </blockquote>
+                <blockquote class="sm:flex justify-center  sm:justify-between  w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
+                <div class="flex flex-col pr-10">
+                    <div class="relative pl-12">
+                    <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                        <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
+                    </svg>
+                    <p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">I can't express enough, how amazing this service has been for my company.</p>
+                    </div>
+
+                    <h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
+                    John Smith
+                    <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
+                    </h3>
+                    <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                </div>
+                <img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rrb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;aauto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
+                </blockquote>
+            </div>
+            </div>
+        </div>
+    </section>
+    <!-- testimonial 5 end -->
+
+
+
     <!--footer 5 start-->
       
-    <footer class="bg-gray-50 dark:bg-gray-800">
+    <footer class="bg-gray-50 dark:bg-gray-900">
       <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
         <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
           <div>
diff --git a/public/template/about_page/1_about_page.html b/public/template/about_page/1_about_page.html
new file mode 100644
index 0000000..38af961
--- /dev/null
+++ b/public/template/about_page/1_about_page.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>About page 1</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+
+    <!-- header 24 start --> 
+     
+    <style>
+      @media(max-width:1520px) {
+          .left-svg {
+              display: none;
+          }
+      }
+
+      /* small css for the mobile nav close */
+      #nav-mobile-btn.close span:first-child {
+          transform: rotate(45deg);
+          top: 4px;
+          position: relative;
+          background: #a0aec0;
+      }
+
+      #nav-mobile-btn.close span:nth-child(2) {
+          transform: rotate(-45deg);
+          margin-top: 0px;
+          background: #a0aec0;
+      }
+  </style>
+
+    <header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
+      <div
+          class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
+
+          <a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
+              <svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <g fill-rule="evenodd">
+                      <path
+                          d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
+                      <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
+                  </g>
+              </svg>
+              <span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
+          </a>
+
+          <nav id="nav"
+              class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
+              <a href="#"
+                  class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600 ">Home</a>
+              <a href="#features"
+                  class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Features</a>
+              <a href="#pricing"
+                  class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Pricing</a>
+              <a href="#testimonials"
+                  class="font-bold duration-100 transition-color hover:text-indigo-600 dark:text-pink-500 dark:hover:text-indigo-600">Testimonials</a>
+              <div class="flex flex-col w-full font-medium border-t border-gray-200 md:hidden">
+                  <a href="#_" class="w-full py-2 font-bold text-center text-pink-500 ">Login</a>
+                  <a href="#_"
+                      class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
+                      Started</a>
+              </div>
+          </nav>
+
+          <div
+              class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
+              <a href="#_"
+                  class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
+              <a href="#_"
+                  class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
+                  Started</a>
+              <svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
+                  viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <defs>
+                      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
+                          <stop stop-color="#E614F2" offset="0%" />
+                          <stop stop-color="#FC3832" offset="100%" />
+                      </linearGradient>
+                      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
+                          <stop stop-color="#657DE9" offset="0%" />
+                          <stop stop-color="#1C0FD7" offset="100%" />
+                      </linearGradient>
+                      <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                          id="a">
+                          <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                          <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
+                      </filter>
+                      <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                          id="d">
+                          <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                          <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
+                      </filter>
+                      <path
+                          d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
+                          id="b" />
+                      <path
+                          d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
+                          id="e" />
+                  </defs>
+                  <g fill="none" fill-rule="evenodd" opacity=".9">
+                      <g transform="rotate(65 416.452 409.167)">
+                          <use fill="#000" filter="url(#a)" xlink:href="#b" />
+                          <use fill="url(#c)" xlink:href="#b" />
+                      </g>
+                      <g transform="rotate(29 421.929 414.496)">
+                          <use fill="#000" filter="url(#d)" xlink:href="#e" />
+                          <use fill="url(#f)" xlink:href="#e" />
+                      </g>
+                  </g>
+              </svg>
+          </div>
+
+          <div id="nav-mobile-btn"
+              class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
+              <span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
+              <span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
+          </div>
+
+      </div>
+    </header>
+    <script>
+      if (document.getElementById('nav-mobile-btn')) {
+          document.getElementById('nav-mobile-btn').addEventListener('click', function () {
+              if (this.classList.contains('close')) {
+                  document.getElementById('nav').classList.add('hidden');
+                  this.classList.remove('close');
+              } else {
+                  document.getElementById('nav').classList.remove('hidden');
+                  this.classList.add('close');
+              }
+          });
+      }
+    </script>
+    
+    <!-- header 24 end --> 
+
+
+    <!-- section 4 start -->
+ 
+    <section class="bg-gray-100 dark:bg-gray-800">
+        <div class="container mx-auto ">
+        <div class="grid grid-cols-1 md:grid-cols-2 h-screen">
+        <div class="max-h-96 md:h-screen">
+          <!-- https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 -->
+            <img class="w-screen h-screen object-cover object-top" src="https://source.unsplash.com/random/400*600/?team" alt="">
+        </div>
+        <div class="flex bg-gray-100 dark:bg-gray-800 p-10">
+            <div class="mb-auto mt-auto max-w-lg">
+            <h1 class="text-3xl uppercase dark:text-white  font-bold text-indigo-600">Brand Name</h1>
+            <p class="font-semibold mb-5 dark:text-cyan-100">Company Type</p>
+            <p class="dark:text-cyan-300">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+            <button class="bg-black rounded-md py-3 px-7 mt-6 text-white dark:hover:bg-emerald-300 dark:hover:text-gray-800 font-bold">Email Us</button>
+            </div>
+        </div>
+        </div>
+        </div>
+    </section>
+    <!-- section 4 end -->
+
+
+    <!-- feature 12 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100 py-24">
+      <div class="container p-4 mx-auto  space-y-1 text-center">
+          <span class="text-xs tracking-wider uppercase font-bold dark:text-green-400 text-indigo-600">shortcut to your dream ui</span>
+          <h2 class="pb-3 text-3xl font-bold md:text-4xl">Create a stylish website in minutes</h2>
+          <p>Get a jumpstart to creating your new webpage! With our fully responsive and carefully styled components you can get the structure of your website done with just a couple of clicks.</p>
+      </div>
+      <div class="container grid justify-center gap-4 mx-auto lg:grid-cols-2 xl:grid-cols-4">
+          <div class="flex flex-col px-8 py-6">
+              <h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Components</h2>
+              <p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Individual components that can be re-used multiple times in your designs.</p>
+              <a class="inline-flex items-center space-x-2 text-sm dark:text-green-400  text-indigo-600" href="/components">
+                  <span>Learn More</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                      <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                  </svg>
+              </a>
+          </div>
+          <div class="flex flex-col px-8 py-6 lg:border-none xl:border-solid">
+              <h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Sections</h2>
+              <p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Pre-made building blocks that you can stack on top of each other like Legos to build a website of your own in minutes.</p>
+              <a class="inline-flex items-center space-x-2 text-sm dark:text-green-400  text-indigo-600" href="/sections">
+                  <span>Learn More</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                      <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                  </svg>
+              </a>
+          </div>
+          <div class="flex flex-col px-8 py-6">
+              <h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Templates</h2>
+              <p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Full pages that showcase pieces of what you can achieve with the building blocks that are in this UI kit.</p>
+              <a class="inline-flex items-center space-x-2 text-sm dark:text-green-400  text-indigo-600" href="/templates">
+                  <span>Learn More</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                      <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                  </svg>
+              </a>
+          </div>
+          <div class="flex flex-col px-8 py-6">
+              <h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Customization</h2>
+              <p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Choose your primary color from any of the Tailwind CSS 2.0 colors. You can also view all of the components in our light and dark themes.</p>
+              <a class="inline-flex items-center space-x-2 text-sm dark:text-green-400  text-indigo-600" href="/docs">
+                  <span>Learn More</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                      <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                  </svg>
+              </a>
+          </div>
+      </div>
+    </section>
+
+    <!-- feature 12 end -->
+
+
+    <!-- timeline 1 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100 py-24">
+        <div class="container max-w-5xl px-4 py-12 mx-auto">
+            <div class="grid gap-4 mx-4 sm:grid-cols-12">
+                <div class="col-span-12 sm:col-span-3">
+                    <div class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:dark:bg-green-400 before:bg-indigo-600">
+                        <h3 class="text-3xl font-semibold">Morbi tempor</h3>
+                        <span class="text-sm font-bold tracking-wider uppercase dark:text-gray-400">Vestibulum diam nunc</span>
+                    </div>
+                </div>
+                <div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
+                    <div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-700">
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400 before:bg-indigo-600">
+                            <h3 class="text-xl font-semibold tracking-wide text-indigo-600 ">Donec porta enim vel </h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Dec 2020</time>
+                            <p class="mt-3">Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+                        </div>
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400 before:bg-indigo-600">
+                            <h3 class="text-xl font-semibold tracking-wide text-indigo-600">Aliquam sit amet nunc ut</h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Jul 2019</time>
+                            <p class="mt-3">Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.</p>
+                        </div>
+                        <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400 before:bg-indigo-600">
+                            <h3 class="text-xl font-semibold tracking-wide text-indigo-600">Pellentesque habitant morbi</h3>
+                            <time class="text-xs tracking-wide uppercase dark:text-gray-400">Jan 2016</time>
+                            <p class="mt-3">Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.</p>
+                        </div><!---->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- timeline 1 end -->
+  
+
+
+    <!-- testimonial 24 start --> 
+
+    <div id="testimonials"
+    class="flex items-center justify-center w-full px-8 py-10 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
+    <div class="max-w-6xl mx-auto">
+        <div class="flex-col items-center ">
+            <div class="flex flex-col items-center justify-center w-full h-full max-w-2xl pr-8 mx-auto text-center">
+                <p class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love
+                    our product
+                </p>
+                <h2
+                    class="text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">
+                    Testimonials</h2>
+                <p class="my-6 text-xl font-medium text-gray-500">Don't just take our word for it, read from our
+                    extensive
+                    list of case studies and customer testimonials.</p>
+
+            </div>
+            <div class="flex flex-col items-center justify-center max-w-2xl py-8 mx-auto xl:flex-row xl:max-w-full">
+                <div class="w-full xl:w-1/2 xl:pr-8">
+                    <blockquote
+                        class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
+                        <div class="flex flex-col pr-8">
+                            <div class="relative pl-12">
+                                <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                                    <path
+                                        d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
+                                </svg>
+                                <p class="mt-2 text-base text-gray-600">I'm loving these templates! Very nice
+                                    features and layouts.
+                                </p>
+                            </div>
+
+                            <h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Sandra
+                                Walton <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
+                                    SomeCompany</span></h3>
+                            <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                        </div>
+                        <img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
+                            src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2694&q=80"
+                            alt="">
+                    </blockquote>
+                    <blockquote
+                        class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 mb-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease xl:mb-0">
+                        <div class="flex flex-col pr-10">
+                            <div class="relative pl-12">
+                                <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                                    <path
+                                        d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
+                                </svg>
+                                <p class="mt-2 text-base text-gray-600">Really digging this service. Now I can
+                                    quickly bootstrap any
+                                    project.</p>
+                            </div>
+                            <h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Kenny
+                                Jones <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
+                                    SomeCompany</span></h3>
+                            <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                        </div>
+                        <img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
+                            src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80"
+                            alt="">
+                    </blockquote>
+                </div>
+                <div class="w-full xl:w-1/2 xl:pl-8">
+                    <blockquote
+                        class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
+                        <div class="flex flex-col pr-10">
+                            <div class="relative pl-12">
+                                <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                                    <path
+                                        d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
+                                </svg>
+                                <p class="mt-2 text-base text-gray-600">Extremely helpful in every single project we
+                                    have released.
+                                </p>
+                            </div>
+
+                            <h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Mike Smith
+                                <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
+                            </h3>
+                            <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                        </div>
+                        <img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
+                            src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
+                            alt="">
+                    </blockquote>
+                    <blockquote
+                        class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
+                        <div class="flex flex-col pr-10">
+                            <div class="relative pl-12">
+                                <svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
+                                    <path
+                                        d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
+                                </svg>
+                                <p class="mt-2 text-base text-gray-600">Finally a quick and easy system I can use
+                                    for any type of
+                                    project.</p>
+                            </div>
+
+                            <h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Molly
+                                Sanchez <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
+                                    SomeCompany</span></h3>
+                            <p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
+                        </div>
+                        <img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
+                            src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80"
+                            alt="">
+                    </blockquote>
+                </div>
+            </div>
+
+
+        </div>
+    </div>
+    </div>
+
+    <!-- testimonial 24 end -->
+
+
+
+    <!-- footer 47 start --> 
+
+    <footer class="px-4 pt-12 pb-8 text-white bg-white dark:bg-gray-800 border-t border-gray-200">
+    <div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
+        <div class="w-full pl-12 mr-4 text-left lg:w-1/4 sm:text-center sm:pl-0 lg:text-left">
+            <a href="/"
+                class="flex justify-start text-left sm:text-center lg:text-left sm:justify-center lg:justify-start">
+                <span class="flex items-start sm:items-center">
+                    <svg class="w-auto h-6 text-gray-900 dark:text-cyan-300 fill-current" viewBox="0 0 194 116"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <g fill-rule="evenodd">
+                            <path
+                                d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z">
+                            </path>
+                            <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"></path>
+                        </g>
+                    </svg>
+                </span>
+            </a>
+            <p class="mt-6 mr-4 text-base text-gray-500 dark:text-gray-300">Crafting the next-level of user experience and engagement.
+            </p>
+        </div>
+        <div class="block w-full pl-10 mt-6 text-sm lg:w-3/4 sm:flex lg:mt-0">
+            <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                    Product</li>
+                <li><a href="#_"
+                        class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600  dark:text-gray-300 dark:hover:text-cyan-300">Features</a>
+                </li>
+                <li><a href="#_"
+                        class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Integrations</a>
+                </li>
+                <li><a href="#_"
+                        class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Pricing</a>
+                </li>
+                <li><a href="#_"
+                        class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">FAQ</a></li>
+            </ul>
+            <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                    Company</li>
+                <li><a href="#_"
+                        class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Privacy</a>
+                </li>
+                <li><a href="#_" class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Terms
+                        of
+                        Service</a></li>
+            </ul>
+            <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                    TailwindCSS
+                </li>
+                <li><a href="https://devdojo.com/tailwindcss/components"
+                        class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
+                        Components</a></li>
+                <li><a href="https://devdojo.com/tailwindcss/templates" 
+                        class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
+                        Templates</a></li>
+                <li><a href="https://devdojo.com/tails"
+                        class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tails</a></li>
+            </ul>
+            <div class="flex flex-col w-full text-gray-700">
+                <div class="inline-block px-3 py-2 mt-5 font-bold text-gray-800 uppercase md:mt-0">Follow Us</div>
+                <div class="flex justify-start pl-4 mt-2">
+                    <a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                        target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                        <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" />
+                        </svg>
+                    </a>
+                    <a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                        target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                        <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
+                        </svg>
+                    </a>
+                    <a class="flex items-center block text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                        target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                        <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class=" pt-6 mt-10 text-center text-gray-400 dark:text-cyan-300 border-t border-gray-100">© 2020 Landmark. All rights
+        reserved.</div>
+    </footer>
+
+
+    <!-- footer 47 end -->
+
+  
+     
+
+
+    <!-- start of script section -->
+      <script type="text/javascript">
+        let toogler = document.getElementById("dark_mood_toogler");
+        let doc_html_el = document.getElementsByTagName('html')[0];
+      
+        doc_html_el.addEventListener('keyup',(e)=>{
+            // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+            if(e.ctrlKey && e.keyCode =='220'){
+              doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      
+            }
+        })
+        doc_html_el.addEventListener('keyup',(e)=>{
+            // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+            if(e.ctrlKey && e.keyCode =='191'){
+              toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+      
+            }
+        })
+        toogler.addEventListener('click',()=>{
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+          console.log(doc_html_el.className);
+        })
+      </script>
+    <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/about_page/2_about_page.html b/public/template/about_page/2_about_page.html
new file mode 100644
index 0000000..6e9440e
--- /dev/null
+++ b/public/template/about_page/2_about_page.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>About page 2</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+    <!-- header section start  -->
+    <div class="relative z-20 w-full h-24 px-8 pt-2 bg-white dark:bg-gray-800">
+
+      <div class="container flex items-center justify-between h-full max-w-6xl mx-auto">
+          <a href="#_" class="relative flex items-center flex-row h-full font-black">
+              <svg  class="w-auto h-8 mt-1" viewBox="0 0 215 151" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="56.965%" y1="53.262%" x2="7.891%" y2="29.24%" id="b"><stop stop-color="#FFCD26" offset="0%"/><stop stop-color="#FFDF95" offset="100%"/></linearGradient><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" fill="url(#b)" mask="url(#c)"/></g></svg>
+              <span class="ml-3 text-2xl font-black">Flare</span>
+          </a>
+
+          <div id="nav" class="absolute top-0 left-0 hidden block w-full mt-20 border-b border-gray-200 sm:border-none sm:px-5 sm:block sm:relative sm:mt-0 sm:px-0 sm:w-auto">
+              <nav class="flex flex-col items-center py-3 bg-white border border-gray-100 sm:flex-row sm:bg-transparent sm:border-none sm:py-0">
+                  <a href="#_" class="relative px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Home<span class="absolute bottom-0 left-0 w-full h-1 -mb-2 bg-yellow-300 rounded-full"></span></a>
+                  <a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Pages</a>
+                  <a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Contact</a>
+                  <a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">About</a>
+                  <a href="#_" class="relative mb-5 sm:mb-0">
+                      <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
+                      <span class="relative inline-block w-full h-full px-3 py-1 text-base font-bold transition duration-100 bg-white border-2 border-black rounded fold-bold hover:bg-yellow-400 hover:text-gray-900">SIGNUP</span>
+                  </a>
+              </nav>
+          </div>
+
+          <div id="nav-mobile-btn" class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none sm:hidden sm:mt-10">
+              <span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
+              <span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
+          </div>
+      </div>
+    </div>
+    
+    <!-- header section end  -->
+
+
+
+    
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/about_page/3_about_page.html b/public/template/about_page/3_about_page.html
new file mode 100644
index 0000000..3dcebb4
--- /dev/null
+++ b/public/template/about_page/3_about_page.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>About page 3</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/contact_page/1_contact_page.html b/public/template/contact_page/1_contact_page.html
new file mode 100644
index 0000000..5ad2ea9
--- /dev/null
+++ b/public/template/contact_page/1_contact_page.html
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Contact page 1</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+    <!-- header 24 start --> 
+
+    <style>
+      @media(max-width:1520px) {
+          .left-svg {
+              display: none;
+          }
+      }
+
+      /* small css for the mobile nav close */
+      #nav-mobile-btn.close span:first-child {
+          transform: rotate(45deg);
+          top: 4px;
+          position: relative;
+          background: #a0aec0;
+      }
+
+      #nav-mobile-btn.close span:nth-child(2) {
+          transform: rotate(-45deg);
+          margin-top: 0px;
+          background: #a0aec0;
+      }
+    </style>
+
+    <header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
+      <div
+          class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
+
+          <a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
+              <svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <g fill-rule="evenodd">
+                      <path
+                          d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
+                      <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
+                  </g>
+              </svg>
+              <span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
+          </a>
+
+          <nav id="nav"
+              class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
+              <a href="#"
+                  class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600 ">Home</a>
+              <a href="#features"
+                  class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Features</a>
+              <a href="#pricing"
+                  class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Pricing</a>
+              <a href="#testimonials"
+                  class="font-bold duration-100 transition-color hover:text-indigo-600 dark:text-pink-500 dark:hover:text-indigo-600">Testimonials</a>
+              <div class="flex flex-col w-full font-medium border-t border-gray-200 md:hidden">
+                  <a href="#_" class="w-full py-2 font-bold text-center text-pink-500 ">Login</a>
+                  <a href="#_"
+                      class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
+                      Started</a>
+              </div>
+          </nav>
+
+          <div
+              class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
+              <a href="#_"
+                  class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
+              <a href="#_"
+                  class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
+                  Started</a>
+              <svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
+                  viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <defs>
+                      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
+                          <stop stop-color="#E614F2" offset="0%" />
+                          <stop stop-color="#FC3832" offset="100%" />
+                      </linearGradient>
+                      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
+                          <stop stop-color="#657DE9" offset="0%" />
+                          <stop stop-color="#1C0FD7" offset="100%" />
+                      </linearGradient>
+                      <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                          id="a">
+                          <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                          <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
+                      </filter>
+                      <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                          id="d">
+                          <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                          <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
+                      </filter>
+                      <path
+                          d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
+                          id="b" />
+                      <path
+                          d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
+                          id="e" />
+                  </defs>
+                  <g fill="none" fill-rule="evenodd" opacity=".9">
+                      <g transform="rotate(65 416.452 409.167)">
+                          <use fill="#000" filter="url(#a)" xlink:href="#b" />
+                          <use fill="url(#c)" xlink:href="#b" />
+                      </g>
+                      <g transform="rotate(29 421.929 414.496)">
+                          <use fill="#000" filter="url(#d)" xlink:href="#e" />
+                          <use fill="url(#f)" xlink:href="#e" />
+                      </g>
+                  </g>
+              </svg>
+          </div>
+
+          <div id="nav-mobile-btn"
+              class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
+              <span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
+              <span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
+          </div>
+
+      </div>
+    </header>
+
+    <script>
+      if (document.getElementById('nav-mobile-btn')) {
+          document.getElementById('nav-mobile-btn').addEventListener('click', function () {
+              if (this.classList.contains('close')) {
+                  document.getElementById('nav').classList.add('hidden');
+                  this.classList.remove('close');
+              } else {
+                  document.getElementById('nav').classList.remove('hidden');
+                  this.classList.add('close');
+              }
+          });
+      }
+    </script>
+    
+    <!-- header 24 end --> 
+
+
+
+    <!-- contact 5 start --> 
+    <section class="text-gray-600 body-font relative dark:bg-gray-800">
+      <h2 class="text-3xl font-bold text-black dark:text-white pt-24 text-center">
+        Visit , Call or Email Us
+      </h2>
+        <div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
+          <div class="lg:w-2/3 md:w-1/2 bg-gray-300  rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
+            <iframe class="absolute inset-0" style="filter: grayscale(1) contrast(1.2) opacity(0.4);" title="map" marginheight="0" marginwidth="0" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101408.032631041!2d-122.15130744474018!3d37.41345079210977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb7495bec0189%3A0x7c17d44a466baf9b!2z4Kau4Ka-4KaJ4Kao4KeN4Kaf4KeH4KaH4KaoIOCmreCmv-CmiSwg4KaV4KeN4Kav4Ka-4Kay4Ka_4Kar4KeL4Kaw4KeN4Kao4Ka_4Kav4Ka84Ka-LCDgpq7gpr7gprDgp43gppXgpr_gpqgg4Kav4KeB4KaV4KeN4Kak4Kaw4Ka-4Ka34KeN4Kaf4KeN4Kaw!5e0!3m2!1sbn!2sbd!4v1646216286435!5m2!1sbn!2sbd" width="100%" height="100%" frameborder="0"></iframe>
+            <div class="bg-white  relative flex flex-wrap py-6 rounded shadow-md">
+              <div class="lg:w-1/2 px-6">
+                <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
+                <p class="mt-1">Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter</p>
+              </div>
+              <div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
+                <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
+                <a class="text-indigo-500 leading-relaxed">example@email.com</a>
+                <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
+                <p class="leading-relaxed">123-456-7890</p>
+              </div>
+            </div>
+          </div>
+          <div class="lg:w-1/3 md:w-1/2 bg-white dark:bg-gray-800 rounded-lg flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
+            <div class=" bg-white dark:bg-gray-800 rounded-lg border-2 p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
+              <h2 class="text-gray-900 dark:text-emerald-300 text-lg mb-1 font-medium title-font">Feedback</h2>
+              <p class="leading-relaxed mb-5 text-gray-600 dark:text-cyan-100">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
+              <div class="relative mb-4">
+                <label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Email</label>
+                <input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
+              </div>
+              <div class="relative mb-4">
+                <label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Message</label>
+                <textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
+              </div>
+              <button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 dark:bg-cyan-100 dark:hover:bg-emerald-100 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
+              <p class="text-xs text-gray-500 dark:text-cyan-100 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
+            </div>
+          </div>
+        </div>
+    </section>
+    
+    <!-- contact 5 end -->
+
+
+    <!-- faq 2 start --> 
+    <section class="dark:bg-gray-800 dark:text-gray-100">
+    <div class="container flex flex-col items-center p-4 mx-auto md:p-8">
+        <h1 class="text-3xl font-bold leading-none text-center sm:text-4xl uppercase pb-4" >frequently asked questions</h1>
+        <div class="relative mt-6 mb-12">
+            <span class="absolute inset-y-0 flex items-center pl-2 mx-auto">
+                <button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
+                    <svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-gray-100">
+                        <path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
+                    </svg>
+                </button>
+            </span>
+            <input type="search" name="Search" placeholder="Search..." class="w-full py-3 pl-12 text-sm rounded-full border-2 sm:w-96 focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
+        </div>
+        <div class="flex flex-col w-full divide-y sm:flex-row sm:divide-y-0 sm:divide-x sm:px-8 lg:px-12 xl:px-32 dark:divide-gray-700 divide-indigo-600">
+            <div class="flex flex-col w-full divide-y dark:divide-gray-700 divide-indigo-600 ">
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Billing</a>
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Support</a>
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Account</a>
+            </div>
+            <div class="flex flex-col w-full divide-y dark:divide-gray-700 divide-indigo-600">
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Features</a>
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Contact us</a>
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">My orders</a>
+            </div>
+            <div class="hidden w-full divide-y sm:flex-col sm:flex dark:divide-gray-700 divide-indigo-600">
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Enterprise</a>
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Privacy</a>
+                <a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Developers</a>
+            </div>
+        </div>
+    </div>
+    </section>
+
+    <!-- faq 2 end -->
+
+
+    <!-- footer 47 start --> 
+
+      <footer class="px-4 pt-24 pb-8 text-gray-400 bg-white dark:bg-gray-900 border-t border-gray-200">
+      <div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
+          <div class="w-full pl-12 mr-4 text-left lg:w-1/4 sm:text-center sm:pl-0 lg:text-left">
+              <a href="/"
+                  class="flex justify-start text-left sm:text-center lg:text-left sm:justify-center lg:justify-start">
+                  <span class="flex items-start sm:items-center">
+                      <svg class="w-auto h-6 text-gray-900 dark:text-cyan-300 fill-current" viewBox="0 0 194 116"
+                          xmlns="http://www.w3.org/2000/svg">
+                          <g fill-rule="evenodd">
+                              <path
+                                  d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z">
+                              </path>
+                              <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"></path>
+                          </g>
+                      </svg>
+                  </span>
+              </a>
+              <p class="mt-6 mr-4 text-base text-gray-500 dark:text-gray-300">Crafting the next-level of user experience and engagement.
+              </p>
+          </div>
+          <div class="block w-full pl-10 mt-6 text-sm lg:w-3/4 sm:flex lg:mt-0">
+              <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                      Product</li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600  dark:text-gray-300 dark:hover:text-cyan-300">Features</a>
+                  </li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Integrations</a>
+                  </li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Pricing</a>
+                  </li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">FAQ</a></li>
+              </ul>
+              <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                      Company</li>
+                  <li><a href="#_"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Privacy</a>
+                  </li>
+                  <li><a href="#_" class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Terms
+                          of
+                          Service</a></li>
+              </ul>
+              <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                  <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                      TailwindCSS
+                  </li>
+                  <li><a href="https://devdojo.com/tailwindcss/components"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
+                          Components</a></li>
+                  <li><a href="https://devdojo.com/tailwindcss/templates" 
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
+                          Templates</a></li>
+                  <li><a href="https://devdojo.com/tails"
+                          class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tails</a></li>
+              </ul>
+              <div class="flex flex-col w-full text-gray-700">
+                  <div class="inline-block px-3 py-2 mt-5 font-bold text-gray-800 uppercase md:mt-0">Follow Us</div>
+                  <div class="flex justify-start pl-4 mt-2">
+                      <a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                          target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" />
+                          </svg>
+                      </a>
+                      <a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                          target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
+                          </svg>
+                      </a>
+                      <a class="flex items-center block text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                          target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                          <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                          </svg>
+                      </a>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class=" pt-6 mt-10 text-center text-gray-400 dark:text-cyan-300 border-t border-gray-100">© 2020 Landmark. All rights
+          reserved.</div>
+      </footer>
+  
+  
+    <!-- footer 47 end -->
+  
+
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/contact_page/2_contact_page.html b/public/template/contact_page/2_contact_page.html
new file mode 100644
index 0000000..db9e4c2
--- /dev/null
+++ b/public/template/contact_page/2_contact_page.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>About page 2</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/contact_page/3_contact_page.html b/public/template/contact_page/3_contact_page.html
new file mode 100644
index 0000000..3dcebb4
--- /dev/null
+++ b/public/template/contact_page/3_contact_page.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>About page 3</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/service_page/1_service_page.html b/public/template/service_page/1_service_page.html
new file mode 100644
index 0000000..bfe3627
--- /dev/null
+++ b/public/template/service_page/1_service_page.html
@@ -0,0 +1,690 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Service page 1</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+    <!-- header 24 start --> 
+
+    <style>
+        @media(max-width:1520px) {
+            .left-svg {
+                display: none;
+            }
+        }
+  
+        /* small css for the mobile nav close */
+        #nav-mobile-btn.close span:first-child {
+            transform: rotate(45deg);
+            top: 4px;
+            position: relative;
+            background: #a0aec0;
+        }
+  
+        #nav-mobile-btn.close span:nth-child(2) {
+            transform: rotate(-45deg);
+            margin-top: 0px;
+            background: #a0aec0;
+        }
+    </style>
+  
+      <header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
+        <div
+            class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
+  
+            <a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
+                <svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <g fill-rule="evenodd">
+                        <path
+                            d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
+                        <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
+                    </g>
+                </svg>
+                <span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
+            </a>
+  
+            <nav id="nav"
+                class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
+                <a href="#"
+                    class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600 ">Home</a>
+                <a href="#features"
+                    class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Features</a>
+                <a href="#pricing"
+                    class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Pricing</a>
+                <a href="#testimonials"
+                    class="font-bold duration-100 transition-color hover:text-indigo-600 dark:text-pink-500 dark:hover:text-indigo-600">Testimonials</a>
+                <div class="flex flex-col w-full font-medium border-t border-gray-200 md:hidden">
+                    <a href="#_" class="w-full py-2 font-bold text-center text-pink-500 ">Login</a>
+                    <a href="#_"
+                        class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
+                        Started</a>
+                </div>
+            </nav>
+  
+            <div
+                class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
+                <a href="#_"
+                    class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
+                <a href="#_"
+                    class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
+                    Started</a>
+                <svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
+                    viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <defs>
+                        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
+                            <stop stop-color="#E614F2" offset="0%" />
+                            <stop stop-color="#FC3832" offset="100%" />
+                        </linearGradient>
+                        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
+                            <stop stop-color="#657DE9" offset="0%" />
+                            <stop stop-color="#1C0FD7" offset="100%" />
+                        </linearGradient>
+                        <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                            id="a">
+                            <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                            <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
+                        </filter>
+                        <filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
+                            id="d">
+                            <feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
+                            <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+                            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
+                        </filter>
+                        <path
+                            d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
+                            id="b" />
+                        <path
+                            d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
+                            id="e" />
+                    </defs>
+                    <g fill="none" fill-rule="evenodd" opacity=".9">
+                        <g transform="rotate(65 416.452 409.167)">
+                            <use fill="#000" filter="url(#a)" xlink:href="#b" />
+                            <use fill="url(#c)" xlink:href="#b" />
+                        </g>
+                        <g transform="rotate(29 421.929 414.496)">
+                            <use fill="#000" filter="url(#d)" xlink:href="#e" />
+                            <use fill="url(#f)" xlink:href="#e" />
+                        </g>
+                    </g>
+                </svg>
+            </div>
+  
+            <div id="nav-mobile-btn"
+                class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
+                <span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
+                <span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
+            </div>
+  
+        </div>
+      </header>
+  
+      <script>
+        if (document.getElementById('nav-mobile-btn')) {
+            document.getElementById('nav-mobile-btn').addEventListener('click', function () {
+                if (this.classList.contains('close')) {
+                    document.getElementById('nav').classList.add('hidden');
+                    this.classList.remove('close');
+                } else {
+                    document.getElementById('nav').classList.remove('hidden');
+                    this.classList.add('close');
+                }
+            });
+        }
+      </script>
+      
+    <!-- header 24 end --> 
+  
+
+
+
+    <!-- article 4 start --> 
+  
+    <div class="p-5 mx-auto sm:p-10 md:p-16 dark:bg-gray-800 dark:text-gray-100">
+    <div class="flex flex-col max-w-3xl mx-auto overflow-hidden rounded">
+        <img src="https://source.unsplash.com/random/480x360/?work" alt="" class="w-auto h-auto sm:h-96 dark:bg-gray-500">
+        <div class="p-6 pb-12 m-4 mx-auto -mt-16 space-y-6 lg:max-w-2xl sm:px-10 sm:mx-12 lg:rounded-md bg-gray-300 dark:bg-gray-900">
+            <div class="space-y-2">
+                <a rel="noopener noreferrer" href="#" class="inline-block text-2xl font-semibold sm:text-3xl">The Best Activewear from the Nordstrom Anniversary Sale</a>
+                <p class="text-xs dark:text-gray-400">By
+                <a rel="noopener noreferrer" href="#" class="text-xs hover:underline">Leroy Jenkins</a>
+                </p>
+            </div>
+            <div class="dark:text-gray-100">
+                <p>Insert the actual text content here...</p>
+            </div>
+        </div>
+    </div>
+    </div>
+    
+    <!-- article 4 end -->
+  
+
+
+
+    <!-- section 1 start --> 
+
+
+    <style>
+        .accordion-content {
+        transition: max-height 0.3s ease-out, padding 0.3s ease;
+        
+        }
+    </style>
+
+  
+      <section class="bg-white dark:bg-gray-800">
+          <div class="container px-6 py-8 mx-auto">
+              <div class="items-center md:flex">
+
+                <div class=" grid place-items-center md:place-items-start ">
+                    <div class="w-12/12 md:w-6/12  rounded border">
+                    <div class="bg-white dark:bg-gray-800 p-10 shadow-sm">
+                        <h3 class="text-lg font-medium dark:text-indigo-600 text-gray-800">What We Do?  </h3>
+                        <p class="text-sm font-light dark:text-gray-100 text-gray-600 my-3">
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis cumque laboriosam at dolor ullam aliquam, 
+                        </p>
+        
+                        <div class="h-1 w-full mx-auto border-b my-5"></div>
+        
+                        <!-- What is term -->
+                        <div class="transition hover:bg-indigo-50 rounded-lg ">
+                        <!-- header -->
+                        <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
+                            <i class="fas fa-plus"></i>
+                            <h3>What is term?</h3>
+                        </div>
+                        <!-- Content -->
+                        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
+                            <p class="leading-6 font-light pl-9 text-justify">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos veritatis beatae qui soluta fugiat dolorem, cumque voluptas at? Debitis error facere nobis distinctio quas provident perferendis pers 
+                            </p>
+                            <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
+                        </div>
+                        </div>
+            
+        
+                        <!-- Accordion Wrapper -->
+                        <div class="transition hover:bg-indigo-50 rounded-lg">
+                        <!-- header -->
+                        <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
+                            <i class="fas fa-plus"></i>
+                            <h3>How can it be defined?</h3>
+                        </div>
+                        <!-- Content -->
+                        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
+                            <p class="leading-6 font-light pl-9 text-justify">
+                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis dolorem quisquam aperiam facilis, sapiente quasi alias? At laudantium explicabo corrupti odio ullam sint exercitationem quisquam incidunt odit delectus? Architecto, ratione!
+                            </p>
+                            <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
+                        </div>
+                        </div>
+        
+                        <!-- Accordion Wrapper -->
+                        <div class="transition hover:bg-indigo-50 rounded-lg">
+                        <!-- header -->
+                        <div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
+                            <i class="fas fa-plus"></i>
+                            <h3>Chamber reached do he nothing be?</h3>
+                        </div>
+                        <!-- Content -->
+                        <div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
+                            <p class="leading-6 font-light pl-9 text-justify">
+                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo saepe quae quisquam explicabo voluptas eum sapiente maiores, libero fuga ipsam commodi asperiores consectetur aliquam, quia, laborum vero pariatur quasi! Harum?
+                            </p>
+                            <button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
+                        </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+    
+
+                <div class="mt-8 lg:mt-0 ">
+                    <div class="flex items-center justify-center lg:justify-end">
+                        <div class="">
+                        <!-- https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80 -->
+                            <img class="object-cover object-center h-full rounded-md shadow" src="https://source.unsplash.com/random/?tree" alt="">
+                        </div>
+                    </div>
+                </div>
+              </div>
+          </div>
+      </section>
+       
+        <script>
+        const accordionHeader = document.querySelectorAll(".accordion-header");
+        accordionHeader.forEach((header) => {
+            header.addEventListener("click", () => {
+                const accordionContent = header.parentElement.querySelector(".accordion-content");
+                let accordionMaxHeight = accordionContent.style.maxHeight;
+
+                // Condition handling
+                if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
+                accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
+                header.querySelector(".fas").classList.remove("fa-plus");
+                header.querySelector(".fas").classList.add("fa-minus");
+                header.parentElement.classList.add("bg-indigo-50");
+                } else {
+                accordionContent.style.maxHeight = `0px`;
+                header.querySelector(".fas").classList.add("fa-plus");
+                header.querySelector(".fas").classList.remove("fa-minus");
+                header.parentElement.classList.remove("bg-indigo-50");
+                }
+            });
+        });
+        </script>
+    <!-- section 1 end -->
+  
+
+
+    <!-- timeline 5 start --> 
+    <section class="dark:bg-gray-800">
+        
+        <div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative py-20">
+            <h1 class="text-3xl text-center font-bold text-indigo-500">Steps We Take </h1>
+            <div class="border-l-2 mt-10">
+                <!-- Card 1 -->
+                <div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-indigo-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
+                    <!-- Dot Follwing the Left Vertical Line -->
+                    <div class="w-5 h-5 bg-indigo-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
+
+                    <!-- Line that connecting the box with the vertical line -->
+                    <div class="w-10 h-1 bg-blue-300 absolute -left-10 z-0"></div>
+
+                    <!-- Content that showing in the box -->
+                    <div class="flex-auto">
+                    <h1 class="text-lg">Concept</h1>
+                    <h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
+                    <h3>Classroom</h3>
+                    </div>
+                    <a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
+                </div>
+
+                <!-- Card 2 -->
+                <div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-indigo-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
+                    <!-- Dot Follwing the Left Vertical Line -->
+                    <div class="w-5 h-5 bg-indigo-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
+
+                    <!-- Line that connecting the box with the vertical line -->
+                    <div class="w-10 h-1 bg-indigo-300 absolute -left-10 z-0"></div>
+
+                    <!-- Content that showing in the box -->
+                    <div class="flex-auto">
+                    <h1 class="text-lg">Prepare</h1>
+                    <h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
+                    <h3>Classroom</h3>
+                    </div>
+                    <a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
+                </div>
+
+                <!-- Card 3 -->
+                <div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-indigo-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
+                    <!-- Dot Follwing the Left Vertical Line -->
+                    <div class="w-5 h-5 bg-indigo-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
+
+                    <!-- Line that connecting the box with the vertical line -->
+                    <div class="w-10 h-1 bg-indigo-300 absolute -left-10 z-0"></div>
+
+                    <!-- Content that showing in the box -->
+                    <div class="flex-auto">
+                    <h1 class="text-lg">Retouch</h1>
+                    <h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
+                    <h3>Classroom</h3>
+                    </div>
+                    <a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
+                </div>
+ 
+            </div>
+        </div>
+    
+    </section>
+    <!-- timeline 5 end -->
+
+
+
+  <!-- pricing 18 start --> 
+
+  <div class="relative px-8 py-10 bg-white dark:bg-gray-800 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
+
+    <div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
+        <h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
+        <h3
+            class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center dark:text-indigo-600 text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
+            Simple, Transparent Pricing for Everyone</h3>
+
+        <div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
+            <!-- Basic Pricing -->
+            <div class="relative flex flex-col items-center block sm:flex-row">
+                <div
+                    class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
+                    <div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
+                        <div
+                            class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
+                            <h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
+                                    class="ml-2 font-light">Plan</span></h3>
+                            <h4
+                                class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
+                                <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
+                            <p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
+                                features below.
+                            </p>
+                        </div>
+
+                        <div class="flex flex-wrap px-6 mt-8">
+                            <ul>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">One More Feature</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="flex items-center block p-8 uppercase">
+                            <a href="#_"
+                                class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
+                                This Plan</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Pro Pricing -->
+                <div
+                    class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
+                    <div
+                        class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
+                        Most Popular</div>
+                    <div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
+                        <h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
+                                class="ml-2 font-light">Plan</span></h3>
+                        <h4
+                            class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
+                            <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
+                        <p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
+                            access to the
+                            following:</p>
+                    </div>
+                    <div class="flex justify-start pl-12 mt-8 sm:justify-start">
+                        <ul>
+                            <li class="flex items-center">
+                                <div class="p-2 text-green-500 rounded-full fill-current">
+                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                    </svg>
+                                </div>
+                                <span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
+                            </li>
+                            <li class="flex items-center">
+                                <div class="p-2 text-green-500 rounded-full fill-current ">
+                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                    </svg>
+                                </div>
+                                <span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
+                            </li>
+                            <li class="flex items-center">
+                                <div class="p-2 text-green-500 rounded-full fill-current ">
+                                    <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                        stroke-linejoin="round">
+                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                    </svg>
+                                </div>
+                                <span class="ml-3 text-lg text-gray-700">And One More</span>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="flex items-center block p-8 uppercase">
+                        <a href="#_"
+                            class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
+                            This Plan</a>
+                    </div>
+                </div>
+                <!-- Premium Pricing -->
+                <div
+                    class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
+                    <div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
+                        <div
+                            class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
+                            <h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
+                                    class="ml-2 font-light">Plan</span></h3>
+                            <h4
+                                class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
+                                <span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
+                            <p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
+                                all the following
+                                features:</p>
+                        </div>
+                        <div class="flex flex-wrap px-8 mt-8">
+                            <ul>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <div class="p-2 text-green-500 rounded-full fill-current ">
+                                        <svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
+                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                            stroke-linejoin="round">
+                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                                        </svg>
+                                    </div>
+                                    <span class="ml-3 text-lg text-gray-700">And One More</span>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div class="flex items-center block p-8 uppercase">
+                            <a href="#_"
+                                class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
+                                This Plan</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+  </div>
+
+  
+  <!-- pricing 18 end -->
+
+
+
+
+    <!-- footer 47 start --> 
+
+    <footer class="px-4 pt-12 pb-8 text-white bg-white dark:bg-gray-800 border-t border-gray-200">
+        <div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
+            <div class="w-full pl-12 mr-4 text-left lg:w-1/4 sm:text-center sm:pl-0 lg:text-left">
+                <a href="/"
+                    class="flex justify-start text-left sm:text-center lg:text-left sm:justify-center lg:justify-start">
+                    <span class="flex items-start sm:items-center">
+                        <svg class="w-auto h-6 text-gray-900 dark:text-cyan-300 fill-current" viewBox="0 0 194 116"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <g fill-rule="evenodd">
+                                <path
+                                    d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z">
+                                </path>
+                                <path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"></path>
+                            </g>
+                        </svg>
+                    </span>
+                </a>
+                <p class="mt-6 mr-4 text-base text-gray-500 dark:text-gray-300">Crafting the next-level of user experience and engagement.
+                </p>
+            </div>
+            <div class="block w-full pl-10 mt-6 text-sm lg:w-3/4 sm:flex lg:mt-0">
+                <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                    <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                        Product</li>
+                    <li><a href="#_"
+                            class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600  dark:text-gray-300 dark:hover:text-cyan-300">Features</a>
+                    </li>
+                    <li><a href="#_"
+                            class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Integrations</a>
+                    </li>
+                    <li><a href="#_"
+                            class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Pricing</a>
+                    </li>
+                    <li><a href="#_"
+                            class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">FAQ</a></li>
+                </ul>
+                <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                    <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                        Company</li>
+                    <li><a href="#_"
+                            class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Privacy</a>
+                    </li>
+                    <li><a href="#_" class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Terms
+                            of
+                            Service</a></li>
+                </ul>
+                <ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
+                    <li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
+                        TailwindCSS
+                    </li>
+                    <li><a href="https://devdojo.com/tailwindcss/components"
+                            class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
+                            Components</a></li>
+                    <li><a href="https://devdojo.com/tailwindcss/templates" 
+                            class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
+                            Templates</a></li>
+                    <li><a href="https://devdojo.com/tails"
+                            class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tails</a></li>
+                </ul>
+                <div class="flex flex-col w-full text-gray-700">
+                    <div class="inline-block px-3 py-2 mt-5 font-bold text-gray-800 uppercase md:mt-0">Follow Us</div>
+                    <div class="flex justify-start pl-4 mt-2">
+                        <a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                            target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                            <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" />
+                            </svg>
+                        </a>
+                        <a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                            target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                            <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
+                            </svg>
+                        </a>
+                        <a class="flex items-center block text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
+                            target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
+                            <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class=" pt-6 mt-10 text-center text-gray-400 dark:text-cyan-300 border-t border-gray-100">© 2020 Landmark. All rights
+            reserved.</div>
+    </footer>
+    
+    
+    <!-- footer 47 end -->
+    
+      
+         
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/service_page/2_service_page.html b/public/template/service_page/2_service_page.html
new file mode 100644
index 0000000..99bd511
--- /dev/null
+++ b/public/template/service_page/2_service_page.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Service page 2</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file
diff --git a/public/template/service_page/3_service_page.html b/public/template/service_page/3_service_page.html
new file mode 100644
index 0000000..653c30b
--- /dev/null
+++ b/public/template/service_page/3_service_page.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <title>Service page 3</title>
+</head>
+<body>
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+     
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+  
+  </body>
+  </html>
\ No newline at end of file