change text classes

src/components/Blogposts.jsx

@@ -26,8 +26,8 @@ const posts = [
       <div className="bg-white py-24 sm:py-32">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-gradient-dark sm:text-4xl">From the Blog</h2>
-            <p className="mt-2 text-lg leading-8 text-gray-600">
+            <h2 className="h3-title">From the Blog</h2>
+            <p className="mt-4 section-text">
               Stay up to date with the latest news, announcements, and stories from OurVerse.
             </p>
           </div>

src/components/Build.jsx

@@ -52,8 +52,8 @@ import {
       <div className="bg-gradient-to-b from-purple-50/80 to-purple-50/10  lg:pt-16 lg:pb-24 pt-24 pb-24">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-4xl sm:text-center">
-            <p className="mt-2 font-display text-4xl font-semibold tracking-tighter text-gradient-dark sm:text-5xl">Build Your Own Verse</p>
-            <p className="mt-6 font-display text-2xl tracking-tight text-purple-900">
+            <p className="mt-2 h3-title">Build Your Own Verse</p>
+            <p className="mt-4 lg:max-w-3xl section-text">
             Create and customize your virtual world with powerful tools and resources that make building and managing your digital space easy and intuitive.
             </p>
           </div>

src/components/Casestudies.jsx

@@ -138,8 +138,8 @@ const posts = [
       <div className="bg-gradient-to-b from-purple-50/70 to-purple-50/5 lg:py-20 py-32">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-gradient-dark sm:text-4xl">Case Studies</h2>
-            <p className="mt-2 text-lg leading-8 text-purple-600">
+            <h2 className="h3-title">Case Studies</h2>
+            <p className="mt-4 section-text">
             Discover how OurVerse uniquely addresses challenges and fosters innovation with specific, real-world applications of our technology.
             </p>
           </div>

src/components/Collaborate.jsx

@@ -31,8 +31,8 @@ export default function Collaborate() {
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:ml-auto lg:pl-4 lg:pt-4">
             <div className="lg:max-w-lg">
-              <p className="mt-2 text-3xl font-semibold tracking-tighter text-gradient-dark  sm:text-4xl">Creative Collaboration</p>
-              <p className="mt-6 text-lg leading-8 text-purple-900">
+              <p className="mt-2 h3-title text-gradient-dark ">Creative Collaboration</p>
+              <p className="mt-4 section-text">
               Unleash your team’s creative potential in an immersive virtual playground where ideas come to life.
               </p>
               <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-purple-900 lg:max-w-none">

src/components/Communicate.jsx

@@ -31,8 +31,8 @@ export default function Communicate() {
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:pr-8 lg:pt-4">
             <div className="lg:max-w-lg">
-              <p className="mt-2 text-3xl font-semibold tracking-tighter text-gradient-dark sm:text-4xl">Advanced Communication</p>
-              <p className="mt-6 text-lg leading-8 text-purple-900">
+              <p className="mt-2 h3-title">Advanced Communication</p>
+              <p className="mt-4 section-text">
               Elevate your virtual interactions with cutting-edge communication features 
               designed to keep you connected and engaged.
               </p>

src/components/Crm.jsx

@@ -49,13 +49,13 @@ import {
   
   export default function Crm() {
     return (
-      <div className="bg-white lg:py-20 py-24">
+      <div className="bg-white lg:py-20 py-24 mb-12">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-4xl sm:text-center">
 
-            <p className="mt-2 font-display text-4xl font-semibold tracking-tighter text-gradient-dark sm:text-5xl">
+            <p className="mt-2 h3-title">
             Integrated CRM</p>
-            <p className="mt-6 font-display text-2xl tracking-tight text-purple-900">
+            <p className="mt-4 section-text">
             Manage customer interactions, tasks, and meetings seamlessly in one platform, helping your business transition smoothly to the digital landscape.
             </p>
           </div>

src/components/Eventmgmt.jsx

@@ -31,8 +31,8 @@ export default function Eventmgmt() {
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:ml-auto lg:pl-4 lg:pt-4">
             <div className="lg:max-w-lg">
-              <p className="mt-2 text-3xl font-semibold tracking-tighter text-gradient-dark  sm:text-4xl">Event Management</p>
-              <p className="mt-6 text-lg leading-8 text-purple-900">
+              <p className="mt-2 h3-title">Event Management</p>
+              <p className="mt-4 section-text">
               Host and manage tailored events with versatile venues, real-time updates, and powerful engagement tools to ensure a seamless and memorable experience.
               </p>
               <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-purple-900 lg:max-w-none">

src/components/Events.jsx

@@ -49,7 +49,7 @@ const featuredPost = {
             <time dateTime={featuredPost.datetime} className="mt-2 block text-sm leading-6 text-purple-600">
             {featuredPost.date}
             </time>
-            <p className="mt-2 text-lg leading-8 text-purple-900">{featuredPost.description}</p>
+            <p className="mt-2 section-text">{featuredPost.description}</p>
             <div className="mt-4 flex flex-col justify-between gap-6 sm:mt-8 sm:flex-row-reverse sm:gap-8 lg:mt-4 lg:flex-col">
               <div className="flex">
                 <a

src/components/FeaturesHome.jsx

@@ -82,10 +82,10 @@ export default function Featureshome() {
         </svg>
 
         <div className="relative">
-          <h2 className="text-center lg:text-4xl font-bold leading-8 tracking-tight text-gradient-dark text-2xl">
+          <h2 className="text-center h3-title">
           The Future of Communication and Collaboration
           </h2>
-          <p className="mx-auto mt-4 max-w-3xl text-center lg:text-xl text-lg text-purple-900">
+          <p className="mx-auto mt-4 max-w-3xl text-center section-text">
           OurVerse offers cutting-edge tools and immersive virtual environments designed to bring your events, meetings, and creative projects to life in new and exciting ways.
           </p>
         </div>
@@ -93,8 +93,8 @@ export default function Featureshome() {
         <div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
           <div className="relative">
             <h2 className="text-base  font-medium font-mono leading-7 text-cyan-700">Features</h2>
-            <h3 className="text-2xl font-bold tracking-tight text-gradient-dark sm:text-3xl">Collaboration & Creation Tools</h3>
-            <p className="mt-3 text-lg text-purple-900">
+            <h3 className="h3-title">Collaboration & Creation Tools</h3>
+            <p className="mt-4 section-text">
             Transform how you and your team work together with our innovative, real-time creative tools.
             </p>
 

src/components/Hero.jsx

@@ -46,13 +46,13 @@ export function Hero() {
       <BackgroundImage className="-bottom-14 -top-20" />
       <Container className="relative">
         <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
-          <h1 className="font-display lg:text-6xl text-3xl font-semibold tracking-tighter text-gradient-dark">
+          <h2 className="font-display lg:text-6xl text-4xl font-semibold leading-normal tracking-tighter text-gradient-dark">
             OurVerse
-          </h1>
-          <h1 className="mt-2 font-display lg:text-2xl text-lg font-semibold tracking-tight text-gradient-dark">
+          </h2>
+          <h1 className="lg:mt-2 mt-0 font-display lg:text-2xl text-lg font-semibold tracking-tight text-gradient-dark">
             Powered by ThreeFold
           </h1>
-          <div className="mt-4 space-y-6 font-display lg:text-xl text-lg tracking-tight leading-tight text-purple-900">
+          <div className="mt-4 space-y-6 mx-4 font-display section-text">
             <p>
             <span className='emphasis'>OurVerse</span> empowers users to build, manage, and monetize their unique virtual experiences by blending the latest advancements 
             in blockchain technology with immersive virtual reality, built on top of the <span className='emphasis'>ThreeFold Grid</span>.
@@ -84,8 +84,8 @@ export function Hero() {
         </div>
         <div className="pt-6 pb-24"></div>
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
-          <h2 className="lg:text-4xl mb-8 font-semibold tracking-tight  text-gradient-dark text-xl">A Journey to The Future</h2>
-          <div className="mt-4 mb-12 space-y-6 font-display lg:text-xl text-lg tracking-tight leading-tight text-purple-900">
+          <h2 className="lg:text-4xl font-semibold tracking-tight leading-normal text-gradient-dark text-xl">A Journey to The Future</h2>
+          <div className="mt-4 mb-12 space-y-6 font-display section-text">
             A journey through five transformative phases of digital collaboration, culminating in OurVerse—the immersive 
             metaverse platform breaking down barriers and unlocking unlimited possibilities for global connection.
           </div>

src/components/Homepage.jsx

@@ -34,7 +34,7 @@ export function Homepage() {
           <h1 className="font-display lg:max-w-2xl font-bold tracking-tighter text-gradient-dark lg:text-7xl text-5xl">
             The Future of Collaboration is Now.
           </h1>
-          <div className="font-ethnocentric lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight text-purple-800">
+          <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">
             <p>At <span className='bg-gradient3 font-semibold'>OurVerse</span>, we go beyond traditional video calls. 
             Our immersive metaverse platform brings people together in a dynamic, interactive environment where meetings 
             and events feel real.</p>

src/components/Product.jsx

@@ -48,10 +48,10 @@ export function Product() {
       <Container className="relative z-10">
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-4xl lg:pr-24">
           <h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Usecases</h2>
-          <h2 className="mt-2 font-display text-4xl font-semibold tracking-tighter text-gradient-dark sm:text-5xl">
+          <h2 className="mt-2  h3-title">
           Transforming Possibilities Across Industries Digitally
           </h2>
-          <p className="mt-4 font-display lg:text-xl text-lg tracking-tight text-purple-900">
+          <p className="mt-4 section-text">
           Explore diverse scenarios where our platform empowers users to create, collaborate, 
           and innovate in immersive virtual environments, unlocking new potentials across industries and communities.
           </p>

src/components/Socials.jsx

@@ -18,7 +18,7 @@ const features = [
     name: 'YouTube',
     description: "Dive deep into product demos, event recaps, and videos that showcase how we're revolutionizing virtual experiences.",
     icon: FaYoutube,
-    link: '#', // Replace with actual YouTube link
+    link: 'https://www.youtube.com/channel/UCavIIyki4cYFAUysi0aEDeA', // Replace with actual YouTube link
   },
   {
     name: 'Instagram',
@@ -45,10 +45,10 @@ export default function Socials() {
     <div className="relative bg-white py-16 sm:py-24 lg:py-32">
       <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
         <h2 className="text-lg font-mono font-medium text-purple-600">Socials</h2>
-        <p className="mt-2 text-3xl font-bold tracking-tight text-gradient-dark sm:text-4xl">
+        <p className="mt-2 h3-title">
           Get Involved
         </p>
-        <p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
+        <p className="mx-auto mt-4 max-w-prose section-text">
           Be a part of our global community by participating in open discussions and follow the most recent updates and news from OurVerse.
         </p>
         <div className="mt-12">

src/components/Studio.jsx

@@ -31,8 +31,8 @@ export default function Studio() {
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:pr-8 lg:pt-4">
             <div className="lg:max-w-lg">
-              <p className="mt-2 text-3xl font-semibold tracking-tighter text-gradient-dark sm:text-4xl">OurVerse Studio</p>
-              <p className="mt-6 text-lg leading-8 text-purple-900">
+              <p className="mt-2 h3-title">OurVerse Studio</p>
+              <p className="mt-4 section-text">
               Elevate your virtual interactions with cutting-edge communication features 
               designed to keep you connected and engaged.
               </p>

src/styles/tailwind.css

@@ -170,4 +170,65 @@
 .emphasis {
   @apply font-semibold text-gradient-dark bg-clip-text text-transparent;
   }
+  
+
+  /* H2 Section title */
+
+  .h2-title {
+    font-weight: 600; /* Equivalent to font-semibold */
+    letter-spacing: -0.015em; /* Equivalent to tracking-tighter */
+    line-height: 1.2; /* Equivalent to leading-normal */
+    font-size: 2.25rem; /* Default for text-4xl */
+    background-color: #5e4589;
+    background-image: linear-gradient(45deg, #5e4589 0%, #5fa69b 25%,  #5e4589 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+  }
+  
+  @media (min-width: 1024px) {
+    .h2-title {
+      font-size: 3.75rem; /* lg:text-6xl */
+    }
+  }
+
+    /* H3 Section title */
+
+    .h3-title {
+      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, #5e4589 0%, #5fa69b 25%,  #5e4589 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-fill-color: transparent;
+    }
+    
+    @media (min-width: 1024px) {
+      .h3-title {
+        font-size: 2.25rem; /* Equivalent to lg:text-4xl */
+      }
+    }
+    
+  
+
+  /* H2,H3 Section texts */
+
+  .section-text {
+    font-size: 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: #525763 
+  }
+  
+  @media (min-width: 1024px) {
+    .section-text {
+      font-size: 1.25rem; /* matches 'lg:text-xl' for large screens */
+      line-height: 1.85rem; /* matches 'leading-tight' */
+    }
+  }