add website

templates/layouts/why.html

@@ -1,5 +1,11 @@
 {% extends "_default/base.html" %}
 {% block content %}
+{% include "partials/about/about1.html" %}
+{% include "partials/about/about2.html" %}
+{% include "partials/about/about3.html" %}
+{% include "partials/about/about4.html" %}
+{% include "partials/about/about5.html" %}
+
 {% include "partials/hero/hero1.html" %}
 {% include "partials/hero/hero2.html" %}
 {% include "partials/hero/hero3.html" %}

templates/partials/about/about1.html

@@ -0,0 +1,24 @@
+<div class=" fade-in">
+    <div class="relative isolate">
+        <div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8 lg:py-32">
+            <div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
+                <p class="text-base/7 font-light text-black tracking-wide">ABOUT</p>
+                <h1 class="mt-2 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
+                    Mycelium
+                </h1>
+                <h2 class="text-balance lg:text-4xl text-3xl font-normal tracking-tight text-black">Where Digital Innovation
+                    Meets the Wisdom of Nature</h2>
+                <p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
+                    At the forefront of digital evolution lies Mycelium, a visionary project at the heart of the ThreeFold Grid. More than just technology, Mycelium is a transformative force reshaping the way we connect in the digital age.
+                </p>
+                <p class="mt-2 text-md font-light text-stone-800 lg:text-lg">
+                    We're on a mission to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
+                </p>
+            </div>
+            <div class="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/mycel5.jpg" 
+                    alt="Mobile App Screenshot">
+            </div>
+        </div>
+    </div>
+</div>

templates/partials/about/about2.html

@@ -0,0 +1,49 @@
+<div class="relative bg-black isolate overflow-hidden  py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="relative grid lg:grid-cols-12 lg:gap-8">
+            <!-- Left Content -->
+            <div class="lg:col-span-7">
+                <div class="mx-auto max-w-2xl lg:mx-0">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">Why Mycelium:
+                    </h1>
+                    <h2 class="mt-4 mx-automax-w-3xl text-pretty lg:text-3xl text-xl font-normal text-gray-200 fade-in"> Redefining Digital Communication</h2>
+                    <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
+                        Mycelium facilitates secure, efficient, and scalable data transfer and communication among network nodes. It optimizes data routing, ensuring that information follows the shortest path in terms of latency, leading to faster and more efficient communication.
+                        <br><br>
+                        The technology relies on end-to-end encryption, where each node in the system is identified by a unique key pair, ensuring data security and privacy. This ensures that data remains confidential and authentic, enhancing the privacy and integrity of the network.
+                        <br><br>
+                    </p>
+                </div>
+            </div>
+
+            <!-- Right Blockquote -->
+            <div class="lg:col-span-5">
+                <figure class=" mt-6 pl-8">
+                    <blockquote class=" text-white fade-in">
+                        <p class="lg:text-xl text-lg leading-normal text-white font-normal">Mycelium is developed to address the limitations of traditional networking protocols and to contribute to a more sustainable and eco-conscious digital ecosystem. It strives to revolutionize digital communication, making it not only efficient and secure, but also environmentally responsible.<br><br>
+                            The inspiration for Mycelium draws from the need for a technology that adapts to changing network conditions and operates efficiently, even in a rapidly evolving digital landscape.</p>
+                    </blockquote>
+                    <br>
+                    <div class="mx-4">
+                    <p class="fade-in mx-auto text-xl font-semibold tracking-tight text-white lg:text-2xl opacity-0 transition-opacity duration-1000" data-observer>
+                        Decentralized. Scalable. Intelligent.
+                    </p>
+                    </div>
+                </figure>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<style>
+    .blockquote::before {
+        content: open-quote;
+        font-size: 4rem;
+        position: absolute;
+        top: -1rem;
+        left: -1rem;
+        color: #ffffff;
+    }
+</style>

templates/partials/about/about3.html

@@ -0,0 +1,22 @@
+<div class=" fade-in">
+    <div class="relative isolate">
+        <div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
+            <div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
+                <p class="text-base/7 font-light text-black tracking-wide">BENEFITS</p>
+                <h2 class="text-balance lg:text-5xl text-4xl font-medium tracking-tight text-black">Highly Efficient</h2>
+                <h3 class="mt-64 font-light text-black lg:text-3xl text-xl">
+                    Optimizing Data Routing
+                </h3>
+                <p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
+                    Mycelium's routing algorithms prioritize the shortest path in terms of latency for data transfer. 
+                </p>
+                <p class="mt-4 text-md font-light text-stone-800 lg:text-lg">
+                    This means that data is sent along the most direct and efficient route, reducing the time it takes for information to travel from the source node to the destination node. </p>
+            </div>
+            <div class="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/about1.jpg" 
+                    alt="Mobile App Screenshot">
+            </div>
+        </div>
+    </div>
+</div>

templates/partials/about/about4.html

@@ -0,0 +1,24 @@
+<div class=" fade-in bg-black">
+    <div class="relative isolate">
+        <div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
+            <div class="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/about3.jpg" 
+                    alt="Mobile App Screenshot">
+            </div>
+            <div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
+                <p class="text-base/7 font-light text-white tracking-wide">BENEFITS</p>
+                <h2 class="text-balance lg:text-5xl text-4xl font-medium tracking-tight text-white">
+                    Enhancing Security
+                </h2>
+                <h3 class="mt-64 font-light text-white lg:text-3xl text-xl">
+                    End-to-End Encryption
+                </h3>
+                <p class="mt-6 text-md font-light text-white lg:text-lg">
+                    With Mycelium, each node in the network is identified by a unique key pair. This key pair consists of a public key and a private key. The public key is used to encrypt data intended for that node, while the private key is used to decrypt the data. This cryptographic system ensures that only the intended recipient can access the data.
+                </p>
+                <p class="mt-4 text-md font-light text-white lg:text-lg">
+                    When a node sends data to another node within the Mycelium network, the data is encrypted using the recipient's public key. This encryption ensures that even if the data is intercepted during transmission, it remains confidential and unreadable without the corresponding private key. </p>
+            </div>
+        </div>
+    </div>
+</div>

templates/partials/about/about5.html

@@ -0,0 +1,23 @@
+<div class=" fade-in">
+    <div class="relative isolate">
+        <div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
+            <div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
+                <p class="text-base/7 font-light text-black tracking-wide">BENEFITS</p>
+                <h2 class="text-balance lg:text-5xl text-4xl font-medium tracking-tight text-black">Enhances Scalability</h2>
+                <h3 class="mt-64 font-light text-black lg:text-3xl text-xl">
+                    Designed to Adapt
+                </h3>
+                <p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
+                    Mycelium is an open-source project designed to dynamically adapt to changing network conditions. This means that, as new nodes join the network or as existing nodes leave, the system can adjust seamlessly. This adaptability allows Mycelium to accommodate an increasing number of participants without compromising performance.
+                </p>
+                <p class="mt-4 text-md font-light text-stone-800 lg:text-lg">
+                    Mycelium can distribute network traffic effectively. In cases of increased network usage or high data transfer demands, the system can balance the load by routing data through multiple paths or nodes. This load distribution ensures that the network can handle a larger volume of data and more users without becoming overwhelmed.
+                 </p>
+            </div>
+            <div class="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/about4.jpg" 
+                    alt="Mobile App Screenshot">
+            </div>
+        </div>
+    </div>
+</div>

templates/partials/header.html

@@ -107,7 +107,7 @@
                       </a>
                     </li> 
                   </ul> #}
-                    <a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-white/5">Get Mycelium</a>
+                    <a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-stone-90">Get Mycelium</a>
                 </div>
               </div>
             </div>

templates/partials/hero/myhero.html

@@ -1,4 +1,4 @@
-<div class="relative fade-in lg:pt-20 lg:pb-16">
+<div class="relative fade-in lg:pt-20 lg: bpb-16">
   <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
     <div class="px-6 pt-10 lg:pb-16 lg:col-span-7 lg:px-0 lg:pt-24 xl:col-span-6">
       <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
@@ -8,10 +8,10 @@
         <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">Unleashing the Power of Decentralized Networks
                   </h2>
         <p class="mt-8 text-pretty lg:text-xl text-lg  font-light text-black lgl:text-xl">
-          Discover the future of secure, efficient, and scalable networking with Mycelium, a key component of the ThreeFold Grid. <br>Join the Revolution.
+          Discover the future of secure, efficient, and scalable networking with Mycelium, a key component of the ThreeFold Grid. <br>Join the Movement.
         </p>
         <div class="mt-10 flex items-center gap-x-6">
-            <a href="#" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
+            <a href="#" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-stone-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
                 Get Mycelium
             </a>
             <a href="#" class="text-sm font-semibold text-black hover:text-black">

templates/partials/hero/myhero1.html

@@ -9,7 +9,7 @@
                         At the forefront of digital evolution lies Mycelium, a visionary project at the heart of the ThreeFold Grid. Mycelium is more than just a new technology; it's a transformative force reshaping the way we connect in the digital age. <br><br>We're on a mission to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
                     </p>
                     <div class="mt-6 flex">
-                    <a href="" class=" rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
+                    <a href="" class=" rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-stone-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
                     </div>
 
             </div>

templates/partials/hero/myhero7.html

@@ -1,13 +1,17 @@
-<div class="">
+<div class="fade-in">
-    <div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
+  <div class="mx-auto max-w-7xl py-24 sm:px-6  lg:px-8">
-      <div class="relative isolate overflow-hidden bg-gray-100 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16">
+    <div class="relative isolate overflow-hidden bg-black px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
-        <h2 class="text-4xl font-normal tracking-tight text-balance text-black sm:text-5xl">Get Mycelium Today.</h2>
+      <div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
-        <p class="mx-auto mt-6 max-w-xl font-light text-lg/8 text-pretty text-black">Experience the Future of Decentralized AI & Storage and be part of the decentralized revolution..</p>
+        <h2 class="text-4xl font-normal tracking-tight text-balance text-white lg:text-5xl">Get Mycelium Today</h2>
-        <div class="mt-10 flex items-center justify-center gap-x-6">
+        <p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">Join the Mycelium network and be a part of the decentralized movement.</p>
-          <a href="#" class=" bg-black px-3.5 py-2.5 text-sm  rounded-xl font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Download now</a>
+        <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
-          <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-950">Learn more <span aria-hidden="true">→</span></a>
+          <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Download Now</a>
+          <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-100">Read Manual <span aria-hidden="true">→</span></a>
+        </div>
+      </div>
+      <div class="relative mt-16 h-80 lg:mt-8">
+        <img class="absolute top-0 left-0 w-[45rem] max-w-none rounded-2xl bg-white/5 ring-1 ring-white/10" src="/images/mycel3.png" alt="App screenshot" width="1824" height="1080">
       </div>
     </div>
   </div>
 </div>
-