From e3d6b2f0f93877905b389d33653e288771812656 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 7 May 2025 14:47:53 +0200
Subject: [PATCH] add

---
 dist/output.css | 17 +++++++++++------
 src/index.html  |  8 ++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/dist/output.css b/dist/output.css
index 1ad550f..7a04178 100644
--- a/dist/output.css
+++ b/dist/output.css
@@ -1276,6 +1276,11 @@ body:is(.dark *) {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}
+
 .bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
@@ -1524,9 +1529,9 @@ body:is(.dark *) {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.ring-indigo-500 {
+.ring-gray-400 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
 }
 
 .ring-white\/10 {
@@ -1625,9 +1630,9 @@ body:is(.dark *) {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:bg-indigo-400:hover {
+.hover\:bg-gray-600:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
 }
 
 .hover\:bg-white\/20:hover {
@@ -1652,8 +1657,8 @@ body:is(.dark *) {
   outline-offset: 2px;
 }
 
-.focus-visible\:outline-indigo-500:focus-visible {
-  outline-color: #6366f1;
+.focus-visible\:outline-gray-500:focus-visible {
+  outline-color: #6b7280;
 }
 
 .focus-visible\:outline-white:focus-visible {
diff --git a/src/index.html b/src/index.html
index a39a073..e61bf38 100644
--- a/src/index.html
+++ b/src/index.html
@@ -220,7 +220,7 @@
                 </div>
             </section>
 
-             <!-- Home Section 8 -->
+             <!-- Home Section 9 -->
              <div class="bg-BLACK py-24 sm:py-32">
                 <div class="mx-auto max-w-7xl px-6 lg:px-8">
                   <div class="mx-auto max-w-5xl text-center">
@@ -290,10 +290,10 @@
                           </li>
                       </ul>
                     </div>
-                    <div class="rounded-3xl bg-white/5 p-8 ring-2 ring-indigo-500 xl:p-10">
+                    <div class="rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10">
                       <div class="flex items-center justify-between gap-x-4">
                         <h3 id="tier-startup" class="text-lg/8 font-semibold text-white">For Companies</h3>
-                        <p class="rounded-full bg-indigo-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
+                        <p class="rounded-full bg-gray-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
                       </div>
                       <p class="mt-4 text-sm/6 text-gray-300">A plan that scales with your rapidly growing business.</p>
                       <p class="mt-6 flex items-baseline gap-x-1">
@@ -302,7 +302,7 @@
                         <!-- Payment frequency, update based on frequency toggle state -->
                         <span class="text-sm/6 font-semibold text-gray-300">/ user / month</span>
                       </p>
-                      <a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-indigo-500 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Buy plan</a>
+                      <a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-gray-500 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">Buy plan</a>
                       <ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
                         <li class="flex gap-x-3">
                           <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">