Merge branch 'development'

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/Cta.jsx

@@ -16,8 +16,8 @@ export default function CTA() {
             <p className="mt-2 text-3xl font-bold tracking-tight text-gradient sm:text-4xl">Powered by ThreeFold</p>
             <p className="mt-6 text-base leading-7 text-gray-900">
             OurVerse is powered by the ThreeFold Grid, a decentralized infrastructure that ensures your metaverse experience is secure, scalable and truly independent.<br/><br/>
-            By leveraging this innovative technology, we provide a fully decentralized platform where data confidentiality is paramount, and your interactions remain free from centralized control.</p>
-            <div className="mt-8">
+            Our proximity to ThreeFold's edge computing also allows rendering speeds unmatched in the industry. This allows streaming and graphic rendering at super high speeds with pixel perfect imagery, making Our Verse the first metaverse to achieve this status. Even on mobile devices, GPU rendering shows quality previously not available for such experiences.</p>
+            <div className="mt-8 inline-flex gap-x-6">
               <a
                 href="/community.html"
                 className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-base font-semibold text-white shadow-sm btn-dark"

src/components/Events.jsx

@@ -58,7 +58,7 @@ const featuredPost = {
                     >
                       Learn More
                     </a>
-                    <a href="/events" className="text-base font-semibold leading-6 text-linkgo">
+                    <a href="/events" className="text-base font-semibold leading-6 text-link">
                       See more events <span aria-hidden="true">→</span>
                     </a>
                   </div>

src/components/Featureshome.jsx

@@ -185,7 +185,9 @@ export default function Featureshome() {
                   </div>
                 ))}
                 <div className="mt-6">
-                  <a href="/features" className="inline-flex rounded-2xl px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm btn-dark"
+                  <a
+                    href="/features"
+                    className="inline-flex rounded-2xl px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm btn-gradient-dark"
                   >
                     Explore 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

@@ -43,9 +43,6 @@ import {
           <source src="/videos/herohow.mp4" type="video/mp4" />
           Your browser does not support the video tag.
          </video>
-            <div aria-hidden="true" className="relative">
-              <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]" />
-            </div>
           </div>
         </div>
         <div className="mt-4 mx-auto lg:mt-16 max-w-5xl px-6 mt-20 md:mt-24 lg:px-8 text-center items-center">
@@ -64,7 +61,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/components/HeroFeature3.jsx

@@ -36,7 +36,7 @@ export default function HeroFeature3() {
             <h2 className="text-intro">Everything you need</h2>
             <p className="mt-2 text-3xl font-bold tracking-tight text-gradient sm:text-4xl">Multi-purpose Feature</p>
             <p className="mt-6 text-base leading-7 text-gray-600">
-              <span className='text-gradient-light font-semibold'>The HeroVerse 3D </span> system offers several advantages that make it a powerful tool for creating virtual environments:
+              <span className='text-gradient font-semibold'>The HeroVerse 3D </span> system offers several advantages that make it a powerful tool for creating virtual environments:
             </p>
           </div>
           <dl className="col-span-2 grid grid-cols-1 gap-x-8 gap-y-10 text-base leading-7 text-gray-600 sm:grid-cols-2 lg:gap-y-16">

src/styles/tailwind.css

@@ -38,8 +38,7 @@
 
 
 .btn-gradient {
-  background-color: #443b62;
-  background-image: linear-gradient(43deg, #302b4b 0%, #4b466e 47%, #766fa6 83%, #8780bc 100%);
+  background-color: #6765b3;
   color: white;
   padding: 8px 15px;
   border: none;
@@ -104,8 +103,7 @@
 }
 
 .btn-gradient-dark2 {
-  background-color: #2e2542;
-  background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 100%);
+  background-color: #5e4589;
   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 */
-    letter-spacing: 0.015em; /* matches 'tracking-tight' */
+    font-size: 1.1rem; /* matches 'text-lg', adjust to match 'lg:text-xl' for responsive design */
+    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 */
-  color: #341a55;
+  background:  #6765b3;
+  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;