fixed colors

src/components/Banner.jsx

@@ -2,7 +2,7 @@ import { XMarkIcon } from '@heroicons/react/20/solid'
 
 export default function Example() {
   return (
-    <div className="flex items-center gap-x-6 btn-gradient-dark px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+    <div className="flex items-center gap-x-6 btn-gradient px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
       <p className="text-sm leading-6 text-white">
         <a href="/events/versefest.html">
           <strong className="font-semibold">OurVerse FutureFest 2024</strong>

src/components/Bentosection.jsx

@@ -68,7 +68,7 @@ export default function BentoSection() {
           <div className="mt-10 flex gap-x-8">
           <a
               href="/features.html"
-              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
+              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold shadow-sm"
             >
               See Features
             </a>

src/components/Hero.jsx

@@ -16,7 +16,7 @@ export function Hero() {
           <h1 className="lg:mt-2 mt-0 font-display lg:text-2xl text-lg font-semibold tracking-tight text-gradient-dark">
             Beyond Traditional Video Calls.  
           </h1>
-          <div className="mt-4 space-y-6 mx-4 font-display section-text font-display ">
+          <div className="mt-4 space-y-6 mx-4 font-display section-text">
             <p>
             <span className='emphasis'>OurVerse</span> is a fully immersive metaverse platform, offering a space where virtual interactions 
             feel real, engaging, and limitless. Our metaverse is fully decentralized and <span className='emphasis text-gradient-dark'>powered by the ThreeFold Grid</span>, enabling global collaboration with enhanced security, flexibility and freedom.  
@@ -25,7 +25,7 @@ export function Hero() {
             Our mission is to break down the barriers to meaningful connection and collaboration. We believe that everyone, regardless of location or resources, should have access to immersive and engaging spaces where they can meet, create, and innovate together.
             </p>
             <br/>
-            <a href="/about" className="lg:text-base pt-4 text-sm font-mono text-cyan-600  hover:text-purple-600">
+            <a href="/about" className="lg:text-base pt-4 text-base font-mono font-semibold text-link">
                     <u>Learn More about OurVerse<span aria-hidden="true">→</span></u>
          </a>
           </div>

src/components/HeroFeature.jsx

@@ -64,7 +64,7 @@ import {
         <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
             <a
               href="#"
-              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
+              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold shadow-sm"
             >
               Try Now
             </a>

src/styles/tailwind.css

@@ -38,8 +38,7 @@
 
 
 .btn-gradient {
-  background-color: #443b62;
+  background-color: #6765b3;
-  background-image: linear-gradient(43deg, #302b4b 0%, #4b466e 47%, #766fa6 83%, #8780bc 100%);
   color: white;
   padding: 8px 15px;
   border: none;
@@ -104,8 +103,7 @@
 }
 
 .btn-gradient-dark2 {
-  background-color: #2e2542;
+  background-color: #5e4589;
-  background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 100%);
   color: white;
   padding: 8px 32px;
   border: none;
@@ -114,12 +112,11 @@
 }
 
 .btn-gradient-dark:hover {
-  background-image: linear-gradient(45deg, #3e2e5d 0%, #9a2a93 100%);
+  background-color: #2e2542;
 }
 
 .text-gradient-dark {
   background-color: #5e4589;
-  background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 25%,  #5e4589 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -136,7 +133,6 @@
 
 .text-gradient {
   background-color: #704fa8;
-  background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%,  #703bca 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -223,7 +219,6 @@
     line-height: 1.2; /* Equivalent to leading-normal */
     font-size: 2.25rem; /* Default for text-4xl */
     background-color: #5e4589;
-    background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%,  #703bca 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -242,9 +237,8 @@
       font-weight: 600; /* Equivalent to font-semibold */
       letter-spacing: -0.01em; /* Equivalent to tracking-tight */
       line-height: 1.2; /* Equivalent to leading-normal */
-      font-size: 1.25rem; /* Equivalent to text-xl */
+      font-size: 1.5rem; /* Equivalent to text-xl */
       background-color: #5e4589;
-      background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%,  #703bca 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -269,8 +263,8 @@
   }
 
   .section-text-light {
-    font-size: 1.25rem; /* matches 'text-lg', adjust to match 'lg:text-xl' for responsive design */
+    font-size: 1.1rem; /* matches 'text-lg', adjust to match 'lg:text-xl' for responsive design */
-    letter-spacing: 0.015em; /* matches 'tracking-tight' */
+    letter-spacing: -0.015em; /* matches 'tracking-tight' */
     line-height: 1.5rem; /* matches 'leading-tight' */
     color: #ffffff 
   }
@@ -280,6 +274,10 @@
       font-size: 1.25rem; /* matches 'lg:text-xl' for large screens */
       line-height: 1.85rem; /* matches 'leading-tight' */
     }
+    .section-text-light {
+      font-size: 1.25rem; /* matches 'lg:text-xl' for large screens */
+      line-height: 1.85rem; /* matches 'leading-tight' */
+    }
   }
   
 
@@ -374,8 +372,8 @@
 
 /* Button gradient for dark backgrounds */
 .btn-light {
-  background: radial-gradient(circle, #eee1ff 0%, #9971e0 100%); /* Radial gradient with #eee1ff in the center */
+  background:  #6765b3;
-  color: #341a55;
+  color:  white;
   padding: 8px 15px;
   border: none;
   cursor: pointer;
@@ -391,7 +389,7 @@
 
 /* Button gradient for light backgrounds */
 .btn-dark {
-  background: radial-gradient(circle, #5e4589 0%, #341a55 100%); /* Radial gradient dark purple */
+  background: #6765b3;
   color: white;
   padding: 10px 18px;
   border: none;
@@ -400,11 +398,11 @@
 }
 
 .btn-dark:hover {
-  background: radial-gradient(circle, #341a55 0%, #5e4589 100%); /* Reverse radial gradient on hover */
+  background: #27254a;
 }
 
 .text-link {
-  background-color: #703db7; /* Dark purple */
+  background-color: #6765b3; /* Dark purple */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -420,7 +418,7 @@
 }
 
 .btn-new {
-  background:  radial-gradient(circle, #7152a6 0%, #755bb2 0%, #5e4589 50%, #341a55 100%); /* Light purple gradient similar to the bird */
+  background: #27254a;
   color: #ffffff; /* Dark purple color similar to the text */
   padding: 8px 15px;
   border: none;