update home

content/_index.md

@@ -29,7 +29,6 @@ template = "index.html"
     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"
-    
 ) }}
 
 
@@ -58,13 +57,13 @@ template = "index.html"
 {{ use_cases(
     subtitle="WHAT IT ENABLES",
     title="Powering Secure & Decentralized Connectivity",
-    description="Mycelium, a key component of the ThreeFold Grid, can be installed on any computer (macOS, Linux, Windows) and smartphone (iOS, Android). With seamless integration, it enables secure and private communication across devices."
+    description="Mycelium, a key component of the ThreeFold Grid, can be installed on any computer (macOS, Linux, Windows) and smartphone (iOS, Android). With seamless integration, it enables secure and private communication across devices.",
     description2="The ThreeFold Dashboard offers dozens of applications with built-in Mycelium support, making it easy to deploy and utilize. Once installed, Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure."
 ) }}
 
-<div class="container mx-auto px-6 lg:px-8  py-12 lg:pb-24">
+<div class="lg:max-w-7xl container mx-auto py-12 lg:pb-24">
 <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">
+<div class="relative ">
 
 ## **PRODUCTIVITY & COMMUNICATION**
 
@@ -79,7 +78,7 @@ template = "index.html"
 </div>
 </div>
 
-<div class="relative pl-9">
+<div class="relative ">
 
 ## **INFRASTRUCTURE**
 
@@ -94,7 +93,7 @@ template = "index.html"
 </div>
 </div>
 
-<div class="relative pl-9">
+<div class="relative ">
 
 ## **SERVICES**
 
@@ -109,7 +108,7 @@ template = "index.html"
 </div>
 </div>
 
-<div class="relative pl-9">
+<div class="relative ">
 
 ## **MEDIA & CONTENT**
 
@@ -140,14 +139,6 @@ template = "index.html"
 
 
 
-<!-- {{ 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.",
-) 
-
-}} -->
-
-
 <!-- Section 5 -->
 
 {{ hero_bottom_img(
@@ -155,20 +146,17 @@ template = "index.html"
     image_alt="Coming Soon: The Future of Mycelium",
     subtitle="WHAT'S NEW",
     title="Coming Soon: The Future of Mycelium",
-    description="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."
+    description="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."
-)
+) }}
 
-}}
+<div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
-
-<div class="container mx-auto lg:pb-24 pb-12">
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
+
 {{ 
    feature_card(
     title="✓ Quantum Safe Storage Functionality", 
     description="Mycelium's quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.", 
-        icon=""
+    icon="") }}
-        ) 
-}}
 
 {{ feature_card(
     title="✓ Entry and Exit Points for AI Workloads", 
@@ -204,12 +192,11 @@ template = "index.html"
 {{ use_cases(
     subtitle="BENEFITS",
     title="Nature's Blueprint for Digital Connectivity",
-    description="Just as nature's mycelium network serves as a critical component in the ecosystems of forests, connecting trees and plants underground, the Mycelium technology offers reliable connectivity in an efficient and resilient way."
+    description="Just as nature's mycelium network serves as a critical component in the ecosystems of forests, connecting trees and plants underground, the Mycelium technology offers reliable connectivity in an efficient and resilient way.",
     description2=""
- 
 ) }}
 
-<div class="container mx-auto lg:pb-24 pb-12">
+<div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
 {{ 
     feature_card(
@@ -246,52 +233,79 @@ template = "index.html"
 
 
 
+<!-- Section 7 -->
 
-{{ hero3(
+<div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
-    announcement='',
+
-    subheader="WHAT'S NEW",
+{{ use_cases(
-    title="Coming Soon: The Future of Mycelium",
     subtitle="",
-    description="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.",
+    title="Frequently Asked Questions",
-    button1_text="Get started",
+    description="",
-    button1_link="#",
+    description2=""
-    button2_text="Learn more",
-    button2_link="#"
 ) }}
 
-{{ 
+<br>
-    hero2(
+
-        title="Welcome to Your Zola Site",
+{{ accordion(
-        subtitle="A modern, responsive website built with Zola and styled with Tailwind CSS", 
+    question="What is Mycelium?",
-        button_text="Learn More", 
+    description="Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications."
-        button_link="/blog", bg_color="bg-blue-700"
 ) }}
 
+{{ accordion(
+    question="Is mycelium ready to scale to the world?",
+    description="No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025."
+) }}
+
+{{ accordion(
+    question="How do I install Mycelium?",
+    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. Click here for more info."
+) }}
+
+{{ accordion(
+    question="How can I find and use my Mycelium address?",
+    description="Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface."
+) }}
+
+{{ accordion(
+    question="Can I deploy workloads on the TFGrid using Mycelium?",
+    description="Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation."
+) }}
+
+{{ accordion(
+    question="Is there an API available for Mycelium?",
+    description="Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository"
+    )
+    }}
+
+{{ accordion(
+    question="What should I do if I encounter issues during installation or usage?",
+    description="If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations."
+    )
+    }}
+
+{{ accordion(
+    question="How does Mycelium handle routing within its network?",
+    description="Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network."
+    )
+    }}
+
+</div>
 
 
-## About This Site
+<!-- Section 8 -->
 
-This is a modern, responsive website built with [Zola](https://www.getzola.org/) and styled with [Tailwind CSS](https://tailwindcss.com/). It demonstrates the use of shortcodes and markdown together to create beautiful, reusable components.
+{{ cta(
+    image_src="/images/mycel3.png",
+    image_alt="App screenshot",
+    title="Get Mycelium Today",
+    description="Join the Mycelium network and be a part of the decentralized movement.",
+    button_text="Download Now",
+    button_link="/download",
+    button_text2="Read More",
+    button_link2="https://threefold.info/mycelium/docs/"
+) }}
 
 
-
-
-
-
-### Getting Started
-
-To add new content, create Markdown files in the `content` directory. Zola will automatically generate pages for each file.
-
-For more information, check out the [Zola documentation](https://www.getzola.org/documentation/getting-started/overview/) and [Tailwind CSS documentation](https://tailwindcss.com/docs).
-
-{{ 
-    cta(
-        title="Ready to Get Started?", 
-        description="Create your own beautiful website with Zola and Tailwind CSS today.", 
-        button_text="View Blog", 
-        button_link="/blog") 
-}}
-
 <style scope>
   ul {
   list-style: circle;

content/about.md

@@ -77,16 +77,7 @@ We follow a systematic approach to ensure that every solution we deliver meets t
 5. **Deployment** - Smooth transition to production with minimal disruption
 6. **Support** - Ongoing assistance to ensure long-term success
 
-{{ 
+
-    cta(
-        title="Ready to Experience the Difference?", 
-        description="Join the many satisfied clients who have transformed their operations with our solutions.", 
-        button_text="Contact Us", 
-        button_link="#",
-        bg_color="bg-indigo-100",
-        text_color="text-indigo-800"
-    ) 
-}}
 
 ## Testimonials
 

templates/partials/navigation.html

@@ -17,7 +17,7 @@
         <div class="hidden md:block">
           <div class="ml-10 flex items-baseline space-x-4">
             <a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Home</a>
-            <a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Why</a>
+            <a href="{{ get_url(path='about') }}" class="{% if current_path is starting_with('/about') %}bg-gray-800 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">About</a>
             
             <!-- Dropdown menu -->
             <!-- <div class="dropdown">
@@ -35,18 +35,18 @@
               </div>
             </div> -->
             
-            <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
+            <!-- <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
-            <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Team</a>
+            <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Team</a> -->
           </div>
         </div>
       </div>
       <div class="hidden md:block">
         <div class="ml-4 flex items-center md:ml-6">
-          <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+          <!-- <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
             Zola Docs
-          </a>
+          </a> -->
-          <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+          <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="border rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
-            Tailwind Docs
+            Get Mycelium
           </a>
           <button id="theme-toggle" type="button" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white p-2 rounded-md ml-2 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-gray-300 dark:focus:ring-white">
             <!-- Sun icon (light mode) -->
@@ -81,27 +81,27 @@
   <div class="md:hidden hidden" id="mobile-menu">
     <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
       <a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Home</a>
-      <a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Why</a>
+      <a href="{{ get_url(path='about') }}" class="{% if current_path is starting_with('/about') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">About</a>
       
       <!-- Mobile dropdown menu -->
       <!-- <div class="relative" x-data="{ open: false }">
-        <button @click="open = !open" class="{% if current_path is starting_with('/why') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} w-full text-left flex justify-between items-center px-3 py-2 rounded-md text-base font-medium">
+        <button @click="open = !open" class="{% if current_path is starting_with('/about') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} w-full text-left flex justify-between items-center px-3 py-2 rounded-md text-base font-medium">
           Why Us
           <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
           </svg>
         </button>
         <div id="mobile-why-menu" class="hidden pl-4 py-2 space-y-1">
-          <a href="{{ get_url(path='why') }}" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
+          <a href="{{ get_url(path='about') }}" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
           <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Our Approach</a>
           <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Testimonials</a>
           <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Case Studies</a>
         </div>
       </div> -->
       
-      <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
+      <!-- <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
-      <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Team</a>
+      <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Team</a> -->
-      <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Zola Docs</a>
+      <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Get Mycelium</a>
       <button id="mobile-theme-toggle" type="button" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center">
         <span>Toggle Dark Mode</span>
         <svg id="mobile-theme-toggle-icon" class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

templates/shortcodes/accordion.html

@@ -0,0 +1,66 @@
+
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        inter: ['Inter', 'sans-serif'],
+                    },
+                },
+            },
+        };
+    </script>
+    <!-- <main class="fade-in relative flex flex-col justify-center overflow-hidden bg-white"> -->
+        <!-- <div class="w-full mx-auto px-4 md:px-6 py-12 border-t-2"> -->
+
+            <!-- <h1 class="text-3xl lg:text-4xl font-normal tracking-tight text-black pt-12">Frequently Asked Questions</h1> -->
+
+            <!-- Accordion component -->
+            <!-- <div class="divide-y divide-white/50 my-10"> -->
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-01"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 px-4 border rounded-lg"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-01"
+                        >
+                            <span class="">{{ question }}</span>
+                            <svg class="shrink-0 ml-8"  fill="gray" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                            </svg>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-01"
+                        role="region"
+                        aria-labelledby="faqs-title-01"
+                        class="grid text-sm overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                            {% if description %} 
+                            <p class="py-3 px-4 text-base font-light">
+                                {{ description }} 
+                            </p>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            <!-- </div>                                                                                              
+    </div> -->
+            <!-- End: Accordion component -->
+
+        <!-- </div>
+    </main> -->
+
+
+
+   

templates/shortcodes/cta.html

@@ -1,31 +1,26 @@
-{% set title = title | default(value="Call to Action") %}
+{% set title = title | default(value="") %}
 {% set description = description | default(value="") %}
-{% set button_text = button_text | default(value="Learn More") %}
+{% set button_text = button_text | default(value="") %}
-{% set button_link = button_link | default(value="#") %}
+{% set button_link = button_link | default(value="") %}
-{% set bg_color = bg_color | default(value="bg-indigo-100") %}
+{% set button_text2 = button_text2 | default(value="") %}
-{% set text_color = text_color | default(value="text-indigo-800") %}
+{% set button_link2 = button_link2 | default(value="") %}
-{% set button_color = button_color | default(value="bg-indigo-600") %}
+{% set image_src = image_src | default(value="") %}
-{% set button_text_color = button_text_color | default(value="text-white") %}
+{% set image_alt = image_alt | default(value="") %}
 
-<div class="relative {{ bg_color }} {{ text_color }} rounded-lg shadow-md overflow-hidden my-8">
+<div class="fade-in lg:pt-12">
-  <div class="px-6 py-8 md:p-10 md:flex md:items-center md:justify-between">
+  <div class="mx-auto max-w-7xl py-12">
-    <div class="md:flex-1">
+    <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">
-      <h3 class="text-2xl font-bold">{{ title }}</h3>
+      <div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
-      {% if description %}
+        <h2 class="text-4xl font-normal tracking-tight text-white lg:text-5xl">{{ title }}</h2>
-      <p class="mt-2 text-base">{{ description }}</p>
+        <p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">{{ description }}</p>
-      {% endif %}
+        <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
-      {% if caller %}
+          <a href="{{ button_link }}" 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">{{ button_text }}</a>
-        <div class="mt-4">
+          <a href="{{ button_link2 }}" class="text-sm/6 font-semibold text-white hover:text-gray-100">{{ button_text2 }} <span aria-hidden="true">→</span></a>
-          {{ caller() }}
         </div>
-      {% endif %}
       </div>
-    {% if button_text and button_link %}
+      <div class="relative mt-16 h-80 lg:mt-8">
-    <div class="mt-6 md:mt-0 md:ml-10 md:flex-shrink-0">
+        <img class="absolute top-0 left-0 w-[25rem] lg:w-[45rem] max-w-none rounded-2xl ring-1 ring-white/10" src="{{ image_src }}" alt="{{ image_alt }}" width="1824" height="1080">
-      <a href="{{ button_link }}" class="block w-full md:w-auto rounded-md px-5 py-3 {{ button_color }} {{ button_text_color }} text-base font-medium text-center shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+      </div>
-        {{ button_text }}
-      </a>
     </div>
-    {% endif %}
   </div>
 </div>

templates/shortcodes/hero_bottom_img.html

@@ -1,5 +1,5 @@
 <div class="lg:pt-24 pt-12">
-    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+    <div class="mx-auto max-w-7xl">
       <div class="mx-auto max-w-4xl text-left lg:text-center">
         <p class="text-base/7 font-light  tracking-wide">{{ subtitle }}</p>
         <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight "> {{ title }}</h2>

templates/shortcodes/hero_features.html

@@ -1,4 +1,4 @@
-<div class="fade-in bg-white container mx-auto">
+<div class="fade-in bg-white lg:max-w-7xl 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>

templates/shortcodes/hero_right_img.html

@@ -1,4 +1,4 @@
-<div class="py-24 lg:pt-0 fade-in bg-semi-white container mx-auto px-6 lg:px-8">
+<div class="py-24 lg:pt-0 fade-in bg-semi-white lg:max-w-7xl container mx-auto px-6 lg:px-8">
     <div class="relative isolate">
 
         <div class="mx-auto mt-10 lg:mt-0  lg:flex lg:items-center lg:gap-x-15 ">

templates/shortcodes/use_cases.html

@@ -1,4 +1,4 @@
-<div class="lg:pt-24 pt-12 container mx-auto px-6 lg:px-0">
+<div class="lg:pt-24 pt-12 lg:max-w-7xl container mx-auto px-6 lg:px-0">
   <div class="mx-auto">
     <div class="mx-auto">
       <p class="text-base font-light tracking-wide">{{ subtitle }}</p>