update features

This commit is contained in:
Ehab Hassan 2025-05-18 17:57:09 +03:00
parent efd5f04414
commit 24cf3950f5
9 changed files with 330 additions and 47 deletions

View File

@ -4,7 +4,7 @@ sort_by = "date"
template = "index.html"
+++
<!-- Hero section -->
<!-- Hero section 1 -->
{{ hero_img(
image_src="/images/mycel_1.png",
@ -18,6 +18,7 @@ template = "index.html"
button_link="/download"
) }}
<!-- section 2 -->
{{ hero_right_img(
@ -29,9 +30,8 @@ template = "index.html"
button_text="Learn more",
button_link="/about"
)
) }}
}}
<!-- section 3 -->
@ -58,12 +58,11 @@ template = "index.html"
{{ 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."
)
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">
<div class="container mx-auto px-6 lg:px-8 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">
@ -131,11 +130,9 @@ template = "index.html"
---------------------------------------------
<div class="mx-auto mt-10 px-6 lg:px-0 lg: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 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>
@ -150,12 +147,100 @@ template = "index.html"
}} -->
<!-- Section 5 -->
{{ hero_bottom_img(
image_src="/images/future.png",
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 whats coming next by staying connected with our latest updates."
)
}}
<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=""
)
}}
{{ feature_card(
title="✓ Entry and Exit Points for AI Workloads",
description="Seamlessly connect AI applications to Mycelium, providing optimized nd secured data pipelines for training, inference, and real-time processing.",
icon="") }}
{{ feature_card(
title="✓ Data Storage and Retrieval Mechanisms",
description="Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.",
icon="") }}
{{ feature_card(
title="✓ Integrated Name Services (DNS)",
description="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.",
icon="") }}
{{ feature_card(
title="✓ Frontend/Backend Integration",
description="Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.",
icon="") }}
{{ feature_card(
title="✓ CDN (Content Delivery Network)",
description="Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.",
icon="") }}
</div>
</div>
<!-- Section 6 -->
{{ 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."
description2=""
) }}
<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="Decentralization",
description="Designed to operate in a decentralized manner, it connects nodes and enables efficient data transfer and communication without relying on a single central authority.",
icon="/images/decentralization.svg") }}
{{ feature_card(
title="Efficiency",
description="Mycelium provides an efficient digital communication network where data travels along the most efficient paths, reducing latency and optimizing resource utilization.",
icon="/images/efficiency.svg") }}
{{ feature_card(
title="Resilience",
description="Inspired by nature's resilience, it creates a network that can adapt and continue to function even in the presence of challenges, ensuring uninterrupted communication.",
icon="/images/resilience.svg") }}
</div>
</div>
{{ hero3(
announcement='',
subheader="",
title="Built for Everyone by Everyone, Everywhere",
subheader="WHAT'S NEW",
title="Coming Soon: The Future of Mycelium",
subtitle="",
description="ThreeFold is a fully operational, decentralized internet infrastructure deployed locally, scalable globally, and owned and powered by the people.",
description="Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore whats coming next by staying connected with our latest updates.",
button1_text="Get started",
button1_link="#",
button2_text="Learn more",
@ -179,26 +264,7 @@ This is a modern, responsive website built with [Zola](https://www.getzola.org/)
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
{{
feature_card(
title="Fast and Lightweight",
description="Zola generates static HTML files that load quickly",
icon="⚡"
)
}}
{{ feature_card(title="Modern Design", description="Tailwind CSS provides utility classes for rapid UI development", icon="🎨") }}
{{ feature_card(title="Responsive Layout", description="Looks great on all devices, from mobile to desktop", icon="📱") }}
{{ feature_card(title="Markdown Content", description="Write your content in Markdown for easy formatting", icon="📝") }}
{{ feature_card(title="Syntax Highlighting", description="Code blocks are automatically highlighted", icon="💻") }}
{{ feature_card(title="Search Functionality", description="Built-in search for your content", icon="🔍") }}
</div>
### Getting Started

View File

@ -18,10 +18,10 @@ html {
/* Light mode (default) */
body {
background-color: #f3f4f6;
color: #303030;
color: #171717;
}
header nav {
background-color: #303030;
background-color: #171717;
color: #f9fafb;
}
footer {
@ -37,10 +37,10 @@ html {
color: #f9fafb !important;
}
html.dark header nav {
background-color: #303030 !important;
background-color: #171717 !important;
}
html.dark footer {
background-color: #303030 !important;
background-color: #171717 !important;
}
html.dark footer p {
color: #9ca3af !important;
@ -52,10 +52,10 @@ html {
color: #93c5fd !important;
}
html.dark .bg-gray-100 {
background-color: #303030 !important;
background-color: #171717 !important;
}
html.dark .bg-white {
background-color: #303030 !important;
background-color: #171717 !important;
}
html.dark .text-gray-900 {
color: #f9fafb !important;

View File

@ -0,0 +1,76 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<defs>
<style>
.cls-1 {
fill: #000;
}
.cls-1, .cls-2, .cls-3 {
stroke-width: 0px;
}
.cls-4 {
clip-path: url(#clippath-2);
}
.cls-2 {
fill: #a6a6a6;
}
.cls-3 {
fill: none;
}
.cls-5 {
clip-path: url(#clippath-1);
}
.cls-6 {
clip-path: url(#clippath-4);
}
.cls-7 {
clip-path: url(#clippath);
}
.cls-8 {
clip-path: url(#clippath-3);
}
</style>
<clipPath id="clippath">
<rect class="cls-3" x="9.6" y="9.5" width="31.3" height="31.3"/>
</clipPath>
<clipPath id="clippath-1">
<rect class="cls-3" x="21.1" y="4.7" width="8.3" height="8.6"/>
</clipPath>
<clipPath id="clippath-2">
<rect class="cls-3" x="21.1" y="36.6" width="8.3" height="8.7"/>
</clipPath>
<clipPath id="clippath-3">
<rect class="cls-3" x="37" y="27.4" width="7.7" height="9.2"/>
</clipPath>
<clipPath id="clippath-4">
<rect class="cls-3" x="37" y="12.4" width="7.7" height="10"/>
</clipPath>
</defs>
<g class="cls-7">
<path class="cls-2" d="M40.5,24.9c0,1-.1,2-.3,3,0,.5-.2,1-.4,1.5-.1.5-.3,1-.5,1.4-.4.9-.9,1.8-1.4,2.7-.6.8-1.2,1.6-1.9,2.3-.4.4-.7.7-1.1,1-.4.3-.8.6-1.2.9-3,2-6.5,2.9-10.1,2.5-.5,0-1-.1-1.5-.2-.5-.1-1-.2-1.5-.4-.5-.1-1-.3-1.4-.5-.9-.4-1.8-.9-2.7-1.4-.4-.3-.8-.6-1.2-.9-.8-.6-1.5-1.4-2.1-2.1-.3-.4-.6-.8-.9-1.2-.6-.8-1-1.7-1.4-2.7-.2-.5-.4-.9-.5-1.4-.1-.5-.3-1-.4-1.5-.1-.5-.2-1-.2-1.5,0-.5,0-1,0-1.5s0-1,0-1.5c0-.5.1-1,.2-1.5,0-.5.2-1,.4-1.5.6-1.9,1.6-3.8,2.8-5.3.3-.4.7-.8,1-1.1.4-.4.7-.7,1.1-1,1.2-1,2.5-1.8,3.9-2.3.5-.2.9-.4,1.4-.5,1.5-.4,3-.7,4.5-.7,1,0,2,.1,3,.3.5.1,1,.2,1.5.4,1,.3,1.9.7,2.8,1.2.4.2.9.5,1.3.8.4.3.8.6,1.2.9.4.3.8.7,1.1,1,.4.4.7.7,1,1.1.3.4.6.8.9,1.2,1.7,2.5,2.6,5.5,2.6,8.6Z"/>
</g>
<path class="cls-1" d="M28.5,22.5l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c0,0,.2,0,.3,0,.1,0,.2,0,.3,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM27.6,26.4l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
<g class="cls-5">
<path class="cls-1" d="M28.5,6.6l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.1,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c0,0,.2,0,.3,0,.1,0,.2,0,.3,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM27.6,10.5l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
</g>
<g class="cls-4">
<path class="cls-1" d="M28.5,38.6l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c0,0,.2,0,.3,0,.1,0,.2,0,.3,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM27.6,42.4l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
</g>
<path class="cls-1" d="M12.5,29.9l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c.2.1.4.1.6,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM11.6,33.7l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
<g class="cls-8">
<path class="cls-1" d="M44.5,29.9l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c.2.1.4.1.6,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM43.6,33.7l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
</g>
<path class="cls-1" d="M12.5,15.1l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c.2.1.4.1.6,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5h0ZM11.6,19l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
<g class="cls-6">
<path class="cls-1" d="M44.5,15.1l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c.2.1.4.1.6,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5h0ZM43.6,19l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
</g>
<path class="cls-1" d="M9.7,26.5v-3.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.1c0,.3.3.6.6.6s.6-.3.6-.6h0ZM25.7,34.4v-3.1c0-.3-.3-.6-.6-.6-.3,0-.6.3-.6.6h0v3.1c0,.3.3.6.6.6.3,0,.6-.3.6-.6,0,0,0,0,0,0ZM18.9,37.4l-3.7-2.3c-.3-.2-.7,0-.9.2s0,.7.2.9h0l3.7,2.3c.3.2.7,0,.9-.2.2-.3,0-.7-.2-.9ZM34.7,35.1l-3.7,2.3c-.3.2-.4.6-.2.9.1.2.3.3.5.3.1,0,.2,0,.3,0l3.7-2.3c.3-.2.4-.6.2-.9-.2-.3-.6-.4-.8-.2ZM31,12.5l3.7,2.3c0,0,.2,0,.3,0,.2,0,.4-.1.5-.3.2-.3,0-.7-.2-.9l-3.7-2.3c-.3-.2-.7,0-.9.2,0,0,0,0,0,0-.2.3,0,.7.2.9ZM15.1,14.8c.1,0,.2,0,.3,0l3.7-2.3c.3-.2.4-.6.2-.9-.2-.3-.6-.4-.9-.2l-3.7,2.3c-.3.2-.4.6-.2.9.1.2.3.3.5.3ZM25.7,18.5v-3.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.1c0,.3.3.6.6.6.3,0,.6-.3.6-.6,0,0,0,0,0,0ZM41.7,26.5v-3.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.1c0,.3.3.6.6.6s.6-.3.6-.6h0ZM19.2,21.6l-3.7-1.8c-.3-.1-.7,0-.8.3,0,0,0,0,0,0-.1.3,0,.7.3.8l3.7,1.8c0,0,.2,0,.3,0,.2,0,.5-.1.6-.4.1-.3,0-.7-.3-.8ZM31.3,22.8c0,0,.2,0,.3,0l3.7-1.8c.3-.1.5-.5.3-.8-.1-.3-.5-.5-.8-.3,0,0,0,0,0,0l-3.7,1.8c-.3.1-.4.5-.3.8.1.2.3.4.6.4ZM35.3,29.2l-3.7-1.8c-.3-.1-.7,0-.8.3,0,0,0,0,0,0-.1.3,0,.7.3.8h0s3.7,1.8,3.7,1.8c0,0,.2,0,.3,0,.3,0,.6-.3.6-.6,0-.2-.1-.5-.4-.6ZM18.6,27.4l-3.7,1.8c-.3.1-.4.5-.3.8.1.2.3.4.6.4,0,0,.2,0,.3,0l3.7-1.8c.3-.1.4-.5.3-.8-.1-.3-.5-.4-.8-.3,0,0,0,0,0,0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<defs>
<style>
.cls-1 {
fill: #000;
}
.cls-1, .cls-2, .cls-3 {
stroke-width: 0px;
}
.cls-2 {
fill: #a6a6a6;
}
.cls-3 {
fill: none;
}
.cls-4 {
clip-path: url(#clippath);
}
</style>
<clipPath id="clippath">
<rect class="cls-3" x="9.6" y="9.5" width="31.2" height="31.2"/>
</clipPath>
</defs>
<g class="cls-4">
<path class="cls-2" d="M40.5,25c0,1-.1,2-.3,3-.1.5-.2,1-.4,1.5-.1.5-.3,1-.5,1.4-.4.9-.9,1.8-1.4,2.7-.6.8-1.2,1.6-1.9,2.3-1.1,1.1-2.3,2-3.6,2.7-.4.2-.9.5-1.4.6-.5.2-.9.4-1.4.5-.5.1-1,.3-1.5.4-2,.4-4,.4-6,0-1-.2-2-.5-2.9-.9-1.4-.6-2.7-1.4-3.9-2.3-.4-.3-.8-.7-1.1-1-1.1-1.1-2-2.3-2.7-3.6-.2-.4-.5-.9-.6-1.4-.2-.5-.4-.9-.5-1.4-.4-1.5-.7-3-.7-4.5,0-1,.1-2,.3-3,.1-.5.2-1,.4-1.5.6-1.9,1.6-3.8,2.8-5.3.3-.4.7-.8,1-1.1.4-.4.7-.7,1.1-1,.4-.3.8-.6,1.2-.9,2.5-1.7,5.5-2.6,8.6-2.6,1,0,2,.1,3,.3.5.1,1,.2,1.5.4.5.1,1,.3,1.4.5.9.4,1.8.9,2.7,1.4.8.6,1.6,1.2,2.3,1.9.4.4.7.7,1,1.1.3.4.6.8.9,1.2,1.7,2.5,2.6,5.5,2.6,8.6Z"/>
</g>
<path class="cls-1" d="M24.4,22.7c.2-.5,0-1.1-.5-1.3,0,0,0,0,0,0-1.3-.6-2.8-1-4.3-1-1.3,0-2.6.3-3.9.8-1.2.5-2.3,1.2-3.2,2.1-.9.9-1.6,2-2.1,3.2-.5,1.2-.8,2.5-.8,3.9,0,1.3.3,2.6.8,3.9,1,2.4,2.9,4.3,5.3,5.3,1.2.5,2.5.8,3.9.8s2.6-.3,3.9-.8c2.4-1,4.3-2.9,5.3-5.3.5-1.2.8-2.5.8-3.9s-.3-2.9-.9-4.2c-.2-.5-.8-.7-1.3-.5-.5.2-.7.8-.5,1.3.5,1.1.8,2.2.8,3.4,0,2.1-.8,4.1-2.3,5.6-1.5,1.5-3.5,2.3-5.6,2.3-2.1,0-4.1-.8-5.6-2.3-1.5-1.5-2.3-3.5-2.3-5.6,0-2.1.8-4.1,2.3-5.6,1.5-1.5,3.5-2.3,5.6-2.3,1.2,0,2.4.3,3.4.8.5.2,1.1,0,1.3-.5h0Z"/>
<path class="cls-1" d="M30.7,22.2c-.5.3-.6.9-.3,1.4,1.3,2,1.9,4.3,1.9,6.7,0,1.7-.3,3.4-1,4.9-.6,1.5-1.6,2.9-2.7,4-1.2,1.2-2.5,2.1-4,2.7-1.6.7-3.2,1-4.9,1-1.7,0-3.4-.3-4.9-1-1.5-.6-2.9-1.6-4-2.7-1.2-1.2-2.1-2.5-2.7-4-.7-1.6-1-3.2-1-4.9,0-5.3,3.2-10,8.2-11.8,1.4-.5,3-.8,4.5-.8,2.4,0,4.7.7,6.7,1.9.5.3,1.1.1,1.4-.4.3-.5.1-1-.3-1.3-2.3-1.4-5-2.2-7.7-2.2-1.8,0-3.5.3-5.2.9-5.7,2.2-9.5,7.6-9.5,13.7,0,3.9,1.5,7.6,4.3,10.4,1.3,1.3,2.9,2.4,4.7,3.1,1.8.8,3.7,1.2,5.7,1.2,3.9,0,7.6-1.5,10.4-4.3,2.8-2.7,4.3-6.5,4.3-10.4,0-2.8-.8-5.5-2.2-7.8-.3-.5-.9-.6-1.4-.3Z"/>
<path class="cls-1" d="M44.9,12.9c-.1-.4-.4-.6-.8-.7l-5-.8c-.1-.2-.3-.4-.5-.5l-.8-5c0-.4-.3-.7-.7-.8-.4-.1-.8,0-1,.2l-6.4,6.4c-.2.2-.3.5-.3.9l.9,5.7-11,11c-.4.4-.4,1,0,1.4.2.2.4.3.7.3.3,0,.5,0,.7-.3l11-11,5.7.9c.3,0,.6,0,.9-.3l6.4-6.4c.3-.3.4-.7.2-1h0ZM36.1,8.1l.6,3.8-4.6,4.6-.6-3.8,4.6-4.6ZM37.2,18.5l-3.8-.6,4.6-4.6,3.8.6-4.6,4.6Z"/>
<path class="cls-1" d="M19.7,27.7c.1,0,.2,0,.4,0,.5,0,1.1-.3,1.1-.9,0-.5-.3-1.1-.9-1.1h0c-.2,0-.4,0-.6,0-2.6,0-4.7,2.1-4.7,4.7,0,2.6,2.1,4.7,4.7,4.7,2.6,0,4.7-2.1,4.7-4.7,0-.2,0-.4,0-.6,0-.5-.6-.9-1.2-.8-.5,0-.9.6-.8,1.1,0,.1,0,.2,0,.4,0,1.5-1.2,2.7-2.7,2.7-1.5,0-2.7-1.2-2.7-2.7,0-1.5,1.2-2.7,2.7-2.7Z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<defs>
<style>
.cls-1 {
fill: #000;
}
.cls-1, .cls-2, .cls-3 {
stroke-width: 0px;
}
.cls-2 {
fill: #a6a6a6;
}
.cls-3 {
fill: none;
}
.cls-4 {
clip-path: url(#clippath-1);
}
.cls-5 {
clip-path: url(#clippath);
}
</style>
<clipPath id="clippath">
<rect class="cls-3" x="9.4" y="9.5" width="31.2" height="31.3"/>
</clipPath>
<clipPath id="clippath-1">
<rect class="cls-3" x="8.4" y="5" width="33.1" height="40"/>
</clipPath>
</defs>
<g class="cls-5">
<path class="cls-2" d="M40.3,25c0,.5,0,1,0,1.5-.2,2-.8,4-1.8,5.8-.2.4-.5.9-.8,1.3-.3.4-.6.8-.9,1.2-.6.8-1.4,1.5-2.1,2.1-.4.3-.8.6-1.2.9-.4.3-.9.5-1.3.8-.9.5-1.8.9-2.8,1.2-.5.1-1,.3-1.5.4-1.5.3-3,.4-4.5.2-.5,0-1-.1-1.5-.2-.5-.1-1-.2-1.5-.4-.5-.1-1-.3-1.4-.5-.5-.2-.9-.4-1.4-.6-.4-.2-.9-.5-1.3-.8-.4-.3-.8-.6-1.2-.9-.8-.6-1.5-1.4-2.1-2.1-.3-.4-.6-.8-.9-1.2-.3-.4-.5-.9-.8-1.3-.5-.9-.9-1.8-1.2-2.8-.7-2.4-.9-5-.4-7.5,0-.5.2-1,.4-1.5.2-.5.3-1,.5-1.4.2-.5.4-.9.6-1.4.5-.9,1-1.7,1.7-2.5.6-.8,1.4-1.5,2.1-2.1.4-.3.8-.6,1.2-.9.4-.3.9-.5,1.3-.8.4-.2.9-.5,1.4-.6.5-.2.9-.4,1.4-.5,1.5-.4,3-.7,4.5-.7,1,0,2,0,3,.3.5,0,1,.2,1.5.4,1,.3,1.9.7,2.8,1.2.4.2.9.5,1.3.8.4.3.8.6,1.2.9.4.3.8.7,1.1,1s.7.7,1,1.1c.6.8,1.2,1.6,1.7,2.5.2.4.5.9.6,1.4.2.5.4.9.5,1.4.3,1,.5,2,.6,3,0,.5,0,1,0,1.5Z"/>
</g>
<g class="cls-4">
<path class="cls-1" d="M40.8,10.4c-.3-.3-.7-.4-1-.3-.8,0-1.6.1-2.4.1-5.8,0-9.9-2.2-10.9-4.4-.2-.5-.7-.8-1.2-.8h-.8c-.5,0-1,.3-1.2.8-1,2.2-5.1,4.4-10.9,4.4s-1.6,0-2.4-.1c-.4,0-.8,0-1,.3-.3.3-.4.6-.4,1v8c0,10.9,6.1,20.6,15.8,25.4.4.2.8.2,1.2,0,9.8-4.8,15.8-14.6,15.8-25.4v-8c0-.4-.2-.7-.4-1h0ZM38.6,19.4c0,9.6-5.3,18.3-13.8,22.7-8.5-4.5-13.8-13.1-13.8-22.7v-6.6c.4,0,.8,0,1.2,0,5.5,0,10.3-1.8,12.5-4.7,2.2,2.8,7,4.7,12.5,4.7s.8,0,1.2,0v6.6ZM35.1,17.5c.5.5.5,1.4,0,1.9,0,0,0,0,0,0l-11.6,11.2c-.2.2-.6.4-.9.4h0c-.4,0-.7-.2-.9-.4l-4.2-4.7c-.5-.6-.4-1.4.1-1.9.5-.5,1.3-.4,1.8,0l3.3,3.7,10.6-10.2c.5-.5,1.4-.5,1.9,0,0,0,0,0,0,0h0Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -50,7 +50,7 @@
</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) -->
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<!-- Moon icon (dark mode) -->

View File

@ -4,15 +4,16 @@
{% set bg_color = bg_color | default(value="bg-white") %}
{% set hover_color = hover_color | default(value="hover:bg-gray-50") %}
<div class="relative {{ bg_color }} {{ hover_color }} shadow rounded-lg p-6 transition-all duration-300">
<div class="relative {{ bg_color }} {{ hover_color }} shadow rounded-lg p-4 transition-all duration-300">
{% if icon %}
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
<span class="text-xl">{{ icon | safe }}</span>
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-200 text-white mb-4">
<img src="{{ icon | safe }}" class="">
</div>
{% endif %}
<h3 class="text-lg font-medium text-gray-900">{{ title }}</h3>
<h3 class="text-md font-medium">{{ title }}</h3>
{% if description %}
<p class="mt-2 text-base text-gray-500">{{ description }}</p>
<p class="mt-2 text-base">{{ description }}</p>
{% endif %}
{% if caller %}
<div class="mt-4">

View File

@ -0,0 +1,61 @@
<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-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>
<p class="mt-6 text-lg font-light lg:text-xl">{{ description }}</p>
</div>
</div>
<div class="relative overflow-hidden pt-2">
<div class="mx-auto max-w-7xl px-4 lg:px-8 flex items-center justify-center">
<img src="{{ image_src }}" alt="{{ image_alt }}" 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-4 text-base/7 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 lg:pl-9">
<dt class="inline font-semibold ">
✓ Quantum Safe Storage Functionality
</dt>
<dd class="font-light">Myceliums quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.</dd>
</div>
<div class="relative lg:pl-9">
<dt class="inline font-semibold ">
✓ 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 lg:pl-9">
<dt class="inline font-semibold ">
✓ 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 lg:pl-9">
<dt class="inline font-semibold ">
✓ 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 lg:pl-9">
<dt class="inline font-semibold ">
✓ 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 lg:pl-9">
<dt class="inline font-semibold ">
✓ CDN (Content Delivery Network)
</dt>
<dd class="font-light">Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.</dd>
</div>
</dl>
</div> -->
</div>

View File

@ -1,10 +1,11 @@
<div class="lg:py-24 py-12 container mx-auto px-6 lg:px-8">
<div class="lg:pt-24 pt-12 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>
<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>
<p class="mt-6 text-lg font-light">{{ description2 }}</p>
</div>
</div>
<!-- <div class="mx-auto mt-10">