update section 3-4

content/_index.md

@@ -4,7 +4,7 @@ sort_by = "date"
 template = "index.html"
 +++
 
-<!-- Hero header -->
+<!-- Hero section -->
 
 {{ hero_img(
     image_src="/images/mycel_1.png",
@@ -18,14 +18,119 @@ template = "index.html"
     button_link="/download"
 ) }}
 
-<!-- Second section -->
+<!-- section 2 -->
 
 {{ hero_right_img(
+    image_src="/images/mycel2.png",
+    image_alt="Discover Mycelium",
+    title="Discover Mycelium",
+    subtitle_1="ABOUT",
+    description="Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning. <br><br>Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.",
+    button_text="Learn more",
+    button_link="/about"
     
 )
 
 }}
 
+<!-- section 3 -->
+
+{{ hero_features(
+    image_src="/images/feature6a.png",
+    image_alt="How Mycelium Operates",
+    subtitle_1="HOW IT WORKS",
+    title="How Mycelium Operates",
+    description="Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.",
+
+    feature_1_title="Decentralized Nodes",
+    feature_1_description="Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.",
+
+    feature_2_title="Efficient Data Routing",
+    feature_2_description="Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.",
+
+    feature_3_title="End-to-End Encryption",
+    feature_3_description="Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network."
+) }}
+
+
+<!-- Section 4 -->
+
+{{ use_cases(
+    subtitle="WHAT IT ENABLES",
+    title="Powering Secure & Decentralized Connectivity",
+    description="Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks."
+)
+
+}}
+
+<div class="container mx-auto px-6 lg:px-8">
+<div class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base 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">
+
+## **PRODUCTIVITY & COMMUNICATION**
+
+- Secure remote work collaboration.
+- Private file sharing between trusted nodes.
+- Encrypted voice/video calls.
+- Self-hosted messaging systems.
+- Secure document collaboration.
+
+</div>
+
+<div class="relative pl-9">
+
+- Secure remote work collaboration.
+- Private file sharing between trusted nodes.
+- Encrypted voice/video calls.
+- Self-hosted messaging systems.
+- Secure document collaboration.
+
+</div>
+
+<div class="relative pl-9">
+
+- Secure remote work collaboration.
+- Private file sharing between trusted nodes.
+- Encrypted voice/video calls.
+- Self-hosted messaging systems.
+- Secure document collaboration.
+
+</div>
+
+<div class="relative pl-9">
+
+- Secure remote work collaboration.
+- Private file sharing between trusted nodes.
+- Encrypted voice/video calls.
+- Self-hosted messaging systems.
+- Secure document collaboration.
+
+</div>
+</div>
+
+<br>
+
+---------------------------------------------
+
+
+
+   <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 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>
+
+
+
+
+<!-- {{ feature(
+    feature_title="Decentralized Nodes",
+    feature_description="Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.",
+) 
+
+}} -->
+
 {{ hero3(
     announcement='',
     subheader="",
@@ -89,3 +194,11 @@ For more information, check out the [Zola documentation](https://www.getzola.org
         button_text="View Blog", 
         button_link="/blog") 
 }}
+
+<style scope>
+  ul {
+  list-style: circle;
+  margin: 0;
+  padding: 0;
+}
+  </style>

templates/shortcodes/hero_features.html

@@ -0,0 +1,46 @@
+<div class="fade-in bg-white container mx-auto">
+    <div class="lg:py-24 py-12 relative isolate">
+        <div class="px-6 lg:px-8 lg:pb-24">
+            <p class="text-base font-light tracking-wide">{{ subtitle_1 }}</p>
+            <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight">{{ title }}</h2>
+                <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light fade-in max-w-3xl">
+                    {{ description }}
+                </p>
+          </div>
+        <div class="mx-auto max-w-7xl lg:flex lg:items-center lg:gap-x-15 lg:px-8">
+          <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="{{ image_src }}" 
+                alt="{{ image_alt }}">
+        </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">
+              {% if feature_1_title %}
+                <div class="relative pl-9">
+                  <dt class="font-semibold lg:text-lg text-base ">
+                   {{ feature_1_title }}
+                  </dt>
+                  <dd class="mt-2 font-light">{{ feature_1_description }}</dd>
+                </div>
+              {% endif %}
+              {% if feature_2_title %}
+                <div class="relative pl-9">
+                  <dt class="font-semibold lg:text-lg text-base ">
+                   {{ feature_2_title }}
+                  </dt>
+                  <dd class="mt-2 font-light">{{ feature_2_description }}</dd>
+                </div>
+              {% endif %}
+              {% if feature_3_title %}
+                <div class="relative pl-9">
+                  <dt class="font-semibold lg:text-lg text-base ">
+                   {{ feature_3_title }}
+                  </dt>
+                  <dd class="mt-2 font-light">{{ feature_3_description }}</dd>
+                </div>
+              {% endif %}
+              </dl>
+            </div>
+            
+        </div>
+    </div>
+</div>

templates/shortcodes/hero_right_img.html

@@ -1,30 +1,21 @@
-<!-- {% set image_src = image_src | default(value="/images/mycel_1.png") %}
+<div class="py-24 lg:pt-0 fade-in bg-semi-white container mx-auto px-6 lg:px-8">
-{% set image_alt = image_alt | default(value="Mycelium Network Graphic") %}
-{% set title = title | default(value="MYCELIUM") %}
-{% set subtitle = subtitle | default(value="Unleashing the Power of Decentralized Networks") %}
-{% set description = description | default(value="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.") %}
-{% set highlight = highlight | default(value="Coming Soon: New Decentralized Features") %}
-{% set button_text = button_text | default(value="Get Mycelium") %}
-{% set button_link = button_link | default(value="/download") %} -->
-
-<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">
+        <div class="mx-auto mt-10 lg:mt-0  lg:flex lg:items-center lg:gap-x-15 ">
             <div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto">
-                <p class="text-base font-light tracking-wide">ABOUT</p>
+                <p class="text-base font-light tracking-wide">{{ subtitle_1 }}</p>
-                <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight ">Discover Mycelium</h2>
+                <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight ">{{ title }}</h2>
-                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in max-w-3xl">
+                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in">
-                        Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning. <br><br>Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
+                       {{ description }}
                     </p>
                     <div class="mt-6 flex">
-                    <a href="/about" class="rounded-2xl bg-black px-4 py-2 text-sm font-semibold text-white shadow hover:bg-gray-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-gray-300">Learn more</a>
+                    <a href="{{ button_link }}" class="rounded-2xl bg-black px-4 py-2 text-sm font-semibold text-white shadow hover:bg-gray-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-gray-300">{{ button_text }}</a>
                     </div>
 
             </div>
             <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" 
+                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="{{ image_src }}" 
-                    alt="Mobile App Screenshot">
+                    alt="{{ image_alt }}">
             </div>
 
         </div>

templates/shortcodes/use_cases.html

@@ -0,0 +1,71 @@
+<div class="lg:py-24 py-12 container mx-auto px-6 lg:px-8">
+  <div class="mx-auto">
+    <div class="mx-auto">
+      <p class="text-base font-light tracking-wide">{{ subtitle }}</p>
+      <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight">{{ title }}</h2>
+
+      <p class="mt-6 text-lg font-light">{{ description }}</p>
+    </div>
+  </div>
+  <!-- <div class="mx-auto mt-10">
+    <dl class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base 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 ">
+
+          PRODUCTIVITY & COMMUNICATION
+        </dt>
+        <ul class="mx-4" style="list-style: circle;">
+          <li>Secure remote work collaboration.</li>
+          <li>Private file sharing between trusted nodes.</li>
+          <li>Encrypted voice/video calls.</li>
+          <li>Self-hosted messaging systems.</li>
+          <li>Secure document collaboration.</li>
+        </ul>
+      </div>
+      <div class="relative pl-9">
+        <dt class="inline font-semibold ">
+
+          INFRASTRUCTURE
+        </dt>
+        <ul class="mx-4" style="list-style: circle;">
+          <li>Private cloud computing resources.</li>
+          <li>Secure IoT device networks.</li>
+          <li>Remote system administration.</li>
+          <li>Virtual private networks (VPNs).</li>
+          <li>Secure backup systems.</li>
+        </ul>
+      </div>
+      <div class="relative pl-9">
+        <dt class="inline font-semibold ">
+ 
+          SERVICES
+        </dt>
+        <ul class="mx-4" style="list-style: circle;">
+          <li>Self-hosted web services.</li>
+          <li>Private file sharing between trusted nodes.</li>
+          <li>Private DNS systems.</li>
+          <li>Personal email servers.</li>
+          <li>Secure document collaboration.</li>
+        </ul>
+      </div>
+      <div class="relative pl-9">
+        <dt class="inline font-semibold ">
+
+          MEDIA & CONTENT
+        </dt>
+        <ul class="mx-4" style="list-style: circle;">
+          <li>Private media streaming.</li>
+          <li>Personal cloud storage.</li>
+          <li>Protected content distribution.</li>
+          <li>Secure game servers.</li>
+          <li>Private git repositories.</li>
+        </ul>
+      </div>
+    </dl>
+    <hr class="my-6">
+
+    <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 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> -->
+</div>