fix spacing

templates/partials/about/about1.html

@@ -1,6 +1,6 @@
 <div class=" fade-in">
     <div class="relative isolate">
-        <div class="mx-auto max-w-7xl px-6 lg:py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
+        <div class="mx-auto max-w-7xl px-6 lg:py-24 py-12 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
             <div class="my-6 lg:my-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2 lg:order-2">
                 <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/mycel5.jpg" 
                     alt="Mobile App Screenshot">

templates/partials/about/about6.html

@@ -1,6 +1,6 @@
 <div class="bg-white fade-in">
     <div class="relative isolate px-6 lg:px-8">
-      <div class="mx-auto max-w-4xl py-24">
+      <div class="mx-auto max-w-4xl py-12 lg:py-24">
         <div class="text-center">
           <h2 class="fade-in text-balance lg:text-5xl text-4xl font-medium tracking-tight text-black">A Part of ThreeFold Ecosystem</h2>
           <h3 class="fade-in text-balance lg:text-3xl text-2xl font-normal tracking-tight text-black">An Integral Component of Sustainable Decentralization</h3>

templates/partials/hero/myhero.html

@@ -1,4 +1,4 @@
-<div class="relative fade-in pt-20 mt-4 lg:mt-24 lg:pt-24 h-screen">
+<div class="relative fade-in pt-10 mt-4 lg:mt-24 lg:pt-24 lg:h-screen">
   <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
     <div class="px-6 lg:col-span-7 lg:px-0 xl:col-span-6">
       <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">

templates/partials/hero/myhero1.html

@@ -1,4 +1,4 @@
-<div class="pb-24 fade-in bg-semi-white">
+<div class="py-24 lg:pt-0 fade-in bg-semi-white">
     <div class="relative isolate">
 
         <div class="mx-auto mt-10 lg:mt-0 max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8">
@@ -13,7 +13,7 @@
                     </div>
 
             </div>
-            <div class="lg:order-first mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
+            <div class="lg:order-first mt-6 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
                 <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/mycel2.png" 
                     alt="Mobile App Screenshot">
             </div>

templates/partials/hero/myhero3.html

@@ -1,14 +1,18 @@
-<div class=" fade-in bg-white">
+<div class="fade-in bg-white">
-    <div class="lg:py-12 relative isolate">
+    <div class="lg:py-24 py-12 relative isolate">
-        <div class=" mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 pb-24">
+        <div class=" mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 lg:pb-24">
             <p class="text-base/7 font-light text-black tracking-wide">HOW IT WORKS</p>
             <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">How Mycelium Operates</h2>
                 <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-black fade-in max-w-3xl">
                     Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
                 </p>
           </div>
-        <div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8">
+        <div class="mx-auto max-w-7xl lg:flex lg:items-center lg:gap-x-15 lg:px-8">
-            <div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto">
+          <div class="my-6 lg:my-0 lg:flex lg:justify-center lg:w-1/2">
+            <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/feature6a.png" 
+                alt="Mobile App Screenshot">
+        </div>
+            <div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto pt-4">
             <dl class="space-y-8 text-base/7 lg:max-w-none">
                 <div class="relative pl-9">
                   <dt class="font-semibold lg:text-lg text-base text-black ">
@@ -32,10 +36,7 @@
                 </div>
               </dl>
             </div>
-            <div class="lg:order-first mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
+            
-                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/feature6a.png" 
-                    alt="Mobile App Screenshot">
-            </div>
         </div>
     </div>
 </div>

templates/partials/hero/myhero5.html

@@ -1,54 +1,54 @@
-<div class="py-24 sm:py-32">
+<div class="lg:py-24 py-12">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
-      <div class="mx-auto max-w-4xl text-center">
+      <div class="mx-auto max-w-4xl text-left lg:text-center">
         <p class="text-base/7 font-light text-black tracking-wide">WHAT'S NEW</p>
         <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black"> Coming Soon: The Future of Mycelium</h2>
         <p class="mt-6 text-lg font-light lg:text-xl">Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what’s coming next by staying connected with our latest updates.</p>
       </div>
     </div>
-    <div class="relative overflow-hidden pt-10">
+    <div class="relative overflow-hidden pt-2">
-      <div class="mx-auto max-w-7xl px-6 lg:px-8 flex items-center justify-center">
+      <div class="mx-auto max-w-7xl px-4 lg:px-8 flex items-center justify-center">
         <img src="/images/future.png" alt="App screenshot"  width="900">
       </div>
     </div>
     <div class="mx-auto mt-10 max-w-7xl px-6  lg:px-8">
-      <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-black sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
+      <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-4 text-base/7 text-black sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
-        <div class="relative pl-9">
+        <div class="relative lg:pl-9">
           <dt class="inline font-semibold text-black">
 
             ✓  Quantum Safe Storage Functionality
           </dt>
           <dd class="font-light">Mycelium’s quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.</dd>
         </div>
-        <div class="relative pl-9">
+        <div class="relative lg:pl-9">
           <dt class="inline font-semibold text-black">
  
             ✓  Entry and Exit Points for AI Workloads
           </dt>
           <dd class="font-light">Seamlessly connect AI applications to Mycelium, providing optimized nd secured data pipelines for training, inference, and real-time processing.</dd>
         </div>
-        <div class="relative pl-9">
+        <div class="relative lg:pl-9">
           <dt class="inline font-semibold text-black">
    
             ✓  Data Storage and Retrieval Mechanisms
           </dt>
           <dd class="font-light">Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.</dd>
         </div>
-        <div class="relative pl-9">
+        <div class="relative lg:pl-9">
           <dt class="inline font-semibold text-black">
 
             ✓  Integrated Name Services (DNS)
           </dt>
           <dd class="font-light">The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.</dd>
         </div>
-        <div class="relative pl-9">
+        <div class="relative lg:pl-9">
           <dt class="inline font-semibold text-black">
 
             ✓  Frontend/Backend Integration
           </dt>
           <dd class="font-light"> Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.</dd>
         </div>
-        <div class="relative pl-9">
+        <div class="relative lg:pl-9">
           <dt class="inline font-semibold text-black">
  
             ✓  CDN (Content Delivery Network)

templates/partials/hero/myhero8.html

@@ -1,4 +1,4 @@
-<div class="py-24 sm:py-32">
+<div class="lg:py-24 py-12">
   <div class="mx-auto max-w-7xl px-6 lg:px-8">
     <div class="mx-auto">
       <p class="text-base/7 font-light text-black tracking-wide">WHAT IT ENABLES</p>
@@ -16,7 +16,7 @@
     </div>
   </div> #}
   <div class="mx-auto mt-10 max-w-7xl">
-    <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-black sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-16">
+    <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-black sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-8">
       <div class="relative pl-9">
         <dt class="inline font-semibold text-black">
 
@@ -72,7 +72,7 @@
     </dl>
     <hr class="my-6">
 
-    <div class="mx-auto mt-10 max-w-6xl">
+    <div class="mx-auto mt-10 px-6 lg:px-0 lg:max-w-6xl">
       <a href="/download" class=" rounded-2xl bg-black px-6 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get Started</a>
     </div> 
   </div>