website: landing revamp with deploy demo and testimonial

website/landing/style.css

@@ -1139,6 +1139,22 @@ input[type="search"]::-webkit-search-results-decoration {
   transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out;
 }
 
+.pointer-events-none{
+  pointer-events: none;
+}
+
+.visible{
+  visibility: visible;
+}
+
+.collapse{
+  visibility: collapse;
+}
+
+.static{
+  position: static;
+}
+
 .absolute{
   position: absolute;
 }
@@ -1147,6 +1163,18 @@ input[type="search"]::-webkit-search-results-decoration {
   position: relative;
 }
 
+.inset-0{
+  inset: 0px;
+}
+
+.left-1\/2{
+  left: 50%;
+}
+
+.top-0{
+  top: 0px;
+}
+
 .top-2{
   top: 0.5rem;
 }
@@ -1164,6 +1192,10 @@ input[type="search"]::-webkit-search-results-decoration {
   margin-right: auto;
 }
 
+.-mt-5{
+  margin-top: -1.25rem;
+}
+
 .mb-1{
   margin-bottom: 0.25rem;
 }
@@ -1176,6 +1208,10 @@ input[type="search"]::-webkit-search-results-decoration {
   margin-bottom: 1rem;
 }
 
+.mb-6{
+  margin-bottom: 1.5rem;
+}
+
 .mb-8{
   margin-bottom: 2rem;
 }
@@ -1212,6 +1248,10 @@ input[type="search"]::-webkit-search-results-decoration {
   margin-top: 0.25rem;
 }
 
+.mt-10{
+  margin-top: 2.5rem;
+}
+
 .mt-12{
   margin-top: 3rem;
 }
@@ -1220,6 +1260,10 @@ input[type="search"]::-webkit-search-results-decoration {
   margin-top: 0.5rem;
 }
 
+.mt-3{
+  margin-top: 0.75rem;
+}
+
 .mt-4{
   margin-top: 1rem;
 }
@@ -1248,6 +1292,10 @@ input[type="search"]::-webkit-search-results-decoration {
   display: inline-flex;
 }
 
+.table{
+  display: table;
+}
+
 .grid{
   display: grid;
 }
@@ -1272,6 +1320,10 @@ input[type="search"]::-webkit-search-results-decoration {
   height: 6rem;
 }
 
+.h-3{
+  height: 0.75rem;
+}
+
 .h-4{
   height: 1rem;
 }
@@ -1284,10 +1336,18 @@ input[type="search"]::-webkit-search-results-decoration {
   height: 2rem;
 }
 
+.h-\[36rem\]{
+  height: 36rem;
+}
+
 .min-h-screen{
   min-height: 100vh;
 }
 
+.w-14{
+  width: 3.5rem;
+}
+
 .w-2{
   width: 0.5rem;
 }
@@ -1296,6 +1356,10 @@ input[type="search"]::-webkit-search-results-decoration {
   width: 0.625rem;
 }
 
+.w-3{
+  width: 0.75rem;
+}
+
 .w-4{
   width: 1rem;
 }
@@ -1308,6 +1372,10 @@ input[type="search"]::-webkit-search-results-decoration {
   width: 2rem;
 }
 
+.w-\[36rem\]{
+  width: 36rem;
+}
+
 .w-\[calc\(100\%\+1rem\)\]{
   width: calc(100% + 1rem);
 }
@@ -1332,6 +1400,10 @@ input[type="search"]::-webkit-search-results-decoration {
   max-width: 28rem;
 }
 
+.max-w-sm{
+  max-width: 24rem;
+}
+
 .max-w-xl{
   max-width: 36rem;
 }
@@ -1348,6 +1420,20 @@ input[type="search"]::-webkit-search-results-decoration {
   flex-grow: 1;
 }
 
+.-translate-x-1\/2{
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/3{
+  --tw-translate-y: -33.333333%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform{
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .select-none{
   -webkit-user-select: none;
           user-select: none;
@@ -1389,6 +1475,22 @@ input[type="search"]::-webkit-search-results-decoration {
   justify-content: space-between;
 }
 
+.gap-1{
+  gap: 0.25rem;
+}
+
+.gap-1\.5{
+  gap: 0.375rem;
+}
+
+.gap-10{
+  gap: 2.5rem;
+}
+
+.gap-12{
+  gap: 3rem;
+}
+
 .gap-2{
   gap: 0.5rem;
 }
@@ -1397,6 +1499,10 @@ input[type="search"]::-webkit-search-results-decoration {
   gap: 0.75rem;
 }
 
+.gap-4{
+  gap: 1rem;
+}
+
 .gap-6{
   gap: 1.5rem;
 }
@@ -1491,6 +1597,10 @@ input[type="search"]::-webkit-search-results-decoration {
   border-bottom-width: 2px;
 }
 
+.border-l-\[3px\]{
+  border-left-width: 3px;
+}
+
 .border-t{
   border-top-width: 1px;
 }
@@ -1514,10 +1624,35 @@ input[type="search"]::-webkit-search-results-decoration {
   border-color: rgb(228 228 231 / var(--tw-border-opacity));
 }
 
+.border-zinc-400{
+  --tw-border-opacity: 1;
+  border-color: rgb(161 161 170 / var(--tw-border-opacity));
+}
+
 .border-zinc-700\/50{
   border-color: rgb(63 63 70 / 0.5);
 }
 
+.border-zinc-800{
+  --tw-border-opacity: 1;
+  border-color: rgb(39 39 42 / var(--tw-border-opacity));
+}
+
+.bg-\[\#5bbf6a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(91 191 106 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#e05a4f\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 90 79 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#e0a552\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 165 82 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1553,6 +1688,11 @@ input[type="search"]::-webkit-search-results-decoration {
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
+.bg-zinc-700{
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 63 70 / var(--tw-bg-opacity));
+}
+
 .bg-zinc-800{
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
@@ -1563,6 +1703,11 @@ input[type="search"]::-webkit-search-results-decoration {
   background-color: rgb(24 24 27 / var(--tw-bg-opacity));
 }
 
+.bg-zinc-950{
+  --tw-bg-opacity: 1;
+  background-color: rgb(9 9 11 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-r{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1656,11 +1801,26 @@ input[type="search"]::-webkit-search-results-decoration {
   padding-bottom: 3rem;
 }
 
+.py-16{
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
 .py-2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.py-3{
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-3\.5{
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
 .py-4{
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1683,6 +1843,10 @@ input[type="search"]::-webkit-search-results-decoration {
   padding-left: 1rem;
 }
 
+.pl-5{
+  padding-left: 1.25rem;
+}
+
 .pt-32{
   padding-top: 8rem;
 }
@@ -1711,6 +1875,10 @@ input[type="search"]::-webkit-search-results-decoration {
   font-family: Inter Tight, sans-serif;
 }
 
+.font-mono{
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .text-2xl{
   font-size: 1.5rem;
   line-height: 1.415;
@@ -1729,6 +1897,22 @@ input[type="search"]::-webkit-search-results-decoration {
   letter-spacing: -0.017em;
 }
 
+.text-7xl{
+  font-size: 4.5rem;
+  line-height: 1.1666;
+  letter-spacing: -0.017em;
+}
+
+.text-\[13px\]{
+  font-size: 13px;
+}
+
+.text-base{
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: -0.017em;
+}
+
 .text-lg{
   font-size: 1.125rem;
   line-height: 1.5;
@@ -1740,6 +1924,11 @@ input[type="search"]::-webkit-search-results-decoration {
   line-height: 1.5715;
 }
 
+.text-xs{
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
 .font-bold{
   font-weight: 700;
 }
@@ -1748,14 +1937,43 @@ input[type="search"]::-webkit-search-results-decoration {
   font-weight: 500;
 }
 
+.font-normal{
+  font-weight: 400;
+}
+
 .font-semibold{
   font-weight: 600;
 }
 
+.uppercase{
+  text-transform: uppercase;
+}
+
 .not-italic{
   font-style: normal;
 }
 
+.tabular-nums{
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+
+.leading-none{
+  line-height: 1;
+}
+
+.leading-relaxed{
+  line-height: 1.625;
+}
+
+.leading-snug{
+  line-height: 1.375;
+}
+
+.tracking-\[0\.18em\]{
+  letter-spacing: 0.18em;
+}
+
 .tracking-tight{
   letter-spacing: -0.025em;
 }
@@ -1790,6 +2008,11 @@ input[type="search"]::-webkit-search-results-decoration {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-500{
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
 .text-indigo-600{
   --tw-text-opacity: 1;
   color: rgb(79 70 229 / var(--tw-text-opacity));
@@ -1814,6 +2037,11 @@ input[type="search"]::-webkit-search-results-decoration {
   color: rgb(228 228 231 / var(--tw-text-opacity));
 }
 
+.text-zinc-300{
+  --tw-text-opacity: 1;
+  color: rgb(212 212 216 / var(--tw-text-opacity));
+}
+
 .text-zinc-400{
   --tw-text-opacity: 1;
   color: rgb(161 161 170 / var(--tw-text-opacity));
@@ -1848,11 +2076,35 @@ input[type="search"]::-webkit-search-results-decoration {
   text-decoration-line: underline;
 }
 
+.no-underline{
+  text-decoration-line: none;
+}
+
+.decoration-zinc-300{
+  text-decoration-color: #d4d4d8;
+}
+
+.decoration-zinc-400{
+  text-decoration-color: #a1a1aa;
+}
+
+.underline-offset-2{
+  text-underline-offset: 2px;
+}
+
+.underline-offset-4{
+  text-underline-offset: 4px;
+}
+
 .antialiased{
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.opacity-20{
+  opacity: 0.2;
+}
+
 .shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1882,11 +2134,21 @@ input[type="search"]::-webkit-search-results-decoration {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-zinc-950\/40{
+  --tw-shadow-color: rgb(9 9 11 / 0.4);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .blur{
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.blur-3xl{
+  --tw-blur: blur(64px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1899,6 +2161,18 @@ input[type="search"]::-webkit-search-results-decoration {
   transition-duration: 150ms;
 }
 
+.transition-colors{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform{
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.zinc\.50\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{
   background: linear-gradient(#fff,#fafafa) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box;
 }
@@ -1933,6 +2207,11 @@ input[type="search"]::-webkit-search-results-decoration {
   top: -3rem;
 }
 
+.before\:left-1\/2::before{
+  content: var(--tw-content);
+  left: 50%;
+}
+
 .before\:-z-10::before{
   content: var(--tw-content);
   z-index: -10;
@@ -1953,6 +2232,12 @@ input[type="search"]::-webkit-search-results-decoration {
   width: 24rem;
 }
 
+.before\:-translate-x-1\/2::before{
+  content: var(--tw-content);
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .before\:rounded-full::before{
   content: var(--tw-content);
   border-radius: 9999px;
@@ -2007,6 +2292,21 @@ input[type="search"]::-webkit-search-results-decoration {
   top: 0px;
 }
 
+.after\:top-1\/2::after{
+  content: var(--tw-content);
+  top: 50%;
+}
+
+.after\:hidden::after{
+  content: var(--tw-content);
+  display: none;
+}
+
+.after\:h-8::after{
+  content: var(--tw-content);
+  height: 2rem;
+}
+
 .after\:h-full::after{
   content: var(--tw-content);
   height: 100%;
@@ -2017,6 +2317,33 @@ input[type="search"]::-webkit-search-results-decoration {
   width: 24rem;
 }
 
+.after\:w-px::after{
+  content: var(--tw-content);
+  width: 1px;
+}
+
+.after\:-translate-y-1\/2::after{
+  content: var(--tw-content);
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.after\:border-l::after{
+  content: var(--tw-content);
+  border-left-width: 1px;
+}
+
+.after\:border-dashed::after{
+  content: var(--tw-content);
+  border-style: dashed;
+}
+
+.after\:border-zinc-300::after{
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-color: rgb(212 212 216 / var(--tw-border-opacity));
+}
+
 .after\:bg-gradient-to-l::after{
   content: var(--tw-content);
   background-image: linear-gradient(to left, var(--tw-gradient-stops));
@@ -2029,11 +2356,21 @@ input[type="search"]::-webkit-search-results-decoration {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.last\:after\:hidden:last-child::after{
+  content: var(--tw-content);
+  display: none;
+}
+
 .hover\:bg-zinc-800:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
 
+.hover\:text-zinc-100:hover{
+  --tw-text-opacity: 1;
+  color: rgb(244 244 245 / var(--tw-text-opacity));
+}
+
 .hover\:text-zinc-900:hover{
   --tw-text-opacity: 1;
   color: rgb(24 24 27 / var(--tw-text-opacity));
@@ -2043,6 +2380,14 @@ input[type="search"]::-webkit-search-results-decoration {
   text-decoration-line: underline;
 }
 
+.hover\:decoration-zinc-100:hover{
+  text-decoration-color: #f4f4f5;
+}
+
+.hover\:decoration-zinc-400:hover{
+  text-decoration-color: #a1a1aa;
+}
+
 .focus\:border-black:focus{
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -2122,6 +2467,21 @@ input[type="search"]::-webkit-search-results-decoration {
   --tw-ring-offset-width: 2px;
 }
 
+.group:hover .group-hover\:translate-x-0{
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:translate-x-0\.5{
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:text-zinc-800{
+  --tw-text-opacity: 1;
+  color: rgb(39 39 42 / var(--tw-text-opacity));
+}
+
 @supports (overflow:clip){
   .supports-\[overflow\:clip\]\:overflow-clip{
     overflow: clip;
@@ -2204,6 +2564,12 @@ input[type="search"]::-webkit-search-results-decoration {
     padding-right: 1.5rem;
   }
 
+  .sm\:text-3xl{
+    font-size: 2rem;
+    line-height: 1.3125;
+    letter-spacing: -0.017em;
+  }
+
   .sm\:text-\[0\.9375rem\]{
     font-size: 0.9375rem;
   }
@@ -2222,6 +2588,11 @@ input[type="search"]::-webkit-search-results-decoration {
     grid-column: span 6 / span 6;
   }
 
+  .md\:-mx-5{
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+  }
+
   .md\:mb-0{
     margin-bottom: 0px;
   }
@@ -2230,6 +2601,10 @@ input[type="search"]::-webkit-search-results-decoration {
     max-width: 56rem;
   }
 
+  .md\:max-w-none{
+    max-width: none;
+  }
+
   .md\:grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2238,6 +2613,19 @@ input[type="search"]::-webkit-search-results-decoration {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-4{
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .md\:gap-0{
+    gap: 0px;
+  }
+
+  .md\:px-5{
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .md\:py-12{
     padding-top: 3rem;
     padding-bottom: 3rem;
@@ -2248,6 +2636,11 @@ input[type="search"]::-webkit-search-results-decoration {
     padding-bottom: 5rem;
   }
 
+  .md\:py-24{
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
   .md\:pb-16{
     padding-bottom: 4rem;
   }
@@ -2260,6 +2653,12 @@ input[type="search"]::-webkit-search-results-decoration {
     padding-top: 10rem;
   }
 
+  .md\:text-3xl{
+    font-size: 2rem;
+    line-height: 1.3125;
+    letter-spacing: -0.017em;
+  }
+
   .md\:text-4xl{
     font-size: 2.5rem;
     line-height: 1.25;
@@ -2271,9 +2670,22 @@ input[type="search"]::-webkit-search-results-decoration {
     line-height: 1.2;
     letter-spacing: -0.017em;
   }
+
+  .md\:after\:block::after{
+    content: var(--tw-content);
+    display: block;
+  }
 }
 
 @media (min-width: 1024px){
+  .lg\:order-1{
+    order: 1;
+  }
+
+  .lg\:order-2{
+    order: 2;
+  }
+
   .lg\:col-span-2{
     grid-column: span 2 / span 2;
   }
@@ -2282,6 +2694,10 @@ input[type="search"]::-webkit-search-results-decoration {
     grid-column: span 8 / span 8;
   }
 
+  .lg\:col-start-2{
+    grid-column-start: 2;
+  }
+
   .lg\:mt-24{
     margin-top: 6rem;
   }
@@ -2302,10 +2718,18 @@ input[type="search"]::-webkit-search-results-decoration {
     max-width: 72rem;
   }
 
+  .lg\:max-w-md{
+    max-width: 28rem;
+  }
+
   .lg\:max-w-none{
     max-width: none;
   }
 
+  .lg\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .lg\:grid-cols-3{
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -2329,6 +2753,12 @@ input[type="search"]::-webkit-search-results-decoration {
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
+
+  .lg\:text-4xl{
+    font-size: 2.5rem;
+    line-height: 1.25;
+    letter-spacing: -0.017em;
+  }
 }
 
 @media (min-width: 1536px){