diff --git a/content/_index.md b/content/_index.md index 08111b9..da07e40 100644 --- a/content/_index.md +++ b/content/_index.md @@ -7,5 +7,5 @@ draft: false sort_by: weight weight: 1 extra: - logo_path: images/logo.svg + logo_path: images/logo.png --- diff --git a/content/footer/_index.md b/content/footer/_index.md index 593840f..571cc3b 100644 --- a/content/footer/_index.md +++ b/content/footer/_index.md @@ -4,7 +4,7 @@ description: "" insert_anchor_links: "left" template: "partials/footer.html" extra: - logoPath: "images/logo.svg" + logoPath: "images/logo.png" socialLinks: { Github: "https://github.com/ourworldfreezone", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews" } --- diff --git a/content/home/img/hero2.png b/content/home/img/hero2.png new file mode 100644 index 0000000..7d839b8 Binary files /dev/null and b/content/home/img/hero2.png differ diff --git a/content/home/index.md b/content/home/index.md index 11646db..730b383 100644 --- a/content/home/index.md +++ b/content/home/index.md @@ -9,75 +9,93 @@ weight: 1 -{% row(style="left" margin="narrow" reverse="rightreserve" padding="top") %} - -
+{% row(style="left" margin="hero" padding="top") %} -


-# Become the Hero of your own digital world. -### Start owning your data and digital life. -

With Hero, we can build a conscious collective intelligence together.

+![placeholder](./img/hero2.png#mx-auto) + +||| + +# Start Owning Your Data
and Digital Life +### With **Hero**, We Can Build a Conscious Collective Intelligence Together. + + +

Meet Hero: your unique digital avatar, streamlining your online presence by eliminating the need for duplicate identities across platforms.


- -
- -
- -||| - -![placeholder](./img/img_header.png#mx-auto) - {% end %} + +{% row(style="center" padding="top") %} + +[![logo1](img/brand1.png#sm)](yourlink) + +||| + +[![logo2](img/brand2.png#sm)](yourlink) + +||| + +[![logo3](img/brand3.png#sm)](yourlink) + +||| + +[![logo3](img/brand5.png#sm)](yourlink) + +||| + +[![logo4](img/brand2.png#sm)](yourlink) + +{% end %} -{% row(style="left" margin="hero" padding="bottom") %} -![placeholder](./img/img_section.png#mx-auto) +{% row(style="right" margin="hero" reverse="rightreserve" padding="bottom") %} -||| -## Everyone can be a Hero +## Everyone Can be a Hero -

Hero is your own personal intelligent digital identity that fosters a collective intelligence and empower everyone to enhance our digital existence with unfettered access to essential tools for learning, participating, and thriving within the Mycelium Network.

+### Discover how Hero empowers
everyone to become digital pioneers. + +

Heroes were designed with technologies
that promote universal accessibility,
freedom, equality, and personal growth for all.


-
-
+


-
-
+
→ Learn More about Hero
 + +||| + + + +![placeholder](./img/img_section.png#mx-auto) -
-

→ Learn More About Hero

 {% end %} @@ -86,14 +104,15 @@ weight: 1 +
{% row(style="center" margin="withContainer" padding="none") %} -## Our Alter Ego within the Mycelium Network - +## Hero: The Digital Identity Within the Mycelium Network +### Your Gateway to True Decentralized Internet ![](img/mycelium.png#mx-auto) {% end %} @@ -101,7 +120,7 @@ weight: 1 {% row(style="center" margin="hero" padding="bottom") %} -

Discover how Mycelium Network is revolutionizing internet access with a decentralized, community-powered approach. We aim to empower individuals worldwide by enabling them to own and manage internet resources collectively.

+

Discover how Mycelium Network is revolutionizing internet access with a community-powered connectivity approach. We aim to empower individuals worldwide by enabling them to own and manage internet resources collectively.


@@ -121,11 +140,11 @@ weight: 1 ||| ## Powered by Mycelium Nodes -### h3 h3 h3 h3 +### The Fundamental Building Blocks of Decentralized Internet -

Mycelium Network and Heroes exist thanks to a vast network of cloud capacity deployed by ‘Farmers’- who deploy Mycelium Nodes in supporting locations worldwide.

+

Mycelium Network and Heroes exist thanks to a vast network of cloud capacity deployed by ‘Farmers’- who deploy Mycelium Nodes in supporting locations worldwide.

-br> +
@@ -134,9 +153,9 @@ br>

@@ -150,7 +169,7 @@ br>
-

→ Learn More About Mycelium Nodes

 +
→ Learn More about Mycelium Nodes
 {% end %} @@ -165,40 +184,41 @@ br> {% row(style="center" margin="hero" padding="bottom") %} ## Join The Movement +### A New Era of Digital Sovereignty -

Hero invites you to your new sovereign digital life with 3 easy steps

+

Embark on a journey towards digital sovereignty with Hero, where you take a full control of your online identity and data, starting with these 3 easy steps:

{% end %} {% row(style="center" margin="narrow" padding="bottom") %} -
+
-![Image](./img/item1.png#mx-auto) +![Image](img/item1.png#3col) -#### Get A Node & Earn -

Get a Mycelium Node and add capacity to the Mycelium Network.

+#### __Get A Node & Earn__ +

Get a Mycelium Node and add capacity to the Mycelium Network.

||| -
+
-![Image](./img/item2.png#mx-auto) +![Image](img/item1.png#3col) -#### Get Your Hero -

Register and reserve your own Hero - your sovereign digital identity.

+#### __Activate Your Hero__ +

Reserve and activate your own Hero - your sovereign digital identity.

||| -
+
-![Image](./img/item3.png#mx-auto) +![Image](img/item3.png#3col) -#### Acquire INCA Token -

Purchase INCA - The digital currency of the Mycelium Network.

+#### __Acquire INCA Tokens__ +

Purchase INCA Tokens- The digital currency of the Mycelium Network.

@@ -217,7 +237,7 @@ br> ## Hero Xperiences -

Dive into a world of fully decentralized and completely secure applications on the Mycelium Network, built to empower and enable our Heroes with innovative digital Xperiences.

+

Dive into a world of fully decentralized and completely secure applications on the Mycelium Network, built to empower and enable our Heroes with innovative digital Xperiences.


@@ -240,34 +260,11 @@ br>
-

→ Explore Hero Xperiences

 +
→ Explore Hero Xperiences
 {% end %} +

- - - - - - - - - -{% row(style="center" padding="bottom") %} - -[![logo1](img/brand1.png#small)](yourlink) - -||| - -[![logo2](img/brand3.png#small)](yourlink) - -||| - -[![logo3](img/brand5.png#small)](yourlink) - -||| - -[![logo4](img/brand2.png#small)](yourlink) - -{% end %} \ No newline at end of file +
+
diff --git a/css/index.css b/css/index.css index 8489e31..b46904f 100644 --- a/css/index.css +++ b/css/index.css @@ -41,26 +41,28 @@ img[src*="#fill"] { width: 100%; height: 100%; } img[src*="#tft_img"] { width: 150px; margin: 8px; } img[src*="#icon"] { width: 65px; margin: 4px; } img[src*="#fig"] { width: 150px; } +img[src*="#3col"] { width: 100px; margin-left: auto; margin-right: auto; } .logo_size { width: 200px; } /* Layer components */ @layer components { - h1 { @apply text-xl lg:text-4xl xl:text-5xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; } + h1 { @apply text-xl lg:text-4xl xl:text-7xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; } h1 strong { @apply font-extrabold; } h2 { @apply text-xl md:text-2xl lg:text-4xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; line-height: 1; font-weight: 600; } h2 strong { @apply font-medium; } h3 { @apply text-xl lg:text-2xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; } h3 strong { @apply font-medium; font-weight: 400; } - h4 { @apply text-xl lg:text-2xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; } - h5 { @apply text-xl lg:text-xl font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 400; } + h4 { @apply text-xl lg:text-xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; } + h5 { @apply text-xl lg:text-xl font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 400; color: #4207ab !important; } h6 { @apply text-lg not-italic font-normal my-1; font-family: "Reddit Sans", sans-serif; font-weight: 400; } - p { @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.05em; } + p { @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0; font-family: "Reddit Sans", sans-serif; font-weight: 400; letter-spacing: 0.05em; } blockquote { @apply border-l-4 border-gray-400 mx-2 my-2 p-2; font-family: "Reddit Sans", sans-serif; font-weight: 300; } - li { @apply text-lg lg:text-xl font-normal my-2; font-family: "Reddit Sans", sans-serif; font-weight: 200; } + li { @apply text-sm lg:text-sm font-light my-2; font-family: "Reddit Sans", sans-serif; font-weight: 200; } li li { @apply text-sm lg:text-sm font-light;font-family: "Reddit Sans", sans-serif; font-weight: 200; } button { @apply inline-block text-base lg:text-lg px-8 py-1 my-3 border-2 shadow;font-family: "Reddit Sans", sans-serif; font-weight: 400; } article h2 { @apply text-xl lg:text-3xl font-medium; font-family: "Reddit Sans", sans-serif; font-weight: 500; } - article p, li { @apply text-base lg:text-lg;font-family: "Reddit Sans", sans-serif; font-weight: 300; } + article p, { @apply text-base lg:text-lg; font-family: "Reddit Sans", sans-serif; font-weight: 400; } + li { @apply text-sm lg:text-base; font-family: "Reddit Sans", sans-serif; font-weight: 300; } } @@ -77,14 +79,13 @@ header .customize { background-color: transparent; position: absolute; } footer .customize { color: #fff; background-color: #4207ab; display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 24px; } footer .customize img { width: 60px; } header .customize div { box-shadow: none; text-transform: uppercase; font-weight: 700 !important; } -.link2 { color: #4207ab; font-weight: 600;} /* Header styles */ -button { background: transparent; color: black; border-radius: 2px; border: 2px solid black; box-shadow: none; } +button { background: transparent; color: black; border-radius: 2px; border: 1px solid black; box-shadow: none; } a { border: none; } header { font-family: "Reddit Sans"; } .nav_btn { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } - +.link2 { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; color: #4207ab !important; font-weight: 600 !important; border: 0px !important; } @@ -110,6 +111,6 @@ header { font-family: "Reddit Sans"; } .header:hover .back { transform: none; } /* Responsive styles */ -@media (max-width: 768px) { /* h2 { font-size: 4rem; } */ } -@media (max-width: 640px) { .banner h2 { font: 600 7vw/10vw; } .header h1 { font-size: 35px; } .banner h2 svg { font-size: 30px; } } +@media (max-width: 768px) { /* h2 { font-size: 4rem; } */ .flex-col-reverse { flex-direction: column-reverse; } } +@media (max-width: 640px) { .banner h2 { font: 600 7vw/10vw; } .header h1 { font-size: 20px; } .banner h2 svg { font-size: 30px; } } @media (max-width: 480px) { .banner, .header { padding: 80px 0; } footer { text-align: center; } /* h2 { font-size: 3rem; } */ } diff --git a/css/layout.css b/css/layout.css index aa5cd3a..cf7ba08 100644 --- a/css/layout.css +++ b/css/layout.css @@ -7,7 +7,7 @@ main { h1, .h1 { font-size: 2.5rem; font-weight: 900; } h2, .h2 { font-size: 2rem; font-weight: 700; } h3, .h3 { font-weight: 400; color: #4207ab; } -h4, .h4 { font-size: 1.5rem; } +h4, .h4 { font-size: 1.3rem; } h5, .h5 { font-size: 1.25rem; font-style: normal; } h6, .h6 { font-size: 1rem; } @@ -29,7 +29,7 @@ a:active { color: #2b6cb0; } nav h4 a { border: 0; color: #000; } nav h4 a:hover { border: 0; color: #4299e1; } nav h4 a:focus, nav h4 a:active { border: 0; color: #000; } -h5 a { color: #4a5568; } +h5 a { color: #4207ab; } /* Text and paragraph styles */ pre, code { font-feature-settings: normal; } diff --git a/readme.md b/readme.md index 60c167f..0b619a8 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # Your Website -![](../static/images/logo.svg) +![](../static/images/logo.png) ## About diff --git a/static/images/logo.png b/static/images/logo.png index 032b66a..d16edcc 100644 Binary files a/static/images/logo.png and b/static/images/logo.png differ diff --git a/templates/_default/base.html b/templates/_default/base.html index 2dc1353..ad8bbca 100644 --- a/templates/_default/base.html +++ b/templates/_default/base.html @@ -11,4 +11,10 @@ {% include "partials/footer.html" %} - \ No newline at end of file + + \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 48461be..cdc64c7 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,8 +2,9 @@ {% block content %} -
+
{% set page = get_page(path="home/index.md") %} {{page.content | safe}}
+{% include "partials/faq.html" %} {% endblock content %} \ No newline at end of file diff --git a/templates/partials/faq.html b/templates/partials/faq.html new file mode 100644 index 0000000..c33d736 --- /dev/null +++ b/templates/partials/faq.html @@ -0,0 +1,88 @@ + + + + +
+
+ + +
+

Frequently Asked Questions

+ + +
+
+
+ +

What is Hero and how does it work within the Mycelium network?

+ + + +

+ Hero is your personalized digital identity within the Mycelium network. It serves as your unique avatar, enabling you to securely interact with various applications and services while maintaining control over your data. The Mycelium network provides the decentralized infrastructure that powers Hero, ensuring a secure and private digital experience. + Check out this guide to learn how to get started and start using Hero on Mycelium Network. +

+
+
+
+
+ +

How does the Mycelium network enhance security for Hero users?

+ + + + +

+ The Mycelium network enhances security for Hero users by leveraging a decentralized infrastructure. This means there’s no single point of failure or centralized control, reducing the risk of data breaches and ensuring that users have full control over their information. +

+
+
+
+
+ +

What kinds of experiences can I build on the Mycelium network using Hero??

+ + + + +

+ The Mycelium network offers a flexible platform for developing a wide range of digital experiences using Hero, including secure file sharing, communication tools, financial services, and collaborative workspaces. You can also develop custom applications and services tailored to your needs, leveraging the scalability and security of the network. +

+
+
+
+
+ +

How does the Mycelium network promote equal opportunities for users?

+ + + + +

+ The Mycelium network is built on the principles of inclusivity and equality, providing equal access to its decentralized infrastructure. This ensures that all users, regardless of their background or location, have the opportunity to participate, earn, and contribute to the network, thereby fostering a community that values diversity and equal opportunity. Learn more about these technologies: Mycelium Project Manual +

+
+
+
+
+ + +

+ + + + \ No newline at end of file diff --git a/templates/shortcodes/grid_stats.html b/templates/shortcodes/grid_stats.html deleted file mode 100644 index 0ae595d..0000000 --- a/templates/shortcodes/grid_stats.html +++ /dev/null @@ -1,78 +0,0 @@ -{% set styles = "background-image: url('/images/ston_bg.png');" %} -{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %} -{% if data %} -{% set capacity = data.totalHru + data.totalSru / (1024 * 1024 * 1024 * 1024) %} -{% set nodes = data.nodes %} -{% set countries = data.countries %} -{% endif %} - -
-
-
-
-
-
-
- -
-
-
-
-
- {{ nodes }} -
-
-
- freeflow nodes
deployed -
-
-
-
-
-
-
-
-
-
-
-
-
- {{ countries }} -
-
-
- countries
involved -
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
- {{ capacity | round() }}TB -
-
-
- capacity
generated -
-
-
-
-
-
-
-
-
\ No newline at end of file diff --git a/templates/shortcodes/row.html b/templates/shortcodes/row.html index 506b9e0..3a4693a 100644 --- a/templates/shortcodes/row.html +++ b/templates/shortcodes/row.html @@ -57,14 +57,13 @@ Parameters: - {% if reverse %} - {% if "rightreserve" in reverse %} - {% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %} - {% elif "leftreserve" in reverse %} - {% set row_class = "flex flex-col md:flex-row items-center mx-8" %} - - {% endif %} - {% endif %} +{% if reverse %} + {% if "rightreserve" in reverse %} + {% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %} + {% elif "leftreserve" in reverse %} + {% set row_class = "flex flex-col md:flex-row items-center mx-8" %} + {% endif %} +{% endif %}