test2

src/components/Abouthero.jsx

@@ -17,8 +17,13 @@ export default function Abouthero() {
       </div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
+<<<<<<< HEAD
           <h2 className="lg:text-6xl font-semibold tracking-tight lg:max-w-xl max-w-md leading-tight text-gradient text-3xl">At OurVerse, <br/>
           we go beyond traditional video calls. </h2>
+=======
+          <h2 className="lg:text-6xl font-semibold tracking-tight lg:max-w-2xl max-w-xl leading-tight text-white text-3xl">
+          Beyond Traditional Video Calls. </h2>
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
           <p className="mt-6 section-text-light  font-display">
           Our immersive decentralized metaverse platform brings people together in a dynamic, interactive environment where meetings and events feel REAL. 
           </p>
@@ -27,7 +32,11 @@ export default function Abouthero() {
           <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
               href="#"
+<<<<<<< HEAD
               className="rounded-2xl btn-gradient-dark2 font-semibold px-3.5 py-2.5"
+=======
+              className="rounded-2xl btn-dark text-base font-semibold px-3.5 py-2.5"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
             >
               Join OurVerse
             </a>

src/components/Aboutnodes.jsx

@@ -21,8 +21,15 @@ export default function Aboutnodes() {
           </p>
           <div className="mt-8">
             <a
+<<<<<<< HEAD
               href="/community.html"
               className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm btn-gradient-dark2"
+=======
+              href="https://www.threefold.io/getnode/"
+              className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-base font-semibold text-white shadow-sm btn-dark"
+              target="_blank"
+              rel="noopener noreferrer"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
             >
               Host a Node
             </a>

src/components/Bentosection.jsx

@@ -67,12 +67,21 @@ export default function BentoSection() {
           </p>
           <div className="mt-10 flex gap-x-8">
           <a
+<<<<<<< HEAD
               href="#"
               className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm 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"
             >
               See Features
             </a>
           <a href="#" className="text-sm py-2.5 font-semibold leading-6 text-cyan-600 hover:text-purple-500">
+=======
+              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"
+            >
+              See Features
+            </a>
+          <a href="/usecases.html" className="text-base py-2.5 font-semibold leading-6 text-link">
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
           Read Use Cases <span aria-hidden="true">→</span>
             </a>
             </div>

src/components/Bottom.jsx

@@ -3,7 +3,11 @@ export default function Bottom() {
       <div className="relative isolate overflow-hidden bg-gray-900">
         <div className="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
+<<<<<<< HEAD
             <h2 className="text-3xl font-bold tracking-tight text-gradient-light lg:text-5xl">
+=======
+            <h2 className="text-3xl font-bold tracking-tight text-white  lg:text-5xl">
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
               The Future of Collaboration
               <br />
               is now.
@@ -13,8 +17,15 @@ export default function Bottom() {
             </p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
               <a
+<<<<<<< HEAD
                 href="#"
                 className="rounded-2xl btn-gradient-dark2 px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+=======
+                href="https://portal.ourverse.tf"
+                className="rounded-2xl btn-dark text-base font-semibold text-gray-900"
+                target="_blank"
+                rel="noopener noreferrer"c
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
               >
                 Sign Up Now
               </a>

src/components/Button.jsx

@@ -3,7 +3,11 @@ import clsx from 'clsx'
 
 export function Button({ className, ...props }) {
   className = clsx(
+<<<<<<< HEAD
     'inline-flex justify-center rounded-2xl btn-gradient-dark py-2 px-4 text-xs font-semibold text-white hover:btn-gradient-dark-hover focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500 active:text-white/70',
+=======
+    'inline-flex justify-center rounded-2xl btn-dark py-4 px-3 text-sm font-semibold text-white hover:btn-dark-hover focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500 active:text-white/70',
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
     className,
   )
 

src/components/Communhero.jsx

@@ -15,9 +15,15 @@ export default function Communhero() {
       
       {/* Content container with a higher z-index */}
       <div className="relative z-10 mx-auto max-w-7xl px-6 lg:px-8">
+<<<<<<< HEAD
         <div className="mx-auto max-w-2xl lg:mx-0">
           <h2 className="mt-2 text-3xl font-semibold tracking-tight text-gradient sm:text-4xl">
           A United Community <br/>Creating the Future of <br/>Virtual Worlds
+=======
+        <div className="mx-auto max-w-xl lg:mx-0">
+          <h2 className="mt-2 lg:text-5xl font-semibold tracking-tight text-white text-3xl">
+          Create the Future of Virtual World Together 
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
           </h2>
           <p className="mt-6 section-text-light font-display max-w-xl text-purple-50">
           Join a global movement where visionaries, creators, and innovators come together to shape immersive digital experiences. 
@@ -29,7 +35,11 @@ export default function Communhero() {
           <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
               href="#"
+<<<<<<< HEAD
               className="rounded-2xl btn-gradient-dark2 font-semibold px-3.5 py-2.5"
+=======
+              className="rounded-2xl btn-dark font-semibold px-3.5 py-2.5"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
             >
               Join OurVerse
             </a>

src/components/Cta.jsx

@@ -20,10 +20,20 @@ export default function CTA() {
             <div className="mt-8">
               <a
                 href="/community.html"
+<<<<<<< HEAD
                 className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm btn-gradient-dark2"
+=======
+                className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-base font-semibold text-white shadow-sm btn-dark"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
               >
                 Be a Part of OurVerse
               </a>
+<<<<<<< HEAD
+=======
+              <a href="https://threefold.io" className=" inline-flex  text-base py-2.5 font-semibold leading-6 text-link" target="_blank" rel="noopener noreferrer">
+                Visit ThreeFold  <span aria-hidden="true"> →</span>
+            </a>
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
             </div>
           </div>
         </div>

src/components/Eventbanner.jsx

@@ -18,16 +18,26 @@ export default function Eventbanner() {
             <div aria-hidden="true" className="relative h-32 w-full lg:hidden" />
             <div className="absolute py-4 inset-x-0 bottom-0 rounded-bl-lg rounded-br-lg bg-purple-950 bg-opacity-90 p-6 backdrop-blur backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96  lg:flex-col lg:items-start lg:rounded-br-none lg:rounded-tl-lg">
               <div>
+<<<<<<< HEAD
                 <h2 className="mt-4 lg:text-3xl text-xl font-bold text-gradient-light">OurVerse </h2>
                     <h2 className="lg:text-3xl text-xl font-bold text-gradient-light">FutureFest 2024</h2>
                     <h3 className="text-xl font-bold text-gradient-light">Nov 22 - 24</h3>
+=======
+                <h2 className="mt-4 lg:text-3xl text-xl font-bold text-white">OurVerse </h2>
+                    <h2 className="lg:text-3xl text-xl font-bold text-white">FutureFest 2024</h2>
+                    <h3 className="text-xl font-bold text-white">Nov 22 - 24</h3>
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
                 <p className="mt-4 text-md text-gray-300">
                 OurVerse's OurFutureFest connects freelancers, innovators, and businesses in the Metaverse, empowering them to explore new technologies and collaborate seamlessly across boundaries.
                 </p>
               </div>
               <a
                 href="/events/versefest.html"
+<<<<<<< HEAD
                 className="mt-6 flex flex-shrink-0 items-center justify-center rounded-md btn-gradient-dark bg-opacity-0 px-4 py-3 text-base font-medium text-white hover:bg-opacity-10 sm:ml-8 sm:mt-0 lg:ml-0 lg:w-full"
+=======
+                className="mt-6 flex flex-shrink-0 items-center justify-center rounded-md btn-dark bg-opacity-0 px-4 py-3 text-base font-medium text-white hover:bg-opacity-10 sm:ml-8 sm:mt-0 lg:ml-0 lg:w-full"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
               >
                 Register Now
               </a>

src/components/Events.jsx

@@ -54,11 +54,19 @@ const featuredPost = {
             <div className="mt-4 flex items-center gap-x-6">
                     <a
                       href="#"
+<<<<<<< HEAD
                       className="rounded-2xl font-semibold btn-gradient-dark2 text-sm leading-6"
                     >
                       Learn More
                     </a>
                     <a href="/events" className="text-sm font-semibold leading-6 text-cyan-600 hover:text-purple-700">
+=======
+                      className="rounded-2xl font-semibold btn-dark text-base leading-6"
+                    >
+                      Learn More
+                    </a>
+                    <a href="/events" className="text-base font-semibold leading-6 text-linkgo">
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
                       See more events <span aria-hidden="true">→</span>
                     </a>
                   </div>

src/components/Featurehero.jsx

@@ -17,7 +17,11 @@ export default function Featurehero() {
       </div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
+<<<<<<< HEAD
           <h2 className="lg:text-6xl font-semibold tracking-tight text-gradient text-xl">The Future of Collaboration</h2>
+=======
+          <h2 className="lg:text-6xl font-semibold tracking-tight text-white text-4xl">The Future of Collaboration</h2>
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
           <p className="mt-6 section-text-light max-w-xl font-display">
           Step into the future of communication and collaboration with immersive virtual environments. 
           OurVerse provides innovative tools that transform your events, meetings, and creative projects, 
@@ -25,8 +29,15 @@ export default function Featurehero() {
           </p>
           <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
+<<<<<<< HEAD
               href="#"
               className="rounded-2xl btn-gradient-dark2 font-semibold px-3.5 py-2.5"
+=======
+              href="https://portal.ourverse.tf"
+              className="rounded-2xl btn-dark font-semibold px-3.5 py-2.5"
+              target="_blank"
+              rel="noopener noreferrer"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
             >
               Join OurVerse
             </a>

src/components/Featureshome.jsx

@@ -185,9 +185,13 @@ export default function Featureshome() {
                   </div>
                 ))}
                 <div className="mt-6">
+<<<<<<< HEAD
                   <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"
+=======
+                  <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"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
                   >
                     Explore Features
                   </a>

src/components/HeroFeature.jsx

@@ -64,11 +64,19 @@ import {
         <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
             <a
               href="#"
+<<<<<<< HEAD
               className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm 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"
             >
               Try Now
             </a>
             <a href="#" className="text-sm font-semibold leading-6 text-purple-900 hover:text-purple-500">
+=======
+              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"
+            >
+              Try Now
+            </a>
+            <a href="/heroverse.html" className="text-base font-semibold leading-6 text-link">
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
               Learn more <span aria-hidden="true">→</span>
             </a>
           </div>

src/components/Heropage.jsx

@@ -20,16 +20,27 @@ export function Heropage() {
         </video>
 
         <div className="mx-auto max-w-xl lg:max-w-6xl text-center">
+<<<<<<< HEAD
           <h1 className="font-display lg:max-w-3xl font-bold text-gradient tracking-tighter lg:text-6xl text-4xl">
           OurHero Verse 3D
           </h1>
           <h2 className="font-display mt-8 lg:max-w-4xl section-text-light">OurVerse has developed <span className='text-gradient font-semibold'>OurHero Verse 3D</span>, a cutting-edge system that allows users to generate full 3D virtual environments using text input alone. With this tool, users can create immersive and interactive environments, tailored to their needs, simply by describing them.  <br/> <br/>In addition to full environments, the system can generate HDRI environments, ensuring a surrounding atmosphere that matches the generated space. </h2>
+=======
+          <h1 className="font-display lg:max-w-3xl font-bold text-white tracking-tighter lg:text-6xl text-4xl">
+          OurHero Verse 3D
+          </h1>
+          <h2 className="font-display mt-8 lg:max-w-4xl section-text-light">OurVerse has developed <span className='font-semibold text-white'>OurHero Verse 3D</span>, a cutting-edge system that allows users to generate full 3D virtual environments using text input alone. With this tool, users can create immersive and interactive environments, tailored to their needs, simply by describing them.  <br/> <br/>In addition to full environments, the system can generate HDRI environments, ensuring a surrounding atmosphere that matches the generated space. </h2>
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
           <div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight leading-normal text-purple-800">
           </div>
           <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
             <a
               href="#"
+<<<<<<< HEAD
               className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm 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"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
             >
               Try HeroVerse 3D
             </a>

src/components/Homepage.jsx

@@ -21,12 +21,17 @@ export function Homepage() {
 
         <div className="mx-auto max-w-xl lg:max-w-6xl text-center">
           <h1 className="font-display lg:max-w-3xl font-bold text-white tracking-tighter lg:text-7xl text-5xl">
+<<<<<<< HEAD
             The Future of <span className='text-gradient-light'>Collaboration is Now.</span>
+=======
+            The Future of <span className='text-white'>Collaboration is Now.</span>
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
           </h1>
           <div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight leading-normal text-purple-800">
           </div>
           <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
             <a
+<<<<<<< HEAD
               href="#"
               className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm 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"
             >
@@ -34,6 +39,17 @@ export function Homepage() {
             </a>
             <a href="#" className="text-sm font-semibold leading-6 text-white hover:text-purple-200">
               Learn more <span aria-hidden="true">→</span>
+=======
+              href="https://portal.ourverse.tf"
+              target="_blank" 
+              rel="noopener noreferrer" 
+              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold"
+            >
+              Join OurVerse
+            </a>
+            <a href="/features.html" className="text-base font-semibold leading-6 text-white hover:text-purple-200">
+              Discover Features <span aria-hidden="true">→</span>
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
             </a>
           </div>
         </div>

src/components/Phases.jsx

@@ -44,7 +44,11 @@ export function Phasesdark() {
     return (
         <div className="bg-gradient-dark min-h-screen">
           <div className="mx-auto max-w-7xl py-24 px-6 lg:px-8">
+<<<<<<< HEAD
             <h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-gradient-light text-3xl">
+=======
+            <h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-white text-3xl">
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
               Experience True Collaboration
             </h2>
             <p className="mt-4 mb-4 text-purple-100 lg:text-xl space-y-6 font-display">
@@ -62,7 +66,11 @@ export function Phasesdark() {
                   <time
                     dateTime={item.dateTime}
                     className={`flex items-center text-md font-semibold leading-6 ${
+<<<<<<< HEAD
                       item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt lg:text-xl' : 'text-purple-200'
+=======
+                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-white lg:text-xl' : 'text-purple-200'
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
                     }`}
                   >
                     <svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 h-1 w-1 flex-none">
@@ -72,7 +80,11 @@ export function Phasesdark() {
                   </time>
                   <p
                     className={`mt-6 text-lg font-semibold leading-6 tracking-tight ${
+<<<<<<< HEAD
                       item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt' : 'text-purple-200'
+=======
+                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-white' : 'text-purple-200'
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
                     }`}
                   >
                     {item.name}

src/components/Usecases.jsx

@@ -15,8 +15,13 @@ export default function Usecases() {
       {/* Content container with a higher z-index */}
       <div className="relative z-10 mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
+<<<<<<< HEAD
           <h2 className="mt-2 text-3xl font-semibold tracking-tight text-gradient sm:text-4xl">
             Exploring Impactful<br/>Use Cases from <br/>Real-life Applications
+=======
+          <h2 className="mt-2 lg:text-5xl font-semibold tracking-tight text-white text-3xl">
+            Exploring Impactful Use Cases from Real-life Applications
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
           </h2>
           <p className="mt-6 text-lg max-w-xl leading-8 text-purple-50">
             Discover how OurVerse uniquely addresses challenges and fosters innovation in education, healthcare, environmental conservation, 
@@ -26,8 +31,15 @@ export default function Usecases() {
         
         <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
+<<<<<<< HEAD
               href="#"
               className="rounded-2xl btn-gradient-dark2 font-semibold px-3.5 py-2.5"
+=======
+              href="https://portal.ourverse.tf"
+              className="rounded-2xl btn-dark font-semibold px-3.5 py-2.5"
+              target="_blank"
+              rel="noopener noreferrer"
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
             >
               Join OurVerse
             </a>

src/styles/tailwind.css

@@ -309,3 +309,128 @@
     color: rgb(116, 0, 204); /* equivalent to 'text-cyan-700' */
 }
 
+<<<<<<< HEAD
+=======
+/* NEW STYLES */
+
+/* For text on a dark background */
+.text-light {
+  background-color: #f0e3f9; /* Light purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+/* For text on a light background */
+.text-dark {
+  background-color: #4e2c7e; /* Dark purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+
+
+.text-gradient-new {
+  background-image: linear-gradient(45deg, #5e4589 0%, #341a55 100%); /* Gradient dark purple */
+  background-color: #341a55;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.text-gradient-new2 {
+  background-image: linear-gradient(45deg, #ceb1ff 0%, #fcfcfc 50%, #ceb1ff  100%); /* Gradient dark purple */
+  background-color: #341a55;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+   /* H3 Section title */
+
+   .h3-title-new {
+    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 */
+    background-color: #5e4589;
+    background-image: linear-gradient(45deg, #684c97 0%, #341a55 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+  }
+
+  @media (min-width: 1024px) {
+    .h3-title-new {
+      font-size: 2.25rem; /* Equivalent to lg:text-4xl */
+    }
+  }
+
+/* Button styles */
+
+/* Button gradient for dark backgrounds */
+.btn-light {
+  background: radial-gradient(circle, #eee1ff 0%, #9971e0 100%); /* Radial gradient with #eee1ff in the center */
+  color: #341a55;
+  padding: 8px 15px;
+  border: none;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.btn-light:hover {
+  background: radial-gradient(circle, #9971e0 0%, #341a55 100%); /* Reverse radial gradient on hover */
+  color: #eee1ff;
+}
+
+
+
+/* Button gradient for light backgrounds */
+.btn-dark {
+  background: radial-gradient(circle, #5e4589 0%, #341a55 100%); /* Radial gradient dark purple */
+  color: white;
+  padding: 10px 18px;
+  border: none;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.btn-dark:hover {
+  background: radial-gradient(circle, #341a55 0%, #5e4589 100%); /* Reverse radial gradient on hover */
+}
+
+.text-link {
+  background-color: #703db7; /* Dark purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.text-link:hover {
+  background-color: #4e2c7e; /* Dark purple */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.btn-new {
+  background:  radial-gradient(circle, #7152a6 0%, #755bb2 0%, #5e4589 50%, #341a55 100%); /* Light purple gradient similar to the bird */
+  color: #ffffff; /* Dark purple color similar to the text */
+  padding: 8px 15px;
+  border: none;
+  cursor: pointer;
+  border-radius: 1rem /* 16px */;
+}
+
+.btn-new:hover {
+  background: radial-gradient(circle, #341a55 0%, #5e4589 100%); /* Reverse gradient on hover */
+}
+>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd