ourworld_web/www_zola_template
20
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update mycelium template

Browse Source
This commit is contained in:
Ehab Hassan 2025-05-13 00:08:22 +03:00
parent fde1b767c4
commit fe1df2ac35
9 changed files with 69 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
content/_index.md
View File

@ -4,12 +4,16 @@ sort_by = "date"
template = "index.html" template = "index.html"
+++ +++
{{ hero_img()
}}
{{ hero3( {{ hero3(
announcement='<a href="#" class="font-semibold text-gray-300 hover:text-white">Read more &rarr;</a>', announcement='',
subheader="SUBHEADER", subheader="",
title="This is Hero1.htmll", title="Built for Everyone by Everyone, Everywhere",
subtitle="This is smaller title h2", subtitle="",
description="Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.", description="ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.",
button1_text="Get started", button1_text="Get started",
button1_link="#", button1_link="#",
button2_text="Learn more", button2_text="Learn more",

2
static/css/main.css
View File

@ -46,7 +46,7 @@ html {
color: #9ca3af !important; color: #9ca3af !important;
} }
html.dark a { html.dark a {
color: #60a5fa !important; color: white !important;
} }
html.dark a:hover { html.dark a:hover {
color: #93c5fd !important; color: #93c5fd !important;

BIN
static/images/mycel_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
static/images/mycelium_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/images/mycelium_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

6
templates/base.html
View File

@ -10,7 +10,7 @@
<script src="{{ get_url(path='js/main.js') }}" defer></script> <script src="{{ get_url(path='js/main.js') }}" defer></script>
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body class="bg-gray-100 min-h-screen flex flex-col"> <body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-white min-h-screen flex flex-col transition-colors duration-200">
<header> <header>
{% include "partials/navigation.html" %} {% include "partials/navigation.html" %}
</header> </header>
@ -21,9 +21,9 @@
</div> </div>
</div> </div>
</main> </main>
<footer class="bg-white shadow mt-auto"> <footer class="bg-white dark:bg-gray-900 shadow mt-auto">
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
<p class="text-center text-gray-500"> <p class="text-center text-gray-500 dark:text-gray-400">
&copy; {{ now() | date(format="%Y") }} {{ config.title }} &copy; {{ now() | date(format="%Y") }} {{ config.title }}
</p> </p>
</div> </div>

44
templates/partials/navigation.html
View File

@ -1,18 +1,18 @@
<nav class="bg-gray-800"> <nav class="bg-white dark:bg-gray-800 transition-colors duration-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16"> <div class="flex items-center justify-between h-16">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<a href="{{ config.base_url }}" class="text-white font-bold text-xl">{{ config.title }}</a> <a href="{{ config.base_url }}" class="text-gray-800 dark:text-white font-bold text-xl">{{ config.title }}</a>
</div> </div>
<div class="hidden md:block"> <div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4"> <div class="ml-10 flex items-baseline space-x-4">
<a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Home</a> <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-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Why</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>
<!-- Dropdown menu --> <!-- Dropdown menu -->
<!-- <div class="dropdown"> <!-- <div class="dropdown">
<button class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium inline-flex items-center" id="why-menu-button"> <button 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 inline-flex items-center" id="why-menu-button">
Why Us Why Us
<svg class="ml-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="ml-1 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" /> <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" />
@ -26,20 +26,20 @@
</div> </div>
</div> --> </div> -->
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 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-900 text-white{% else %}text-gray-300 hover:bg-gray-700 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>
</div> </div>
<div class="hidden md:block"> <div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6"> <div class="ml-4 flex items-center md:ml-6">
<a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 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 Zola Docs
</a> </a>
<a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"> <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">
Tailwind Docs Tailwind Docs
</a> </a>
<button id="theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> <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) --> <!-- 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="currentColor" 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> <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>
@ -53,7 +53,7 @@
</div> </div>
<div class="-mr-2 flex md:hidden"> <div class="-mr-2 flex md:hidden">
<!-- Mobile menu button --> <!-- Mobile menu button -->
<button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> <button type="button" class="bg-white dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-gray-300 dark:focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span> <span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed --> <!-- Icon when menu is closed -->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@ -71,29 +71,29 @@
<!-- Mobile menu, show/hide based on menu state. --> <!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden hidden" id="mobile-menu"> <div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <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-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Home</a> <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-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Why</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>
<!-- Mobile dropdown menu --> <!-- Mobile dropdown menu -->
<!-- <div class="relative" x-data="{ open: false }"> <!-- <div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 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('/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">
Why Us Why Us
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <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" /> <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> </svg>
</button> </button>
<div id="mobile-why-menu" class="hidden pl-4 py-2 space-y-1"> <div id="mobile-why-menu" class="hidden pl-4 py-2 space-y-1">
<a href="{{ get_url(path='why') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a> <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="#" class="text-gray-300 hover:bg-gray-700 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">Our Approach</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 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">Testimonials</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Case Studies</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>
</div> --> </div> -->
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 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-900 text-white{% else %}text-gray-300 hover:bg-gray-700 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-300 hover:bg-gray-700 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">Zola Docs</a>
<button id="mobile-theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center"> <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> <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"> <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">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>

6
templates/shortcodes/hero3.html
View File

@ -1,6 +1,6 @@
<div class="fade-in flex items-center justify-center "> <div class="fade-in flex items-center justify-center ">
<div class="relative isolate px-6 pt-14 lg:px-8"> <div class="relative isolate px-6 pt-14 lg:px-8">
<div class="mx-auto max-w-7xl py-12"> <div class="mx-auto max-w-3xl py-12">
<div class="hidden sm:mb-8 sm:flex sm:justify-center"> <div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500"> <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
{{ announcement | safe }} {{ announcement | safe }}
@ -8,9 +8,9 @@
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-base/7 font-light tracking-wide">{{ subheader }}</p> <p class="text-base/7 font-light tracking-wide">{{ subheader }}</p>
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance">{{ title }}</h1> <h1 class="fade-in text-balance font-normal tracking-tight leading-tight lg:text-6xl text-3xl">{{ title }}</h1>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight">{{ subtitle }}</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight">{{ subtitle }}</h2>
<p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">{{ description }}</p> <p class="mt-8 lg:text-xl font-light text-gray-50 sm:text-xl/8">{{ description }}</p>
<div class="mt-10 flex items-center justify-center gap-x-6"> <div class="mt-10 flex items-center justify-center gap-x-6">
<a href="{{ button1_link }}" class="rounded-2xl bg-gray-300 px-4 py-2 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">{{ button1_text }}</a> <a href="{{ button1_link }}" class="rounded-2xl bg-gray-300 px-4 py-2 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">{{ button1_text }}</a>
<a href="{{ button2_link }}" class="text-sm/6 font-semibold hover:text-gray-300">{{ button2_text }} <span aria-hidden="true">→</span></a> <a href="{{ button2_link }}" class="text-sm/6 font-semibold hover:text-gray-300">{{ button2_text }} <span aria-hidden="true">→</span></a>

31
templates/shortcodes/hero_img.html Normal file
View File

@ -0,0 +1,31 @@
<div class="flex flex-col lg:flex-row-reverse items-center overflow-hidden bg-white pt-10">
<!-- Image first on mobile, right on desktop -->
<div class="w-full lg:w-1/2 h-80 lg:h-full">
<img src="/images/mycel_1.png"
alt="Mycelium Network Graphic"
class="w-full h-full object-cover object-center" />
</div>
<!-- Text Content -->
<div class="w-full lg:w-1/2 px-6 py-12 lg:px-16 lg:py-32">
<div class="max-w-2xl mx-auto">
<h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
MYCELIUM
</h1>
<h2 class="fade-in text-3xl lg:text-4xl font-normal tracking-tight mt-4">
Unleashing the Power of<br> Decentralized Networks
</h2>
<p class="mt-8 text-lg lg:text-xl font-light">
Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking. <br><br>
<b>Coming Soon: New Decentralized Features</b>
</p>
<div class="mt-10">
<a href="/download" 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">
Get Mycelium
</a>
</div>
</div>
</div>
</div>