Merge branch 'development' of git.ourworld.tf:ourworld_web/www_aibox into development
This commit is contained in:
commit
2a637ea9e3
14
README.md
14
README.md
@ -1,13 +1,13 @@
|
||||
# **Mycelium Website**
|
||||
# **AIBOX Website**
|
||||
|
||||
This repository hosts the code for **Mycelium's website**, including both the main and development branches.
|
||||
This repository hosts the code for the **AIBOX website**, including both the main and development branches.
|
||||
|
||||
## 🌍 **Branches**
|
||||
- **`main`** → Production website: [mycelium.threefold.io](https://mycelium.threefold.io)
|
||||
- **`dev`** → Development version: [www2.mycelium.threefold.io](https://www2.mycelium.threefold.io)
|
||||
- **`main`** → Production website: [aibox.threefold.io](https://aibox.threefold.io)
|
||||
- **`dev`** → Development version: [www2.aibox.threefold.io](https://www2.aibox.threefold.io)
|
||||
|
||||
## 🚀 **Overview**
|
||||
Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging. This repository contains the source code for the Mycelium website, built using **CSS, HTML, Tailwind, Markdown, and Zola**.
|
||||
AIBOX is a personal AI machine with GPU that can also generate revenue by renting capacity to others. This repository contains the source code for the AIBOX website, built using **CSS, HTML, Tailwind, Markdown, and Zola**.
|
||||
|
||||
## 🛠 **Installation & Running Locally**
|
||||
### **Prerequisites**
|
||||
@ -17,8 +17,8 @@ Mycelium is a decentralized networking and storage solution designed to integrat
|
||||
|
||||
### **Clone the Repository**
|
||||
```sh
|
||||
git clone https://git.ourworld.tf/ourworld_web/www_mycelium.git
|
||||
cd www_mycelium
|
||||
git clone https://git.ourworld.tf/ourworld_web/www_aibox.git
|
||||
cd www_aibox
|
||||
```
|
||||
|
||||
### **Install Dependencies**
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 flex items-center justify-center gap-x-6 fade-in">
|
||||
<a href="/people" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Meet the Team</a>
|
||||
<a href="/people" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm lg:text-md font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Meet the Team</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
# The URL the site will be built for
|
||||
base_url = "https://www2.mycelium.threefold.io/"
|
||||
base_url = "https://www2.aibox.threefold.io/"
|
||||
# Change this to your own URL! Please note this variable **must** be uncommented .
|
||||
|
||||
title = "Mycelium"
|
||||
description = "Our global digital backbone"
|
||||
title = "AIBOX"
|
||||
description = "Your Personal AI Powerhouse"
|
||||
|
||||
# When set to "true", a feed is automatically generated.
|
||||
generate_feed = true
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: "404"
|
||||
title: "404 Not Found"
|
||||
description: ""
|
||||
insert_anchor_links: "left"
|
||||
template: "404.html"
|
||||
|
||||
@ -1,204 +1,68 @@
|
||||
---
|
||||
title: "Mycelium"
|
||||
description: "Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging. " # quotation marks to allow colons where used
|
||||
date: 2018-09-14T21:00:00-05:00
|
||||
updated: 2021-02-20T14:40:00-06:00
|
||||
title: "AIBOX"
|
||||
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold. " # quotation marks to allow colons where used
|
||||
date: 2025-01-14T21:00:00-05:00
|
||||
updated: 2025-02-25T14:40:00-06:00
|
||||
draft: false
|
||||
extra:
|
||||
author: ThreeFold
|
||||
imgPath: home/tf.png
|
||||
title: "Pre-order Your AIBox"
|
||||
subtitle: "Choose the box that's packed with the best features for your computing needs."
|
||||
subtitle2: "The AIBoxes are delivered by our hardware partners and they define the final price & specifications. Each AIBox becomes part of the ThreeFold grid and earns rewards."
|
||||
plans:
|
||||
- name: "Base"
|
||||
description: "Add your own GPU's"
|
||||
price: "1-1500"
|
||||
features:
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: between 500 and 2000 INCA per month depending on chosen GPU"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
- name: "1 GPU"
|
||||
description: "Enough for smaller but smart models and Smart Agents."
|
||||
price: "2-2500"
|
||||
features:
|
||||
- name: "1x AMD Radeon RX 7900 XTX"
|
||||
included: true
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: 1000 INCA per month"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
|
||||
|
||||
- name: "2 GPU"
|
||||
description: "Support for 48 GB models, a lot of power in your hands."
|
||||
price: "4-5000"
|
||||
features:
|
||||
- name: "2x AMD Radeon RX 7900 XTX"
|
||||
included: true
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: 2000 INCA per month"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!-- section 1 (header) -->
|
||||
|
||||
{% row(style="center") %}
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
## The (Re)Birth of **the Internet.**
|
||||
|
||||
ThreeFold is a peer-to-peer open-source Internet platform that connects users directly with <br> local Internet capacity provided by farmers. No intermediaries such as centralized servers.
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center narrow") %}
|
||||
|
||||
<button>[Build](/build)</button>
|
||||
|
||||
|||
|
||||
|
||||
<button>[Farm](/farm)</button>
|
||||
|
||||
|||
|
||||
|
||||
<button>[Main Chat](https://t.me/threefold)</button>
|
||||
|
||||
|||
|
||||
|
||||
<button>[Get TFT](https://www.manual.grid.tf/documentation/threefold_token/buy_sell_tft/tft_lobstr/tft_lobstr_short_guide.html)</button>
|
||||
|
||||
{% end %}
|
||||
|
||||
<!-- section 2 (Map) -->
|
||||
|
||||
|
||||
{% grid_stats() %}
|
||||
|
||||
### The ThreeFold Grid v3.7.0
|
||||
|
||||
## **Live and Operational**
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
<!-- section 3 (EXPAND) -->
|
||||
|
||||
{% row(style="center narrow") %}
|
||||
|
||||
## Together **We Build.**
|
||||
|
||||
The future is about decentralization, participation, and working together to achieve our goals. As a decentralized movement, we encourage the community to get involved. This new Internet can only succeed if we find ways to collaborate where we together pull this Internet concept forward. Below, please find some of the ways you can join us in building a better Internet.
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center narrow") %}
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
### Farm Local Internet Capacity **and Earn TFT**
|
||||
|
||||
By connecting hardware at your home or office – or anywhere you'd like – you provide Internet capacity for the people around you and earn a new digital currency, TFT.
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center narrow") %}
|
||||
|
||||
<button>[Buy a 3Node](http://marketplace.3node.global/)</button>
|
||||
|
||||
|||
|
||||
|
||||
<button>[Build a 3Node](https://library.threefold.me/info/threefold#/tfgrid/farming/threefold__diy_guide)</button>
|
||||
|
||||
|||
|
||||
|
||||
<button>[Farmers Chat](https://t.me/threefoldfarmers)</button>
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center narrow") %}
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
### Build On Top of a **Decentralized Infrastructure**
|
||||
|
||||
True digital sovereignty for open-source builders. The ThreeFold Grid provides limitless possibilities, and brings a playground of industry-compatible easy-to-deploy solutions for developers.
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center narrow") %}
|
||||
|
||||
<button>[Deploy on ThreeFold](https://dashboard.grid.tf/)</button>
|
||||
|
||||
|||
|
||||
|
||||
<button>[The Manual](https://manual.grid.tf/)</button>
|
||||
|
||||
|||
|
||||
|
||||
<button>[Builders Chat](https://t.me/threefoldtesting)</button>
|
||||
|
||||
{% end %}
|
||||
|
||||
<!-- section 4 (FEATURED STORIES) -->
|
||||
|
||||
{% featured_stories() %}
|
||||
|
||||
## Featured Stories
|
||||
|
||||
{% end %}
|
||||
|
||||
<!-- section 5 (THE TEAM) -->
|
||||
|
||||
{% team_sec() %}
|
||||
|
||||
## **The Team**
|
||||
|
||||
{% end %}
|
||||
|
||||
<!-- section 6 (PARTNERS) -->
|
||||
|
||||
{% row(style="center margin") %}
|
||||
|
||||
## Believers and Collaborators <br> **In a Better Internet**
|
||||
|
||||
We are truly proud to be trusted by some of the biggest names in the industry.
|
||||
|
||||
|
||||
|
||||
<button>[Check All Partners](partners)</button>
|
||||
|
||||
{% end %}
|
||||
|
||||
<br>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- section 7 (IN THE NEWS) -->
|
||||
|
||||
{% row(style="center") %}
|
||||
|
||||
## **In the News**
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center between") %}
|
||||
|
||||
[](https://www.forbes.com/sites/johnkoetsier/2020/06/20/largest-distributed-peer-to-peer-grid-on-the-planet-laying-foundation-for-a-decentralized-internet/?fbclid=IwAR1WKCpqLcWPRWg5bPD6RCQE5JJjRPt6ey5vbEnu3db2FvJnp6-YKeVZNW8#79aa340e6798)
|
||||
|
||||
|||
|
||||
|
||||
[](https://cointelegraph.com/news/peer-to-peer-internet-has-lofty-goal-to-bring-true-decentralization)
|
||||
|
||||
|||
|
||||
|
||||
[](https://news.yahoo.com/news/threefold-set-disrupt-status-quo-051457787.html?guccounter=1)
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center between") %}
|
||||
|
||||
[](https://hackernoon.com/is-it-possible-to-create-a-decentralized-internet-this-startup-and-its-farmers-think-so-ey2e3ycf)
|
||||
|
||||
|||
|
||||
|
||||
[](https://smartereum.com/189750/threefold-is-audaciously-building-a-new-decentralized-internet/)
|
||||
|
||||
|||
|
||||
|
||||
[](https://tgdaily.com/web/6-dfinity-threefold-are-leading-an-internet-decentralization-revolution/)
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center between") %}
|
||||
|
||||
[](https://cointelegraph-com.cdn.ampproject.org/c/s/cointelegraph.com/news/is-a-new-decentralized-internet-or-web-3-0-possible/amp)
|
||||
|
||||
|||
|
||||
|
||||
[](https://www.banklesstimes.com/2021/06/14/threefolds-green-technology-strategy-to-a-fairer-more-sustainable-world/)
|
||||
|
||||
|||
|
||||
|
||||
[](https://gritdaily.com/belarus-governments-control-internet/)
|
||||
|
||||
{% end %}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: "Take actions"
|
||||
description: "Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging."
|
||||
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
|
||||
insert_anchor_links: "left"
|
||||
extra:
|
||||
author: Mycelium
|
||||
author: AIBOX
|
||||
imgPath: tf.png
|
||||
---
|
||||
|
||||
|
||||
23
content/farmer/index.md
Normal file
23
content/farmer/index.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: "Become Farmer"
|
||||
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
|
||||
insert_anchor_links: "left"
|
||||
template: "layouts/farmer.html"
|
||||
extra:
|
||||
author: AIBOX
|
||||
imgPath: tf.png
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!--
|
||||
This page is made by combining different 'section' (partial html pages) together.
|
||||
To edit the page content, please go to specific 'section' that you would like to edit (stored inside templates/partials folders).
|
||||
To see the list of the section blocks in this page, add or remove some of the partial pages,
|
||||
go to: static/templates/layouts/index.html.
|
||||
|
||||
HOMEPAGE (static/templates/layouts/about.html) contains:
|
||||
|
||||
1. Hero section: "templates/partials/about/about1.html
|
||||
2. Hero section: "templates/partials/about/about2.html
|
||||
|
||||
@ -14,15 +14,15 @@ extra:
|
||||
|
||||
<br>
|
||||
|
||||
###### [Learn](https://docs.threefold.io/docs/introduction)
|
||||
###### [AIBOX Docs](https://threefold.info/aibox/docs/)
|
||||
|
||||
###### [Host (Farm)](https://docs.threefold.io/docs/category/become-a-farmer)
|
||||
###### [ThreeFold](https://docs.threefold.io/docs/introduction)
|
||||
|
||||
###### [Dashboard](https://dashboard.grid.tf/)
|
||||
###### [Support](https://threefoldfaq.crisp.help/en/)
|
||||
|
||||
###### [Forum](https://forum.threefold.io/)
|
||||
|
||||
###### [Download TF Connect: iOS](https://apps.apple.com/us/app/3bot-login/id1459845885)
|
||||
|
||||
###### [Download TF Connect: Android](https://play.google.com/store/apps/details?id=org.jimber.threebotlogin&hl=en_US)
|
||||
|
||||
|||
|
||||
|
||||
@ -32,13 +32,12 @@ extra:
|
||||
|
||||
###### [Main Chat](https://t.me/threefold)
|
||||
|
||||
###### [Hosting / Farming Chat](https://t.me/threefoldfarmers)
|
||||
###### [Farming Chat](https://t.me/threefoldfarmers)
|
||||
|
||||
###### [Grid User Chat](https://t.me/threefoldtesting)
|
||||
|
||||
###### [Forum](https://forum.threefold.io/)
|
||||
|
||||
###### [Support](https://threefoldfaq.crisp.help/en/)
|
||||
|
||||
|
||||
|||
|
||||
|
||||
@ -46,15 +45,12 @@ extra:
|
||||
|
||||
<br>
|
||||
|
||||
<h6><a target="_self" onclick="window.location.href='/why'">Why</a></h6>
|
||||
|
||||
<h6><a target="_self" onclick="window.location.href='/blog'">Blog</a></h6>
|
||||
<h6><a href="https://threefold.io/blog/">TF Blog</a></h6>
|
||||
|
||||
<h6><a target="_self" onclick="window.location.href='/newsroom'">NewsRoom</a></h6>
|
||||
<h6><a href="https://threefold.io/newsroom/">TF NewsRoom</a></h6>
|
||||
|
||||
<h6><a target="_self" href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')">Newsletter</a></h6>
|
||||
|
||||
<h6><a target="_self" onclick="window.location.href='/community'">Community</a></h6>
|
||||
<h6><a target="-" href="https://threefold.io/community/">TF Community</a></h6>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
---
|
||||
title: "Header"
|
||||
description: "NEAR is on a mission to empower everyone to take back control of their money, their data, and their identity. Join us."
|
||||
insert_anchor_links: "left"
|
||||
template: "partials/header.html"
|
||||
extra:
|
||||
logoPath: "images/ourworld_logo2.png"
|
||||
imgPath: ""
|
||||
---
|
||||
|
||||
- Learn
|
||||
|
||||
{% row(style="lean") %}
|
||||
|
||||
### PURPOSE
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
#### [The Internot](/apage)
|
||||
|
||||
Whats wrong with the [internet](/apage)
|
||||
|
||||
<br>
|
||||
|
||||
#### Our Internet
|
||||
|
||||
Vision for the new internet
|
||||
|
||||
|||
|
||||
|
||||
### ECOSYSTEM
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
#### OurWorld DAO
|
||||
|
||||
Be a part of governance
|
||||
|
||||
<br>
|
||||
|
||||
#### Communities
|
||||
|
||||
Explore communities in OurWorld
|
||||
|
||||
<br>
|
||||
|
||||
#### DAOs
|
||||
|
||||
Decentralized autonomous organizations
|
||||
|
||||
|||
|
||||
|
||||
### APPLICATIONS
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
#### DAPPs
|
||||
|
||||
Decentralized applications
|
||||
|
||||
<br>
|
||||
|
||||
#### Projects
|
||||
|
||||
Projects in OurWorld
|
||||
|
||||
|||
|
||||
|
||||
### FEATURED
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
#### OurWorld is Live
|
||||
|
||||
Be a part of the new internet
|
||||
|
||||
- [Join us]("/join-us")
|
||||
- [Blog]("/blog")
|
||||
|
||||
{% end %}
|
||||
@ -7,6 +7,7 @@ extra:
|
||||
|
||||
---
|
||||
|
||||
|
||||
- [Become a farmer]("farmer")
|
||||
- [Docs]("https://threefold.info/aibox/docs/")
|
||||
|
||||
|
||||
|
||||
@ -1,13 +1,72 @@
|
||||
---
|
||||
title: "Mycelium"
|
||||
description: "Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging."
|
||||
insert_anchor_links: "left"
|
||||
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold. " # quotation marks to allow colons where used
|
||||
date: 2018-09-14T21:00:00-05:00
|
||||
updated: 2021-02-20T14:40:00-06:00
|
||||
draft: false
|
||||
extra:
|
||||
author: ThreeFold
|
||||
imgPath: home/mycel2.png
|
||||
---
|
||||
imgPath: home/tf.png
|
||||
title: "Pre-order Your AIBox"
|
||||
subtitle: "Choose the box that's packed with the best features for your computing needs."
|
||||
subtitle2: "The AIBoxes are delivered by our hardware partners and they define the final price & specifications. Each AIBox becomes part of the ThreeFold grid and earns rewards."
|
||||
plans:
|
||||
- name: "Base"
|
||||
description: "Add your own GPU's"
|
||||
price: "1-1500"
|
||||
features:
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: between 500 and 2000 INCA per month depending on chosen GPU"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
- name: "1 GPU"
|
||||
description: "Enough for smaller but smart models and Smart Agents."
|
||||
price: "2-2500"
|
||||
features:
|
||||
- name: "1x AMD Radeon RX 7900 XTX"
|
||||
included: true
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: 1000 INCA per month"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
|
||||
|
||||
- name: "2 GPU"
|
||||
description: "Support for 48 GB models, a lot of power in your hands."
|
||||
price: "4-5000"
|
||||
features:
|
||||
- name: "2x AMD Radeon RX 7900 XTX"
|
||||
included: true
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: 2000 INCA per month"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!--
|
||||
This page is made by combining different 'section' (partial html pages) together.
|
||||
To edit the page content, please go to specific 'section' that you would like to edit (stored inside templates/partials folders).
|
||||
@ -22,6 +81,6 @@ HOMEPAGE (static/templates/layouts/index.html) contains:
|
||||
4. whats new section: "templates/partials/hero/myhero5.html
|
||||
5. benefits section: "templates/partials/hero/myhero2.html"
|
||||
6. faq section: "templates/partials/hero/myhero6.html"
|
||||
6. cta section: "templates/partials/hero/myhero7.html"
|
||||
7. cta section: "templates/partials/hero/myhero7.html"
|
||||
|
||||
-->
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
58
content/signup/index.md
Normal file
58
content/signup/index.md
Normal file
@ -0,0 +1,58 @@
|
||||
---
|
||||
title: "Sign Up"
|
||||
description: "Pre-register for AIBOX and become a part of a pioneering Web4 movement" # quotation marks to allow colons where used
|
||||
template: "layouts/signup.html"
|
||||
insert_anchor_links: "left"
|
||||
extra:
|
||||
author: ThreeFold
|
||||
imgPath: tf.png
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.rounded_img img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.person img{
|
||||
border-radius: 100%;
|
||||
max-width:100px;
|
||||
}
|
||||
|
||||
|
||||
.myscale{
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
|
||||
.myscale:hover{
|
||||
transform: scale(1.2);
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
|
||||
.road_border{
|
||||
|
||||
border-left: 1px solid rgb(156, 156, 156);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.white-gray{
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 510 B After Width: | Height: | Size: 510 B |
@ -1,30 +0,0 @@
|
||||
---
|
||||
title: "Mycelium"
|
||||
description: "Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging." # quotation marks to allow colons where used
|
||||
template: "layouts/why.html"
|
||||
insert_anchor_links: "left"
|
||||
extra:
|
||||
author: ThreeFold
|
||||
imgPath: tf.png
|
||||
---
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
This page is made by combining different 'section' (partial html pages) together.
|
||||
To edit the page content, please go to specific 'section' that you would like to edit (stored inside templates/partials folders).
|
||||
To see the list of the section blocks in this page, add or remove some of the partial pages,
|
||||
go to: static/templates/layouts/why.html.
|
||||
|
||||
ABOUT / WHY PAGE (static/templates/layouts/why.html) contains:
|
||||
|
||||
1. About hero section: "templates/partials/about/about1.html"
|
||||
2. benefit1 section: "templates/partials/about/about2.html"
|
||||
3. benefit2 section: "templates/partials/about/about3.html"
|
||||
4. benefit3 new section: "templates/partials/about/about4.html"
|
||||
5. tf section: "templates/partials/about/about5.html"
|
||||
6. faq section: "templates/partials/about/about6.html"
|
||||
7. cta section: "templates/partials/hero/myhero7.html"
|
||||
|
||||
|
||||
-->
|
||||
BIN
static/images/aibox8.jpg
Normal file
BIN
static/images/aibox8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
static/images/aibox_farming.png
Normal file
BIN
static/images/aibox_farming.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 368 KiB |
BIN
static/images/aibox_farming1.png
Normal file
BIN
static/images/aibox_farming1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
BIN
static/images/aibox_farming2.png
Normal file
BIN
static/images/aibox_farming2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
static/images/icons/aibox2.ico
Normal file
BIN
static/images/icons/aibox2.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 18 KiB |
1
static/images/icons/gpu.svg
Normal file
1
static/images/icons/gpu.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
1
static/images/icons/share.svg
Normal file
1
static/images/icons/share.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
@ -1,103 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% if page.taxonomies.people %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(page.taxonomies.people[0]) %}
|
||||
{% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Default page template for blog posts and basic informative markdown files -->
|
||||
|
||||
{% set split = page.content | split(pat="threefold.io") %}
|
||||
{% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if
|
||||
part is starting_with("/blog") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set
|
||||
link=link | replace(from="/blog/post" , to="/blog" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set
|
||||
rest_part=split_part | slice(start=1) | join(sep='/">' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if
|
||||
loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "threefold.io" ~ part%} {% endif
|
||||
%} {% endfor %} {% endif %} <main>
|
||||
|
||||
<div class="container mx-auto mt-16">
|
||||
|
||||
<div>
|
||||
<article class="article lg:w-4/6 mx-auto">
|
||||
<section class="post-header px-0 mb-4 border-b border-gray-600">
|
||||
<h2 class="md:text-4xl text-3xl font-medium mb-2 leading-none text-gray-100">
|
||||
{{ page.title }}
|
||||
</h2>
|
||||
|
||||
<p class="md:text-lg mb-4 text-base text-gray-300">
|
||||
{{ page.description }}
|
||||
</p>
|
||||
</section>
|
||||
<section class="post-author-list mb-3 mt-2 mx-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none pl-0 flex author-list m-0">
|
||||
<li class="author-list-item">
|
||||
{% if author %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
|
||||
replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<img src="{{author_img}}" alt="{{author.title}}" class="
|
||||
h-8
|
||||
w-8
|
||||
sm:h-10
|
||||
sm:w-10
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border border-gray-600
|
||||
" />
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pl-3 flex flex-col text-xs leading-none uppercase">
|
||||
{% if author %}
|
||||
<a href="{{author.permalink}}" class="text-gray-400 text-xs">{{ author.title }}</a>
|
||||
{% endif %}
|
||||
<p class="text-gray-400 text-xs">
|
||||
<time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago")
|
||||
}}</time><br />
|
||||
<span id="time"
|
||||
class="time"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="my-2 sharethis-inline-share-buttons"></div>
|
||||
</section>
|
||||
{% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md',
|
||||
to=page.extra.imgPath)) %}
|
||||
<img class="mb-8 mx-auto" src={{img_url}} alt="{{page.title ~ 'Picture'}}">
|
||||
<div>{{ content | safe }}</div>
|
||||
<section class="post-tags container relative py-10">
|
||||
{% for tag in page.taxonomies.tags %}
|
||||
{% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %}
|
||||
<button class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-gray-100
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-gray-100
|
||||
border-gray-600
|
||||
text-gray-400
|
||||
rounded-full
|
||||
"><a href="{{fullpath}}">{{ tag }}</a></button>
|
||||
|
||||
{% endfor %}
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
@ -3,8 +3,11 @@
|
||||
{% include "partials/hero/aihero1.html" %}
|
||||
{% include "partials/hero/aihero2.html" %}
|
||||
{% include "partials/hero/aihero3.html" %}
|
||||
{% include "partials/hero/aihero8.html" %}
|
||||
{% include "partials/hero/aihero4.html" %}
|
||||
{% include "partials/hero/aihero5.html" %}
|
||||
{% include "partials/hero/aihero6.html" %}
|
||||
{% include "partials/hero/aihero7.html" %}
|
||||
{% include "partials/hero/aihero9.html" %}
|
||||
{% include "partials/hero/faq.html" %}
|
||||
{% include "partials/hero/aihero10.html" %}
|
||||
{% endblock content %}
|
||||
@ -1,40 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
<div class="container sm:pxi-0 mx-auto min-h-screen pt-24 mt-5">
|
||||
<div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
|
||||
<div class="w-full md:w-5/6 md:pl-8 lg:pl-0">
|
||||
<h3 class="
|
||||
uppercase
|
||||
leading-none
|
||||
text-bold
|
||||
text-gray-800
|
||||
font-black font-heading
|
||||
">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<section class="post-content mx-auto relative font-serif text-gray-700">
|
||||
<div class="mt-6 mb-8 text-gray-900">{{ page.content | safe }}</div>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-green-500
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-green-600
|
||||
px-8
|
||||
py-2
|
||||
mr-2
|
||||
my-0
|
||||
shadow
|
||||
rounded-full
|
||||
active--exact active
|
||||
">
|
||||
<a href="{{page.extra.link}}" target="_blank" aria-current="page">
|
||||
{{ page.extra.button }}
|
||||
</a>
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
@ -1,6 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
{% include "partials/download/download1.html" %}
|
||||
{% include "partials/hero/myhero6.html" %}
|
||||
{% include "partials/hero/myhero7.html" %}
|
||||
{% endblock content %}
|
||||
@ -1,33 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
<!-- blog template
|
||||
the template for displaying the blog page.
|
||||
consists of a featured blog row,
|
||||
a paginated list of posts (sorted by date),
|
||||
and a side nav for category and featured post navigation
|
||||
-->
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main>
|
||||
|
||||
<!--sets global featured variable as the most recent post with the isFeatured tag-->
|
||||
{%- set section = get_section(path="blog/_index.md") %}
|
||||
{% for page in section.pages %}
|
||||
{% if page.extra.isFeatured %}
|
||||
{%- set_global featured = page %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% if not featured %}
|
||||
{%- set_global featured = section.pages[0] %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% include "partials/featuredBlog.html" %}
|
||||
|
||||
<div class="flex flex-col md:flex-row container mx-auto my-6">
|
||||
{% include "partials/blogPosts.html" %}
|
||||
{% include "partials/blogSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,8 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
{% include "partials/accordion.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
10
templates/layouts/farmer.html
Normal file
10
templates/layouts/farmer.html
Normal file
@ -0,0 +1,10 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/farmer/hero_section.html" %}
|
||||
{% include "partials/farmer/farmers.html" %}
|
||||
{% include "partials/farmer/show_images.html" %}
|
||||
{% include "partials/farmer/about1.html" %}
|
||||
{% include "partials/farmer/cta.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,80 +0,0 @@
|
||||
<div class="bg-white">
|
||||
<header class="absolute inset-x-0 top-0 z-50">
|
||||
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
|
||||
<div class="flex lg:hidden">
|
||||
<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:gap-x-12">
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Product</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Features</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Marketplace</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Company</a>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Log in <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Mobile menu, show/hide based on menu open state. -->
|
||||
<div class="lg:hidden" role="dialog" aria-modal="true">
|
||||
<!-- Background backdrop, show/hide based on slide-over state. -->
|
||||
<div class="fixed inset-0 z-50"></div>
|
||||
<div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="#" class="-m-1.5 p-1.5">
|
||||
<span class="sr-only">Your Company</span>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600" alt="">
|
||||
</a>
|
||||
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
|
||||
<span class="sr-only">Close menu</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 flow-root">
|
||||
<div class="-my-6 divide-y divide-gray-500/10">
|
||||
<div class="space-y-2 py-6">
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Product</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Features</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Marketplace</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Company</a>
|
||||
</div>
|
||||
<div class="py-6">
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Log in</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<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-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
|
||||
Announcing our next round of funding. <a href="#" class="font-semibold text-black"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Data to enrich your online business</h1>
|
||||
<p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% import "macros.html" as macros %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main class="lg:mt-6">
|
||||
<div class="flex">
|
||||
<div class="w-4/6 pr-20">
|
||||
{{ section.content | safe}}
|
||||
</div>
|
||||
<div class="w-2/6 pl-20">
|
||||
{{ macros::page_list(item_type="page-box", group=false) }}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,33 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
<!-- News template
|
||||
the template for displaying the news page.
|
||||
consists of a featured news row,
|
||||
a paginated list of posts (sorted by date),
|
||||
and a side nav for category and featured post navigation
|
||||
-->
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main>
|
||||
|
||||
<!--sets global featured variable as the most recent post with the isFeatured tag-->
|
||||
{%- set section = get_section(path="newsroom/_index.md") %}
|
||||
{% for page in section.pages %}
|
||||
{% if page.extra.isFeatured %}
|
||||
{%- set_global featured = page %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% if not featured %}
|
||||
{%- set_global featured = section.pages[0] %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% include "partials/featuredNews.html" %}
|
||||
|
||||
<div class="flex flex-col md:flex-row container mx-auto my-6">
|
||||
{% include "partials/newsPosts.html" %}
|
||||
{% include "partials/newsSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,18 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
<!-- partners template
|
||||
the template for displaying the partners page.
|
||||
consists of a featured partners row,
|
||||
a paginated list of posts (sorted by date),
|
||||
and a side nav for category and featured post navigation
|
||||
-->
|
||||
{% block content %}
|
||||
<main>
|
||||
<!--sets global featured variable as the most recent post with the isFeatured tag-->
|
||||
{%- set section = get_section(path="partners/_index.md") %}
|
||||
{% include "partials/intro.html" %}
|
||||
<div class="flex flex-col md:flex-row container mx-auto my-8">
|
||||
{% include "partials/partnersCards.html" %}
|
||||
{% include "partials/partnersSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
@ -1,83 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
<!-- partners template
|
||||
the template for displaying the partners page.
|
||||
consists of a featured partners row,
|
||||
a paginated list of posts (sorted by date),
|
||||
and a side nav for category and featured post navigation
|
||||
-->
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main>
|
||||
|
||||
<!--sets global featured variable as the most recent post with the isFeatured tag-->
|
||||
{%- set section = get_section(path="people/_index.md") %}
|
||||
<div class="container mx-auto">
|
||||
{# {% include "partials/filter_bar.html" %} #}
|
||||
<div class="text-center main-title px-0 md:w-full">
|
||||
<h1
|
||||
class="tracking-tight text-5xl text-left sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
|
||||
>
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
</h1>
|
||||
<div>
|
||||
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none">
|
||||
{%- for page in paginator.pages %}
|
||||
{% if "Engineering" == "Engineering"%}
|
||||
{% include "partials/personCard.html" %}
|
||||
{%endif%} {%- endfor %}
|
||||
</div>
|
||||
<hr class="mt-6" />
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,8 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/solutions/hero.html" %}
|
||||
{% include "partials/solutions/what.html" %}
|
||||
{% include "partials/solutions/portfolio.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% endblock content %}
|
||||
@ -1,39 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/hero/myhero1.html" %}
|
||||
{% include "partials/hero/myhero3.html" %}
|
||||
{% include "partials/hero/myhero5.html" %}
|
||||
{% include "partials/hero/myhero2.html" %}
|
||||
{% include "partials/hero/myhero6.html" %}
|
||||
{% include "partials/hero/myhero7.html" %}
|
||||
{% include "partials/feature/feature1.html" %}
|
||||
{% include "partials/feature/feature2.html" %}
|
||||
{% include "partials/feature/feature3.html" %}
|
||||
{% include "partials/feature/feature4.html" %}
|
||||
{% include "partials/feature/feature5.html" %}
|
||||
{% include "partials/feature/feature6.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% include "partials/action/video.html" %}
|
||||
{% include "partials/action/web4tools.html" %}
|
||||
{% include "partials/action/action.html" %}
|
||||
{% include "partials/about/about5.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% include "partials/about/about6.html" %}
|
||||
{% include "partials/hero/hero1.html" %}
|
||||
{% include "partials/hero/hero2.html" %}
|
||||
{% include "partials/hero/hero3.html" %}
|
||||
{% include "partials/hero/hero4.html" %}
|
||||
{% include "partials/hero/hero5.html" %}
|
||||
{% include "partials/hero/hero6.html" %}
|
||||
{% include "partials/hero/hero7.html" %}
|
||||
{% include "partials/hero/hero8.html" %}
|
||||
{% include "partials/hero/hero9.html" %}
|
||||
{% include "partials/why/hero.html" %}
|
||||
{% include "partials/why/reason.html" %}
|
||||
{% include "partials/why/timeline.html" %}
|
||||
{% include "partials/why/matters.html" %}
|
||||
{% include "partials/why/values.html" %}
|
||||
{% include "partials/why/team.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% endblock content %}
|
||||
@ -1,12 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
{% include "partials/about/about1.html" %}
|
||||
{% include "partials/about/about2.html" %}
|
||||
{% include "partials/about/about3.html" %}
|
||||
{% include "partials/about/about4.html" %}
|
||||
{% include "partials/about/about5.html" %}
|
||||
{% include "partials/about/about6.html" %}
|
||||
{% include "partials/hero/myhero7.html" %}
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,4 +0,0 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
@ -1,88 +0,0 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% if not paginator %}
|
||||
{% set paginator = section %}
|
||||
{% endif %}
|
||||
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{% if path_array | length < 3%}
|
||||
{% set category = "All" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-16 mx-auto max-w-screen-lg px-6 lg:px-8">
|
||||
{% include "partials/filter_bar.html" %}
|
||||
<div class="text-center main-title px-0 md:w-full">
|
||||
<div class="my-4 flex flex-col items-start">
|
||||
<h2 class="tracking-tight text-left text-3xl lg:text-5xl fw-500 leading-snug font-normal">
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
</h2>
|
||||
<div class="text-xl text-gray-800">
|
||||
{{ paginator.total_pages ~ " People"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div>
|
||||
<div class="mx-auto mt-4 grid max-w-2xl grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 xl:grid-cols-4">
|
||||
{%- for page in paginator.pages %}
|
||||
{% include "partials/person_card.html" %}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
<hr class="mt-6" />
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
@ -1,14 +0,0 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main class="pt-12">
|
||||
|
||||
<div class="flex flex-col md:flex-row container mx-auto">
|
||||
{% include "partials/newsPosts.html" %}
|
||||
{% include "partials/newsSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
@ -1,147 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% set split = page.content | split(pat="threefold.io") %}
|
||||
{% if split | length < 2 %}
|
||||
{% set content = page.content %}
|
||||
{% else %}
|
||||
{% set content = "" %}
|
||||
{% for part in split %}
|
||||
{% if part is starting_with("/blog") %}
|
||||
{% set split_part = part | split(pat='/">') %}
|
||||
{% set link = split_part[0] %}
|
||||
{% set link = link | replace(from="/blog/post", to="/blog") %}
|
||||
{% set link = link | replace(from="_", to="-") %}
|
||||
{% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
|
||||
{% set part = link ~ '/">' ~ rest_part %}
|
||||
{% endif %}
|
||||
{% if part is starting_with("/people") %}
|
||||
{% set split_part = part | split(pat='/">') %}
|
||||
{% set link = split_part[0] %}
|
||||
{% set link = link | replace(from="_", to="-") %}
|
||||
{% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
|
||||
{% set part = link ~ '/">' ~ rest_part %}
|
||||
{% endif %}
|
||||
{% if loop.first %}
|
||||
{% set_global content = part %}
|
||||
{% else %}
|
||||
{% set_global content = content ~ "threefold.io" ~ part %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Default page template for news posts and basic informative markdown files -->
|
||||
<main class="container mx-auto mt-16">
|
||||
|
||||
<div class="article lg:w-4/6 mx-auto">
|
||||
|
||||
<div>
|
||||
<section class="post-header px-0 mb-4 border-b border-gray-600">
|
||||
<h2 class="md:text-4xl text-3xl font-medium mb-2 leading-none text-gray-100">
|
||||
{{ page.title }}
|
||||
</h2>
|
||||
<p class="md:text-lg mb-4 text-base text-gray-300">
|
||||
{{ page.description }}
|
||||
</p>
|
||||
</section>
|
||||
<section class="post-author-list mb-3 mt-2 mx-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none pl-0 flex author-list m-0">
|
||||
{% if page.taxonomies.people %}
|
||||
{% for person in page.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ person ~ '/index.md' %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(person) %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<li class="author-list-item">
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}">
|
||||
<img src="{{author_img}}" alt="{{ author.title }}" class="
|
||||
w-8
|
||||
h-8
|
||||
sm:h-10
|
||||
sm:w-10
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border border-gray-600
|
||||
" />
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pl-3 flex flex-col text-xs leading-none uppercase">
|
||||
<p>
|
||||
{% if page.taxonomies.people %}
|
||||
{% for person in page.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ person ~ '/index.md' %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(person) %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<span class="text-xs leading-none uppercase">
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="hover:underline text-gray-400">{{ author.title }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</p>
|
||||
<p class="text-gray-400 text-xs leading-none uppercase">
|
||||
<time datetime="{{page.date}}">
|
||||
{{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
|
||||
</time>
|
||||
{# · {{ page.news.timeToRead }} min read #}
|
||||
</p>
|
||||
</div>
|
||||
<div class="my-2 ml-auto sharethis-inline-share-buttons"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="post-image mx-auto w-full">
|
||||
{% if page.extra.imgPath %}
|
||||
{% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
|
||||
<img src="{{img_url}}" />
|
||||
{%endif%}
|
||||
</section>
|
||||
|
||||
<div class="py-12">
|
||||
<section class="
|
||||
post-content
|
||||
container
|
||||
mx-auto
|
||||
relative
|
||||
font-serif
|
||||
text-gray-300
|
||||
">
|
||||
<div class="post-content-text text-xl">{{ content | safe }}</div>
|
||||
</section>
|
||||
|
||||
<section class="post-tags container mx-auto relative py-10">
|
||||
{% for tag in page.taxonomies.tags %}
|
||||
{% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %}
|
||||
<a href="{{fullpath}}" class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-gray-100
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-gray-100
|
||||
border-gray-600
|
||||
text-gray-400
|
||||
rounded-full
|
||||
">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
@ -1,252 +0,0 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
-->
|
||||
<!-- This example requires Tailwind CSS v1.4.0+ -->
|
||||
<script type="text/javascript">
|
||||
|
||||
var displayedMenu = "";
|
||||
var hamburgerShown = false;
|
||||
let width = screen.width;
|
||||
var isMobile = width < 1024;
|
||||
|
||||
function toggleMenu(button) {
|
||||
if (displayedMenu === button.id.split("-")[0]) {
|
||||
button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
|
||||
hideMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
|
||||
displayedMenu = "";
|
||||
}
|
||||
else {
|
||||
showMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
|
||||
button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
|
||||
displayedMenu = button.id.split("-")[0]
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(button) {
|
||||
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
|
||||
if (button.id.indexOf("menu") !== -1 ) {
|
||||
toggleMenu(button)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleHamburger() {
|
||||
if (hamburgerShown) {
|
||||
hideHamburger();
|
||||
hamburgerShown = false;
|
||||
}
|
||||
else {
|
||||
showHamburger();
|
||||
hamburgerShown = true;
|
||||
}
|
||||
}
|
||||
|
||||
function showMenu(menuName) {
|
||||
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuElement = document.getElementById(menuId)
|
||||
menuElement.className = menuElement.className.replace(" hidden" , "");
|
||||
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
|
||||
}
|
||||
|
||||
function hideMenu(menuName) {
|
||||
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuElement = document.getElementById(menuId)
|
||||
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
|
||||
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
|
||||
}
|
||||
|
||||
function showHamburger() {
|
||||
document.getElementById('header-container').className = "overflow-hidden";
|
||||
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
|
||||
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
}
|
||||
|
||||
function hideHamburger() {
|
||||
document.getElementById('header-container').className = "";
|
||||
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
|
||||
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
if (displayedMenu !== "") { hideMenu(displayedMenu); }
|
||||
}
|
||||
|
||||
window.onload = function(){
|
||||
let elements = document.getElementsByTagName("button");
|
||||
let buttons = [...elements]
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener( 'click', function() { handleClick(button) });
|
||||
})
|
||||
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
|
||||
}
|
||||
</script>
|
||||
<!-- set variables used for header template -->
|
||||
{% set section = get_section(path="_index.md") %}
|
||||
{% set subsections_str = section.subsections | join(sep=" ") %}
|
||||
{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
|
||||
|
||||
{% if "header/_index.md" in subsections_str %}
|
||||
{% set section = get_section(path="header/_index.md") %}
|
||||
{% set header_items = section.content | safe | split(pat="
|
||||
<li>
|
||||
") %}
|
||||
{% include "partials/header_custom.html" %}
|
||||
{% else %}
|
||||
<header id="header-container">
|
||||
{% set header_class = config.extra.header_class | default(value='') %}
|
||||
<div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
|
||||
<div class="relative z-50 shadow">
|
||||
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
||||
<div>
|
||||
<a href="/" class="flex">
|
||||
<img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
{% for page in section.pages %}
|
||||
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
|
||||
<a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
||||
{{page.title}}
|
||||
</a>
|
||||
<div class="relative"></div>
|
||||
{% endfor %}
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set button_id = subsection ~ "-menu-btn" | slugify %}
|
||||
<div class="relative">
|
||||
<button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ subsection }}</span>
|
||||
<div class="-rotate-90 transition-transform">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
fill="#000000"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set submenu_id = subsection ~ "-menu" | slugify %}
|
||||
<nav>
|
||||
<div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
|
||||
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
|
||||
{{subsection | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endfor %}
|
||||
<!--
|
||||
Mobile menu, show/hide based on mobile menu state.
|
||||
|
||||
Entering: "duration-200 ease-out"
|
||||
From: "opacity-0 scale-95"
|
||||
To: "opacity-100 scale-100"
|
||||
Leaving: "duration-100 ease-in"
|
||||
From: "opacity-100 scale-100"
|
||||
To: "opacity-0 scale-95"
|
||||
-->
|
||||
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||
<div>
|
||||
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
|
||||
<nav class="flex flex-col justify-around pb-12">
|
||||
{% for page in section.pages %}
|
||||
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
|
||||
<a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{page.title}}
|
||||
</a>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
|
||||
{% set menu_id = subsection ~ "-mobile-menu" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>{{ subsection }}</span>
|
||||
<div class="-rotate-90 transition-transform">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
fill="#000000"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
{{ subsection | safe }}
|
||||
</div>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
{% if "footer/_index.md" in subsections_str %}
|
||||
{% set section = get_section(path="footer/_index.md")%}
|
||||
<div class="mx-8 mt-8">
|
||||
<div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<img class="w-48 h-auto" src="{{logo_path}}" alt="Company name">
|
||||
<p class="text-gray-500 text-base leading-6 ">
|
||||
{{section.description}}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% endif %}
|
||||
@ -1,24 +0,0 @@
|
||||
<div class=" fade-in">
|
||||
<div class="relative isolate">
|
||||
<div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
|
||||
<div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">ABOUT</p>
|
||||
<h1 class="mt-2 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
|
||||
Mycelium
|
||||
</h1>
|
||||
<h2 class="text-balance lg:text-4xl text-3xl font-normal tracking-tight text-black">Where Digital Innovation
|
||||
Meets the Wisdom of Nature</h2>
|
||||
<p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
|
||||
At the forefront of digital evolution lies Mycelium, a visionary project at the heart of the ThreeFold Grid. More than just technology, Mycelium is a transformative force reshaping the way we connect in the digital age.
|
||||
</p>
|
||||
<p class="mt-2 text-md font-light text-stone-800 lg:text-lg">
|
||||
We're on a mission to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-16 sm:mt-24 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/mycel5.jpg"
|
||||
alt="Mobile App Screenshot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,51 +0,0 @@
|
||||
<div class="relative bg-white isolate overflow-hidden py-12">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div>
|
||||
<h1 class="fade-in text-balance text-4xl font-medium tracking-tight text-black lg:text-5xl">Why Mycelium:
|
||||
</h1>
|
||||
<h2 class="mt-4 mx-automax-w-3xl text-pretty lg:text-3xl text-xl font-normal text-black fade-in"> Redefining Digital Communication</h2>
|
||||
</div>
|
||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
||||
<!-- Left Content -->
|
||||
<div class="lg:col-span-6">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<p class="fade-in mt-2 text-lg lg:text-xl font-light text-black">
|
||||
Mycelium facilitates secure, efficient, and scalable data transfer and communication among network nodes. It optimizes data routing, ensuring that information follows the shortest path in terms of latency, leading to faster and more efficient communication.
|
||||
<br><br>
|
||||
The technology relies on end-to-end encryption, where each node in the system is identified by a unique key pair, ensuring data security and privacy. This ensures that data remains confidential and authentic, enhancing the privacy and integrity of the network.
|
||||
<br><br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Blockquote -->
|
||||
<div class="lg:col-span-6">
|
||||
<figure class=" mt-2 pl-8">
|
||||
<blockquote class=" text-black fade-in px-6">
|
||||
<p class="text-md leading-normal text-black font-normal">Mycelium is developed to address the limitations of traditional networking protocols and to contribute to a more sustainable and eco-conscious digital ecosystem. It strives to revolutionize digital communication, making it not only efficient and secure, but also environmentally responsible.<br><br>
|
||||
The inspiration for Mycelium draws from the need for a technology that adapts to changing network conditions and operates efficiently, even in a rapidly evolving digital landscape.</p>
|
||||
</blockquote>
|
||||
<br>
|
||||
<div class="mx-4">
|
||||
<p class="fade-in mx-auto text-xl font-semibold tracking-tight text-black lg:text-2xl opacity-0 transition-opacity duration-1000" data-observer>
|
||||
Decentralized. Scalable. Intelligent.
|
||||
</p>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +0,0 @@
|
||||
<div class=" fade-in">
|
||||
<div class="relative isolate">
|
||||
<div class="mx-auto max-w-7xl px-6 py-12 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
|
||||
<div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">BENEFITS</p>
|
||||
<h2 class="text-balance lg:text-5xl text-4xl font-medium tracking-tight text-black">Highly Efficient</h2>
|
||||
<h3 class="mt-6 font-light text-black lg:text-3xl text-xl">
|
||||
Optimizing Data Routing
|
||||
</h3>
|
||||
<p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
|
||||
Mycelium's routing algorithms prioritize the shortest path in terms of latency for data transfer.
|
||||
</p>
|
||||
<p class="mt-4 text-md font-light text-stone-800 lg:text-lg">
|
||||
This means that data is sent along the most direct and efficient route, reducing the time it takes for information to travel from the source node to the destination node. </p>
|
||||
</div>
|
||||
<div class="mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
|
||||
<img class="w-full max-w-md h-auto object-cover rounded-xl" src="/images/about1.jpg"
|
||||
alt="Mobile App Screenshot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,24 +0,0 @@
|
||||
<div class=" fade-in bg-white">
|
||||
<div class="relative isolate">
|
||||
<div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
|
||||
<div class="mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
|
||||
<img class="w-full max-w-md h-auto object-cover rounded-xl" src="/images/about3.jpg"
|
||||
alt="Mobile App Screenshot">
|
||||
</div>
|
||||
<div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">BENEFITS</p>
|
||||
<h2 class="text-balance lg:text-5xl text-4xl font-medium tracking-tight text-black">
|
||||
Enhancing Security
|
||||
</h2>
|
||||
<h3 class="mt-6 font-light text-black lg:text-3xl text-xl">
|
||||
End-to-End Encryption
|
||||
</h3>
|
||||
<p class="mt-6 text-md font-light text-black lg:text-lg">
|
||||
With Mycelium, each node in the network is identified by a unique key pair. This key pair consists of a public key and a private key. The public key is used to encrypt data intended for that node, while the private key is used to decrypt the data. This cryptographic system ensures that only the intended recipient can access the data.
|
||||
</p>
|
||||
<p class="mt-4 text-md font-light text-black lg:text-lg">
|
||||
When a node sends data to another node within the Mycelium network, the data is encrypted using the recipient's public key. This encryption ensures that even if the data is intercepted during transmission, it remains confidential and unreadable without the corresponding private key. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,23 +0,0 @@
|
||||
<div class=" fade-in">
|
||||
<div class="relative isolate">
|
||||
<div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
|
||||
<div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">BENEFITS</p>
|
||||
<h2 class="text-balance lg:text-5xl text-4xl font-medium tracking-tight text-black">Enhances Scalability</h2>
|
||||
<h3 class="mt-6 font-light text-black lg:text-3xl text-xl">
|
||||
Designed to Adapt
|
||||
</h3>
|
||||
<p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
|
||||
Mycelium is an open-source project designed to dynamically adapt to changing network conditions. This means that, as new nodes join the network or as existing nodes leave, the system can adjust seamlessly. This adaptability allows Mycelium to accommodate an increasing number of participants without compromising performance.
|
||||
</p>
|
||||
<p class="mt-4 text-md font-light text-stone-800 lg:text-lg">
|
||||
Mycelium can distribute network traffic effectively. In cases of increased network usage or high data transfer demands, the system can balance the load by routing data through multiple paths or nodes. This load distribution ensures that the network can handle a larger volume of data and more users without becoming overwhelmed.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
|
||||
<img class="w-full max-w-md h-auto object-cover rounded-xl" src="/images/about4.jpg"
|
||||
alt="Mobile App Screenshot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,12 +0,0 @@
|
||||
<div class="bg-white fade-in">
|
||||
<div class="relative isolate px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl py-24">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-medium tracking-tight text-black">A Part of ThreeFold Ecosystem</h2>
|
||||
<h3 class="fade-in text-balance lg:text-3xl text-2xl font-normal tracking-tight text-black">An Integral Component of Sustainable Decentralization</h3>
|
||||
<p class="mt-8 lg:text-lg font-light text-black sm:text-xl/8">Mycelium seamlessly integrates within the broader ThreeFold ecosystem, playing a pivotal role in the journey towards sustainable and decentralized digital transformation.
|
||||
As a key component, Mycelium empowers the ThreeFold Grid with efficient, secure, and scalable networking solutions, contributing to a future where digital connectivity is both eco-conscious and accessible to all.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
{% set tfFaq = get_section(path="faq/_index.md") %}
|
||||
{% set farmFaq = get_section(path="farmfaq/_index.md") %}
|
||||
{% set tftFaq = get_section(path="tftfaq/_index.md") %}
|
||||
|
||||
{% if current_path == '/faq/' %}
|
||||
<h2 class="text-center mt-10">{{ tfFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in tfFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/farmfaq/' %}
|
||||
<h2 class="text-center mt-10">{{ farmFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in farmFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/tftfaq/' %}
|
||||
<h2 class="text-center mt-10">{{ tftFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in tftFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<style>
|
||||
a {
|
||||
color: #4ec48f
|
||||
}
|
||||
</style>
|
||||
@ -1,90 +0,0 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent text-black pt-12 pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
||||
<!-- Left Content -->
|
||||
<div class="lg:col-span-7">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">When 3 Becomes 4</h1>
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-black">
|
||||
The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
|
||||
Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
|
||||
For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Blockquote -->
|
||||
<div class="lg:col-span-5">
|
||||
<figure class=" mt-6 pl-8">
|
||||
<blockquote class=" text-2xl text-black fade-in font-semibold ">
|
||||
<p class="lg:text-2xl text-xl leading-normal text-black font-semibold">We believe actions are more important than words. <br><br>
|
||||
This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
|
||||
</p>
|
||||
</blockquote>
|
||||
<br>
|
||||
<a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-black hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left-width: 2px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem; /* Adjust the gap size as needed */
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
<div class="bg-transparent fade-in pb-24 flex items-center justify-center">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
|
||||
<p class="fade-in mx-auto text-pretty lg:text-2xl leading-tight text-xl font-normal text-gray-200">Announcements</p>
|
||||
<p class="fade-in mx-auto text-pretty lg:text-5xl leading-tight text-4xl font-normal text-black">Coming Soon on 12.12.24</p>
|
||||
<p class="max-w-4xl mt-4 fade-in mx-auto text-pretty lg:text-xl mb-12 leading-tight text-lg font-light text-gray-200"></p>
|
||||
|
||||
</div>
|
||||
<div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-2">
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-black lg:text-3xl text-xl text-center font-semibold">A Roadmap to <br>Web4</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-black lg:text-3xl text-xl text-center font-semibold">Web4 <br>Phone</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-black lg:text-3xl text-xl text-center font-semibold">Web4 <br>Router</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-black lg:text-3xl text-xl text-center font-semibold">Web4 <br>Node</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// JavaScript to control the blinking effect
|
||||
const items = document.querySelectorAll('.grid-item');
|
||||
let currentIndex = 0;
|
||||
|
||||
function blinkItem() {
|
||||
// Remove the 'blink' class from all items
|
||||
items.forEach(item => item.classList.remove('blink'));
|
||||
|
||||
// Add the 'blink' class to the current item
|
||||
items[currentIndex].classList.add('blink');
|
||||
|
||||
// Move to the next item in a clockwise manner
|
||||
currentIndex = (currentIndex + 1) % items.length;
|
||||
}
|
||||
|
||||
// Start the blinking effect
|
||||
setInterval(blinkItem, 1000); // Change every second
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS for the blinking effect */
|
||||
.blink {
|
||||
animation: blink-animation 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-animation {
|
||||
0%, 100% { background-color: rgba(255, 255, 255, 0.1); }
|
||||
50% { background-color: rgba(255, 255, 255, 0.5); }
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +0,0 @@
|
||||
<div class="h-screen flex flex-col justify-center items-center">
|
||||
<div class="">
|
||||
<img
|
||||
class="mx-auto"
|
||||
src="/images/mycel2.gif"
|
||||
alt="TF">
|
||||
</div>
|
||||
</div>
|
||||
@ -1,53 +0,0 @@
|
||||
<div class="bg-transparent">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 class="lg:text-balance leading-tight lg:text-left lg:items-start items-center text-center font-normal tracking-tight text-black lg:text-5xl text-3xl fade-in">
|
||||
Stay tuned for 12.12.24<br/>
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
<a href="https://t.me/threefoldnews" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Telegram
|
||||
</a>
|
||||
<a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Newsletter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg-black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards;
|
||||
}
|
||||
|
||||
h2 {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,83 +0,0 @@
|
||||
<div class="flex bg-transparent">
|
||||
<div class="max-w-2xl p-8 mx-auto text-center">
|
||||
<p class="mx-auto mt-6 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
We believe actions are more important than words. <br>
|
||||
This page is in black & white,
|
||||
to let YOU be the color of the future of the internet.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
Web4
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
Web4 opens the door for Machines & Humans to create together
|
||||
a new form of Intelligence with respect for the Planet & People.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
Augmented Collective Intelligence
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
ThreeFold has been working on Web4 for more than 10 years,
|
||||
ready to go public <span class="font-semibold">12.12.2024</span>
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
An Internet created by Everyone for Everyone
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
The Internet is a Trillion USD business.
|
||||
We want to make sure this Internet is built and owned by all of us.
|
||||
</p>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
Register for our online launch event 12-12-2024.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-semibold tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
When 3 Becomes 4
|
||||
</h2>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
<a href="" class="fade-in fade-in-delay rounded-2xl bg-white px-8 py-2.5 text-base font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">
|
||||
12.12.24
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* Fade-in animation */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Fade-in keyframe */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// JavaScript to add 'visible' class after loading
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
fadeInElements.forEach((element, index) => {
|
||||
// Adding a delay for each fade-in effect (increasing delay with index)
|
||||
setTimeout(() => {
|
||||
element.classList.add('visible');
|
||||
}, index * 1000); // 1000ms delay between each element
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -1,40 +0,0 @@
|
||||
<div class="bg-transparent py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6">
|
||||
<div class="mx-auto w-full max-w-3xl lg:mx-0">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black">Unlock the Web4 Revolution with ThreeFold</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
|
||||
<div class="mt-8 flex gap-x-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Phone</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Router</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Nodes</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">TF Genie</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,109 +0,0 @@
|
||||
<div class="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
|
||||
<!-- Main Heading -->
|
||||
<h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-black">
|
||||
Join the Web4 Revolution
|
||||
</h2>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p class="mx-auto mt-6 max-w-xl text-pretty text-xl lg:text-2xl font-light text-gray-200 fade-in fade-in-delay">
|
||||
Join us on our journey. Watch the video below and scroll down to learn how you can participate.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Embed YouTube Video -->
|
||||
<div class="mt-8 flex justify-center">
|
||||
<div class="responsive-iframe">
|
||||
<iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player"
|
||||
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action Button -->
|
||||
<div class="mt-12 fade-in flex items-center justify-center gap-x-4">
|
||||
<a href="/signup" target="_blank"
|
||||
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">
|
||||
Take the Next Step
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Fade-in keyframe */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive iframe for YouTube video */
|
||||
.responsive-iframe {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px; /* Max width for large screens */
|
||||
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.responsive-iframe iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Ensure content aligns properly */
|
||||
.flex.justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Responsive text and spacing */
|
||||
.text-pretty {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.text-pretty {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Style for the button */
|
||||
.blinking-effect {
|
||||
animation: blink 1.5s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// JavaScript to add 'visible' class after loading
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
fadeInElements.forEach((element, index) => {
|
||||
// Adding a delay for each fade-in effect (increasing delay with index)
|
||||
setTimeout(() => {
|
||||
element.classList.add('visible');
|
||||
}, index * 1000); // 1000ms delay between each element
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -1,41 +0,0 @@
|
||||
<div class="overflow-hidden bg-transparent py-16 lg:py-24">
|
||||
<div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
|
||||
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
|
||||
</div>
|
||||
<div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
|
||||
<!-- Image on the left and text on the right -->
|
||||
<div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
|
||||
<img class="fade-in blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- Text on the left -->
|
||||
<div class="relative p-4"> <!-- Add padding here for all sides -->
|
||||
<div class="gap-y-4">
|
||||
<div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">3Phone</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and seamlessly integrate with the ThreeFold Grid.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">3Bot</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">3Node</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3node" target="_blank" class=" text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">3Router</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,60 +0,0 @@
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<form action="#" method="POST">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<h3 class="text-black text-lg">Application</h3>
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<label for="company-website" class="block text-sm font-medium text-gray-700"> Website </label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> http:// </span>
|
||||
<input type="text" name="company-website" id="company-website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="about" class="block text-sm font-medium text-gray-700"> About </label>
|
||||
<div class="mt-1">
|
||||
<textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">Brief description for your profile. URLs are hyperlinked.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700"> Photo </label>
|
||||
<div class="mt-1 flex items-center">
|
||||
<span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
|
||||
<svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700"> Resume </label>
|
||||
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||
<div class="space-y-1 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<div class="flex text-sm text-gray-600">
|
||||
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-black hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
|
||||
<span>Upload a file</span>
|
||||
<input id="file-upload" name="file-upload" type="file" class="sr-only">
|
||||
</label>
|
||||
<p class="pl-1">or drag and drop</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">PDF up to 10MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-black bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -1,70 +0,0 @@
|
||||
{% block content %}
|
||||
|
||||
<div class="text-center main-title px-0 md:w-2/3 mx-8 md:mx-12">
|
||||
<h2
|
||||
class="tracking-tight text-left text-2xl md:text-4xl fw-500 leading-snug font-medium"
|
||||
>
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
ThreeFold stories and project info
|
||||
{% if taxonomy == "categories" %} -
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
{% endif %}
|
||||
</h2>
|
||||
<div>
|
||||
<div class="mt-3 grid gap-5 max-w-lg mx-auto md:grid-cols-2 lg:grid-cols-3 lg:max-w-none">
|
||||
{%- for post in paginator.pages %}
|
||||
{% if not post.extra.hidden %}
|
||||
{% include "partials/postCard.html" %}
|
||||
{%endif%} {%- endfor %}
|
||||
</div>
|
||||
<hr class="my-10 border-gray-700"/>
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,38 +0,0 @@
|
||||
|
||||
<div class="mx-8 md:mx-4 flex flex-col">
|
||||
<div class="flex flex-col mb-12">
|
||||
<h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4"> FILTER POSTS BY</h4>
|
||||
<a id="all" class="mb-2 text-black font-normal" href="/blog">All</a>
|
||||
{% set taxonomy = get_taxonomy(kind="categories") %}
|
||||
{% set categories = taxonomy.items %}
|
||||
{% for category in categories %}
|
||||
{% set path = category.name | slugify %}
|
||||
{% set fullpath = "/categories/" ~ path %}
|
||||
<a id="{{path}}" class="mb-2 text-gray-100 font-normal" href={{fullpath}}> {{category.name}} </a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% set section = get_section(path="blog/_index.md")%}
|
||||
|
||||
<div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
|
||||
<h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-6"> FEATURED POSTS</h4>
|
||||
|
||||
{% for page in section.pages %}
|
||||
{% if page.extra.isFeatured %}
|
||||
<a class="mb-3 text-gray-400" href={{page.permalink}}>{{ page.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setActiveCategory() {
|
||||
let activeCategory = window.location.pathname.split("/")[2]
|
||||
if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
|
||||
else { activeLink = document.getElementById(activeCategory)}
|
||||
activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
|
||||
}
|
||||
|
||||
setActiveCategory()
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<div class="bg-transparent">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 class="lg:text-balance text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Build the <br>Internet of Tomorrow, <br>Today.
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
<a href="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Dive Deeper
|
||||
</a>
|
||||
<a href="/action" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,88 +0,0 @@
|
||||
<div class="bg-white pt-24 pb-10 fade-in-box">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 ">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black">Download Mycelium</h2>
|
||||
<h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight text-black">Nature's Blueprint for Digital Connectivity</h2>
|
||||
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
|
||||
Get AIBox for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently.
|
||||
</p>
|
||||
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
|
||||
Not sure how it works? <a href="https://manual.threefold.io/documentation/system_administrators/mycelium/mycelium_app.html" class="font-semibold" target="_blanks"><u>Read the manual.</u></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="pb-12">
|
||||
<div class="max-w-6xl mx-8 lg:mx-auto">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-transparent items-start">
|
||||
<img src="/images/icons/apple.svg" alt="Apple" class="w-16 h-16 justify-start">
|
||||
<dt class="mt-2 flex items-starts gap-x-3 text-base lg:text-md rounded-2xl font-semibold text-black">
|
||||
Download for iOS & MacOS
|
||||
</dt>
|
||||
<dd class="mt-1 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-black text-sm">Download Mycelium App from the Apple Store.</p>
|
||||
<p class="mt-3">
|
||||
<a href="https://apps.apple.com/app/id6504277565" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Download Now <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-transparent hover:bg-transparent items-start">
|
||||
<img src="/images/icons/windows.svg" alt="Windows" class="w-16 h-16 justify-start">
|
||||
<dt class="flex items-center gap-x-3 mt-2 text-base lg:text-md rounded-2xl font-semibold text-black">
|
||||
Download for Windows
|
||||
</dt>
|
||||
<dd class="mt-1 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-black text-sm">Download the Mycelium App for Windows directly from its Github repository.</p>
|
||||
<p class="mt-3">
|
||||
<a href="https://github.com/threefoldtech/myceliumflut/releases" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Download Now <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-transparent hover:bg-transparent items-start">
|
||||
<img src="/images/icons/android.svg" alt="Android" class="w-16 h-16 justify-start">
|
||||
<dt class="mt-2 flex items-center gap-x-3 text-base lg:text-md rounded-2xl font-semibold text-black">
|
||||
Download for Android
|
||||
</dt>
|
||||
<dd class="mt-1 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-black text-sm">
|
||||
Download Mycelium App from the Google Play Store.</p>
|
||||
<p class="mt-3">
|
||||
<a href="https://play.google.com/store/apps/details?id=tech.threefold.mycelium" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Download Now <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.7s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
48
templates/partials/farmer/about1.html
Normal file
48
templates/partials/farmer/about1.html
Normal file
@ -0,0 +1,48 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2>
|
||||
<p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience
|
||||
building decentralized internet infrastructure.
|
||||
</p>
|
||||
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">ThreeFold empowers individuals and organizations to share compute, storage,
|
||||
and network resources on the ThreeFold Grid—creating a truly decentralized and autonomous internet.
|
||||
</p>
|
||||
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Today, our <span class="font-semibold">Proof-of-Concept Network</span> is live globally, running on <span class="font-semibold">v3.15.0</span> technology.
|
||||
</p>
|
||||
<div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
|
||||
<a href="https://threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Visit ThreeFold
|
||||
</a>
|
||||
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
</style>
|
||||
|
||||
41
templates/partials/farmer/about2.html
Normal file
41
templates/partials/farmer/about2.html
Normal file
@ -0,0 +1,41 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 pt-0 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight text-black lg:text-5xl text-4xl fade-in">We believe AI Needs to be Decentralized</h2>
|
||||
<p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We are at the dawn of AI, a transformative force that will redefine how we live, work, and interact with technology. AI presents an incredible opportunity for humanity, however, as AI systems become more powerful, their control sits in the hands of a few corporations, raising serious concerns around privacy, bias, accessibility, and so on.
|
||||
</p>
|
||||
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Further, centralized cloud providers are bottlenecks, as AI compute demand is outpacing supply and training AI models is too expensive.
|
||||
|
||||
</p>
|
||||
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We must not repeat mistakes of the past. Without decentralization, AI will remain controlled by a few corporations—limiting accessibility, innovation, and independence. To ensure AI benefits everyone, we must advocate for decentralized, open-source AI models that are transparent, ethical, and community-driven. And this can only happen on an infrastructure like ThreeFold.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
</style>
|
||||
|
||||
60
templates/partials/farmer/cta.html
Normal file
60
templates/partials/farmer/cta.html
Normal file
@ -0,0 +1,60 @@
|
||||
<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4">
|
||||
<div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in">
|
||||
Own Your AI. <br>Pre-Order<br>Now.
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Pre-order Now
|
||||
</a>
|
||||
<a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Initial state: elements are invisible */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
/* State when element is in view */
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Get all the elements that need to be faded in
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const h2 = document.getElementById("blinking4");
|
||||
|
||||
setInterval(() => {
|
||||
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
|
||||
}, 1000); // Blinks every 2 seconds
|
||||
// Target all elements with the 'fade-in' class
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// Add 'visible' class to the element when it's in view
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target); // Stop observing after it fades in
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1 // Trigger when 10% of the element is in view
|
||||
});
|
||||
|
||||
fadeInElements.forEach(element => {
|
||||
observer.observe(element);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
68
templates/partials/farmer/farmers.html
Normal file
68
templates/partials/farmer/farmers.html
Normal file
@ -0,0 +1,68 @@
|
||||
<div class="bg-transparent pt-12 pb-12">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-7xl ">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black capitalize">How it works</h2>
|
||||
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in">
|
||||
Regardless of technical expertise, anyone can deploy AIBOX (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
|
||||
</p>
|
||||
</div>
|
||||
<section class="bg-transparent">
|
||||
<div class="max-w-6xl mx-0 lg:mx-12 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
|
||||
1. HOST A NODE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-800 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
|
||||
2. OFFER CAPACITY
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
|
||||
3. EARN REWARDS
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-800 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
|
||||
</p>
|
||||
<p class="mt-6">
|
||||
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
133
templates/partials/farmer/grid_stats.html
Normal file
133
templates/partials/farmer/grid_stats.html
Normal file
@ -0,0 +1,133 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl class="items grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- ssd -->
|
||||
<div class="fade-in flex flex-col justify-center items-center bg-transparent p-3">
|
||||
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
|
||||
<dt class="text-sm/6 font-light text-black">SSD CAPACITY</dt>
|
||||
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- cores -->
|
||||
<div class="fade-in flex flex-col bg-transparent p-4">
|
||||
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
|
||||
<dt class="text-sm/6 font-light text-black">CORES</dt>
|
||||
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nodes -->
|
||||
<div class="fade-in flex flex-col bg-transparent p-4">
|
||||
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
|
||||
<dt class="text-sm/6 font-light text-black">NODES</dt>
|
||||
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- countries -->
|
||||
<div class="fade-in flex flex-col bg-transparent p-4">
|
||||
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
|
||||
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
|
||||
<dt class="text-sm/6 font-light text-black">COUNTRIES</dt>
|
||||
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div><div class="mt-12 lg:mt-16 flex flex-col lg:flex-row items-center justify-center gap-x-8">
|
||||
<a href="https://threefold.io"
|
||||
target="_blank"
|
||||
class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
|
||||
Visit ThreeFold</a>
|
||||
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in text-base font-semibold text-black hover:text-gray-800 lg:mt-0 mt-8">Explore Grid Capacity<span
|
||||
aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize the countUp for each of the numbers
|
||||
new CountUp('ssd', 0, 1910, 0, 2.5).start();
|
||||
new CountUp('cores', 0, 46934, 0, 2.5).start();
|
||||
new CountUp('nodes', 0, 1596, 0, 2.5).start();
|
||||
new CountUp('countries', 0, 40, 0, 2.5).start();
|
||||
new CountUp('farms', 0, 900, 0, 2.5).start();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
background-color: rgb(26 26 26 / 90%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -7px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
/* right: -60px; */
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.tooltip .tooltiptext {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -7px !important;
|
||||
right: 0px !important;
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
69
templates/partials/farmer/hero_section.html
Normal file
69
templates/partials/farmer/hero_section.html
Normal file
@ -0,0 +1,69 @@
|
||||
<div class="fade-in lg:h-screen flex justify-center items-center">
|
||||
<div class="isolate">
|
||||
<div class="mx-auto text-center max-w-7xl px-6 lg:px-8 py-12">
|
||||
|
||||
|
||||
<!-- Image Section -->
|
||||
<div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
|
||||
<img class="h-auto object-cover rounded-xl" src="/images/aibox_farming.png" alt="AIBox Specifications">
|
||||
</div>
|
||||
<div class="mx-auto lg:mx-0 lg:flex-auto">
|
||||
<!-- Typing Text -->
|
||||
<h1 id="typing-text2" class="mt-6 fade-in font-normal tracking-tight text-black lg:text-[5rem] text-[2.5rem]">
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles -->
|
||||
<style>
|
||||
/* Fade-in for Text & Image */
|
||||
.fade-in-item, .fade-in-image {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 1s ease-out, transform 1s ease-out;
|
||||
}
|
||||
|
||||
.fade-in-item.show, .fade-in-image.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Script -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
/*** Typing Effect ***/
|
||||
const text = "Own Your AI GPU & Share Capacity";
|
||||
const textElement = document.getElementById("typing-text2");
|
||||
let index = 0;
|
||||
|
||||
function typeText() {
|
||||
if (index < text.length) {
|
||||
textElement.textContent += text.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeText, 100);
|
||||
}
|
||||
}
|
||||
|
||||
/*** Fade-in Items One by One ***/
|
||||
const items = document.querySelectorAll(".fade-in-item");
|
||||
const image = document.querySelector(".fade-in-image");
|
||||
let itemIndex = 0;
|
||||
|
||||
function showNextItem() {
|
||||
if (itemIndex < items.length) {
|
||||
items[itemIndex].classList.add("show");
|
||||
itemIndex++;
|
||||
setTimeout(showNextItem, 300); // Faster fade-in
|
||||
} else {
|
||||
image.classList.add("show");
|
||||
}
|
||||
}
|
||||
|
||||
/*** Initialize Everything ***/
|
||||
typeText();
|
||||
setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
|
||||
});
|
||||
</script>
|
||||
55
templates/partials/farmer/show_images.html
Normal file
55
templates/partials/farmer/show_images.html
Normal file
@ -0,0 +1,55 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 pt-12 pb-12">
|
||||
<div class="mx-auto max-w-7xl text-center">
|
||||
{# <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2> #}
|
||||
{# <p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience
|
||||
building decentralized internet infrastructure.
|
||||
</p> #}
|
||||
<div class="fade-in-box mb-16 mx-auto text-center lg:flex lg:justify-center">
|
||||
<img class="h-auto object-cover" src="/images/aibox_farming1.png" alt="AIBox Specifications">
|
||||
</div>
|
||||
<div class="fade-in-box mt-16 mx-auto text-center lg:flex lg:justify-center">
|
||||
<img class="h-auto object-cover" src="/images/aibox_farming2.png" alt="AIBox Specifications">
|
||||
</div>
|
||||
{# <div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
|
||||
<a href="https://threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Visit ThreeFold
|
||||
</a>
|
||||
<a href="https://dashboard.grid.tf/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <span aria-hidden="true">→</span></a>
|
||||
</div> #}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
<div class="overflow-hidden py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||||
<div class="lg:pt-4 lg:pr-8">
|
||||
<div class="lg:max-w-lg">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is Feature1.html</h2>
|
||||
<p class="mt-6 mt-8 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
✓ Push to deploy.
|
||||
</dt>
|
||||
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
✓ SSL certificates.
|
||||
</dt>
|
||||
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
✓ Database backups.
|
||||
</dt>
|
||||
<dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32">
|
||||
<div class="max-w-3xl flex-none lg:max-w-5xl">
|
||||
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md bg-white/5 shadow-2xl ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
<div class="py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is Feature2.html</h2>
|
||||
<p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden pt-16">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" class="mb-[-12%] rounded-xl ring-1 shadow-2xl ring-white/10" width="2432" height="1442">
|
||||
<div class="relative" aria-hidden="true">
|
||||
<div class="absolute -inset-x-20 bottom-0 bg-linear-to-t from-gray-900 pt-[7%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
|
||||
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
|
||||
✓ Push to deploy.
|
||||
</dt>
|
||||
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
|
||||
✓ SSL certificates.
|
||||
</dt>
|
||||
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
|
||||
✓ Simple queues.
|
||||
</dt>
|
||||
<dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
|
||||
✓ Advanced security.
|
||||
</dt>
|
||||
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
|
||||
✓ Powerful API.
|
||||
</dt>
|
||||
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-black">
|
||||
|
||||
✓ Database backups.
|
||||
</dt>
|
||||
<dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
<div class=" py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is Feature3.html</h2>
|
||||
<p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-black">
|
||||
|
||||
✓ Push to deploy
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
|
||||
<p class="flex-auto text-gray-200">Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu.</p>
|
||||
<p class="mt-6">
|
||||
<a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-black">
|
||||
|
||||
✓ SSL certificates
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
|
||||
<p class="flex-auto text-gray-200">Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.</p>
|
||||
<p class="mt-6">
|
||||
<a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-black">
|
||||
|
||||
✓ Simple queues
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
|
||||
<p class="flex-auto text-gray-200">Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod.</p>
|
||||
<p class="mt-6">
|
||||
<a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
<div class="bg-transparent">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
||||
<div class="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black sm:text-5xl">This is Feature4.html
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 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">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-6">
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Communicate securely</dt>
|
||||
<dd class="mt-1 font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Store effortlessly</dt>
|
||||
<dd class="mt-1 ont-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Restore authenticity</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Unlockinsights</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Streamline interactions</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ digital presence</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the slow blinking animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
@ -1,152 +0,0 @@
|
||||
<div class="bg-transparent pt-12 pb-6">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black">This is feature5.html</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="lg:pb-24 pb-12 pt-12 bg-transparent">
|
||||
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- 2ND ROW-->
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/deploy/node_finder.html?highlight=gateway%20nodes#gateway-nodes" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- 3RD ROW-->
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
<div class="overflow-hidden py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||||
<div class="lg:ml-auto lg:pt-4 lg:pl-4">
|
||||
<div class="lg:max-w-lg">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is Feature6.html</h2>
|
||||
<p class="mt-6 text-lg/8 text-gray-200 font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-200 lg:max-w-none">
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-gray-200">
|
||||
Push to deploy.
|
||||
</dt>
|
||||
<dd class="inline text-gray-200 font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-gray-200">
|
||||
|
||||
SSL certificates.
|
||||
</dt>
|
||||
<dd class="inline text-gray-200 font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-gray-200">
|
||||
|
||||
Database backups.
|
||||
</dt>
|
||||
<dd class="inline text-gray-200 font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start justify-end lg:order-first">
|
||||
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="Product screenshot" class="w-[48rem] max-w-none rounded-xl sm:w-[57rem]" width="1220" height="542">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
{% if featured.taxonomies.people %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(featured.taxonomies.people[0]) %}
|
||||
{% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<body>
|
||||
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8 relative mt-12 md:mt-10 items-center container mx-auto">
|
||||
<div class="relative my-8 w-full md:w-auto mx-3 lg:mx-12">
|
||||
<h3 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4">FEATURED POST</h3>
|
||||
<a href={{featured.permalink}}>
|
||||
<h2
|
||||
class="text-2xl main-title md:text-4xl fw-500 text-gray-50 leading-snug font-medium">
|
||||
{{ featured.title }}
|
||||
</h2>
|
||||
<p class="mt-2 text-base font-normal text-gray-50 text-left">
|
||||
{{ featured.description }}
|
||||
</p>
|
||||
</a>
|
||||
<h4 class="my-2 text-sm not-italic font-light leading-6 text-gray-100">
|
||||
{{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
|
||||
{% for author in featured.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ author ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize text-gray-200"> <img
|
||||
src="{{ author_img }}" alt="{{ author.title }}" class="
|
||||
inline-flex
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border border-gray-400
|
||||
" /> {{ author.title }}</a>
|
||||
{% endfor %}
|
||||
</h4>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative lg:mt-0 max-w-full">
|
||||
<img class="relative rounded mx-auto max-h-64 p-2 border border-gray-600" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 container border-gray-600 mx-auto">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -1,45 +0,0 @@
|
||||
<body>
|
||||
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8 relative mt-12 md:mt-10 items-center container mx-auto">
|
||||
<div class="relative my-8 w-full md:w-auto mx-3 lg:mx-12">
|
||||
<h3 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4">FEATURED NEWS</h3>
|
||||
<a href={{featured.permalink}}>
|
||||
<h2
|
||||
class="text-2xl main-title md:text-4xl fw-500 text-gray-50 font-medium">
|
||||
{{ featured.title }}
|
||||
</h2>
|
||||
<p class="mt-2 text-base font-normal text-gray-50 text-left">
|
||||
{{ featured.description }}
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<h4 class="my-2 text-sm not-italic font-light leading-6 text-gray-100">
|
||||
{{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
|
||||
{% for author in featured.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ author ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize text-gray-200"> <img
|
||||
src="{{ author_img }}" alt="{{ author.title }}" class="
|
||||
inline-flex
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border-2 border-white
|
||||
" /> {{ author.title }}</a>
|
||||
{% endfor %}
|
||||
</h4>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative lg:mt-0 max-w-full">
|
||||
{% if featured.extra.imgPath %}
|
||||
<img class="relative rounded mx-auto max-h-64 p-2 border-2 border-gray-100" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-6 container border-gray-600 mx-auto">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -1,48 +0,0 @@
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{% if path_array | length < 4%}
|
||||
{% set category = "All" %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
<div class="left-0 z-50 border border-gray-200 bg-gray-100 my-6 w-full rounded-md">
|
||||
<header class="flex flex-wrap container mx-auto pb-0 sm:px-0 transition-all transition-500">
|
||||
<div class="flex justify-between px-4 sm:p-0">
|
||||
<div class="ml-8 inline-flex flex-shrink-0">
|
||||
<span class="flex text-base items-center capitalize">
|
||||
Filter:
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="inline-flex md:order-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
|
||||
<ul class="list-none sm:flex justify-left capitalize transition-all transition-500 ">
|
||||
<li class="flex items-center">
|
||||
<div class="relative">
|
||||
<button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link">
|
||||
<span class="text-base capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
|
||||
<svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" 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></svg>
|
||||
</button>
|
||||
<div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
|
||||
<div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700">
|
||||
<a data-v-21fd5df0="" href="/people" class="text-gray-700 cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
All
|
||||
</a>
|
||||
{% set taxonomy = get_taxonomy(kind="memberships") %}
|
||||
{% set categories = taxonomy.items %}
|
||||
{% for category in categories %}
|
||||
{% set path = category.name | slugify %}
|
||||
{% set fullpath = "/memberships/" ~ path %}
|
||||
<a href="{{fullpath}}" class="text-gray-700 cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
{{category.name}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
@ -4,9 +4,9 @@
|
||||
<html>
|
||||
<head />
|
||||
<body>
|
||||
<div class="mt-20 border-t border-gray-700"></div>
|
||||
<div class=" border-t border-gray-700"></div>
|
||||
<footer class="bg-transparent">
|
||||
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
|
||||
<div class="max-w-screen-2xl bg-transparent mx-auto py-12 px-4 sm:px-6">
|
||||
<div class="xl:flex xl:gap-4">
|
||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
|
||||
|
||||
@ -1 +1 @@
|
||||
<div data-tf-live="01JEXHAZ930FVKSDJ440Y8X375"></div><script src="//embed.typeform.com/next/embed.js"></script>
|
||||
<div class="py-24" data-tf-live="01JN3NGD20Z7TH1X28YVVG24Z3"></div><script src="//embed.typeform.com/next/embed.js"></script>
|
||||
@ -47,34 +47,34 @@
|
||||
cookieconsent.run({ "notice_banner_type": "headline", "consent_type": "express", "palette": "light", "language": "en", "page_load_consent_levels": ["strictly-necessary"], "notice_banner_reject_button_hide": false, "preferences_center_close_button_hide": false, "website_name": "https://www.mycelium.threefold.io/", "website_privacy_policy_url": "https://library.threefold.me/info/legal/#/legal__privacypolicy" });
|
||||
});
|
||||
</script>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || []; w[l].push({
|
||||
'gtm.start':
|
||||
new Date().getTime(), event: 'gtm.js'
|
||||
}); var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-N7PNMFH');
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-100065546-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-100065546-1');
|
||||
</script>
|
||||
<!-- Matomo Tag Manager -->
|
||||
<script>
|
||||
<script>
|
||||
var _mtm = window._mtm = window._mtm || [];
|
||||
_mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
|
||||
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
||||
g.async = true; g.src = 'https://analytics.threefold.io/js/container_KIcuIdn4.js'; s.parentNode.insertBefore(g, s);
|
||||
</script>
|
||||
<!-- End Matomo Tag Manager -->
|
||||
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
|
||||
(function() {
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src='https://analytics.threefold.io/js/container_KsiljvY9.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Tag Manager -->
|
||||
|
||||
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.threefold.io/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '23']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<!-- Crisp -->
|
||||
<script type="text/plain" cookie-consent="tracking">
|
||||
window.$crisp = [];
|
||||
@ -87,18 +87,7 @@
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
<!-- Crisp without cookies -->
|
||||
<!-- <script type="text/javascript" cookie-consent="tracking">
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement("script");
|
||||
s.src = "https://client.crisp.chat/l.js";
|
||||
s.async = 1;
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
</script> -->
|
||||
|
||||
<!-- end of Crisp-->
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
{%- set section = get_page(path="header/index.md") %}
|
||||
{% set header_items = section.content | safe | split(pat="<li>") %}
|
||||
|
||||
<header id="header-container bg-white">
|
||||
<div class="z-20 fixed top-0 left-0 right-0 bg-white lg:absolute w-full">
|
||||
<header id="header-container">
|
||||
<div class="z-20 fixed top-0 left-0 right-0 bg-white l lg:absolute w-full">
|
||||
<div class="relative z-50">
|
||||
<div class="bg-white mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
|
||||
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
|
||||
<div>
|
||||
<a href="{{get_url(path='/')}}" class="flex">
|
||||
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
|
||||
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="AIBOX Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
|
||||
<button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" type="button" class="bg-white hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
|
||||
<button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
@ -36,7 +36,7 @@
|
||||
{% set current = get_url(path=link_path[1]) ~ "/" %}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg font-normal py-3 leading-6 text-pretty tracking-normal text-gray-600 focus:outline-none focus:text-gray-700 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -45,22 +45,25 @@
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-600 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 text-black group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
|
||||
<button type="button" id="{{button_id}}" class="bg-black1 nav_btn py-3 text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ header_label }}</span>
|
||||
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<a href="https://threefold.info/aibox/docs/"
|
||||
class="text-lg py-3 leading-6 font-normal text-pretty tracking-wide text-gray-600 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150" target="_blank">
|
||||
Docs
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="hidden md:inline-block md:order-last">
|
||||
@ -107,7 +110,7 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul> #}
|
||||
<a href="/action" target="_blank" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-stone-90">Get AIBox</a>
|
||||
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-gray-900">Pre-Order Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -166,13 +169,13 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-black focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-600 hover:text-gray-900 focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
||||
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-black group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-black transition ease-in-out duration-150">
|
||||
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
|
||||
{{ header_label }}
|
||||
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
@ -196,8 +199,12 @@
|
||||
{% include "partials/socialLinks.html" %}
|
||||
</div> #}
|
||||
|
||||
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
|
||||
<a href="/action" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
|
||||
<div class="rounded-xl border-2 my-4 border-gray-400 py-2 mx-4">
|
||||
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Pre-Order Now</a><br>
|
||||
<a href="https://threefold.info/aibox/docs/"
|
||||
class="text-lg px-3 py-6 leading-6 font-normal text-white hover:text-gray-200 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150" target="_blank">
|
||||
Docs
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@ -217,7 +224,8 @@
|
||||
}
|
||||
|
||||
.active{
|
||||
color: #c7c7c7 !important;
|
||||
color: #3d3d3d !important;
|
||||
font-weight:700 !important
|
||||
}
|
||||
.nav_btn:hover {
|
||||
color: #c7c7c7 !important;
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
<header id="header-container" class="bg-inherit">
|
||||
<div class="z-10 bg-white w-screen">
|
||||
<div class="relative z-50">
|
||||
<div class="mx-auto bg-white flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
||||
<div>
|
||||
<a href="/" class="flex">
|
||||
<img src="images/tf_dark.png" alt="ODFZ Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden bg-white lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
{% for header_item in header_items %}
|
||||
{% if not loop.first %}
|
||||
{% set header_arr = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_arr[0] %}
|
||||
{% if '<a' in header_label %}
|
||||
{% set link_label = header_label | striptags %}
|
||||
{% set link_path = header_label | split(pat="%22") | safe%}
|
||||
{% set current = get_url(path=link_path[1]) ~ "/" %}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% elif current_url and current == current_url %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="nav_btn py-3 text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ header_label }}</span>
|
||||
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for header_item in header_items %}
|
||||
{% set header_parts = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_parts[0] %}
|
||||
{% set header_menu = header_parts[1] %}
|
||||
{% set menu_id = header_label ~ "-menu" | slugify %}
|
||||
<nav>
|
||||
<div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
<div class="bg-white">
|
||||
<div class="mx-8 lg:mx-20 px-6 py-4 text-white">
|
||||
{{ header_menu | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
Your
|
||||
<span id="slides" class="slides"></span>
|
||||
</h1>
|
||||
<div id="learn-more" class="mt-10 flex items-center gap-x-6 hidden">
|
||||
<a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
|
||||
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6">
|
||||
<a href="/farmers" target="_blank" class="text-xl font-semibold text-black hover:text-gray-200">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
60
templates/partials/hero/aihero10.html
Normal file
60
templates/partials/hero/aihero10.html
Normal file
@ -0,0 +1,60 @@
|
||||
<div class="bg-transparent py-24 mb-10 mt-10">
|
||||
<div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 id="blinking4" class="lg:text-balance text-left items-start lg:text-[6rem] text-[2.5rem] font-normal tracking-tight text-black fade-in">
|
||||
Own Your AI. <br>Pre-Order<br>Now.
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Pre-order Now
|
||||
</a>
|
||||
<a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Initial state: elements are invisible */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
/* State when element is in view */
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Get all the elements that need to be faded in
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const h2 = document.getElementById("blinking4");
|
||||
|
||||
setInterval(() => {
|
||||
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
|
||||
}, 1000); // Blinks every 2 seconds
|
||||
// Target all elements with the 'fade-in' class
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// Add 'visible' class to the element when it's in view
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target); // Stop observing after it fades in
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1 // Trigger when 10% of the element is in view
|
||||
});
|
||||
|
||||
fadeInElements.forEach(element => {
|
||||
observer.observe(element);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 lg:pt-24 pb-0">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8 pb-10">
|
||||
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 pb-0">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8 lg:pb-10 pb-0">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-4xl">
|
||||
<div class="text-center">
|
||||
<h2 id="blinking" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8 pt-12 pb-24 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||
<div class="space-y-8 lg:py-12 py-6 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||
|
||||
<!-- Item #1 -->
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
|
||||
@ -20,7 +20,7 @@
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
||||
<div class="font-semibold text-lg text-black mb-2">Run AI Models with Full Control </div>
|
||||
<div class="text-gray-900 font-light">
|
||||
Creation of Core Technology
|
||||
|
||||
<br>Execute AI models directly on your dedicated GPU
|
||||
|
||||
<br>Decide which models are allowed to run on your AI BOX
|
||||
@ -44,6 +44,11 @@
|
||||
Slice your hardware into a maximum of 8 Virtual Machines
|
||||
<br>Control GPU allocation: 0, 1, or 2 GPUs per VM (no oversubscription)
|
||||
<br>Users can connect or disconnect GPUs as needed, with owner permissions
|
||||
<br>Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication
|
||||
<br>Pre-built container images available for quick setup and deployment
|
||||
<br>Web gateways allow external connections to VM containers
|
||||
<br>
|
||||
<br>Planned Q2 2025.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,13 +61,15 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
||||
<div class="font-semibold text-lg text-black mb-2">Lightweight, Secure, and Flexible VM</div>
|
||||
<div class="font-semibold text-lg text-black mb-2">Mycelium Actors</div>
|
||||
<div class="text-gray-900 font-light">
|
||||
VMs come with a minimal OS and Docker (Podman) support
|
||||
<br>Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication
|
||||
<br>Pre-built Docker images available for quick setup and deployment
|
||||
<br>Supports native Docker images and flights
|
||||
<br>Web gateways allow external connections to VM containers
|
||||
Become a host for Mycelium Actors and contribute to the Mycelium network.
|
||||
<br>Mycelium Actors process jobs and generate rewards for their hosts.
|
||||
<br>These jobs can range from AI requests (such as LLM processing) to higher-level functions like text-to-speech, website building, transcribing youtube video's, training a large language model, communicate ...
|
||||
<br>
|
||||
<br>By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.
|
||||
<br>
|
||||
<br>Planned for Q2 2025.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -89,8 +96,8 @@
|
||||
const h2 = document.getElementById("blinking");
|
||||
|
||||
setInterval(() => {
|
||||
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
|
||||
}, 1000); // Blinks every 2 seconds
|
||||
h2.style.opacity = (h2.style.opacity == "1") ? "0.5" : "1";
|
||||
}, 1500); // Blinks every 2 seconds
|
||||
// Target all elements with the 'fade-in' class
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<div class="bg-white pt-12 lg:pt-24 pb-12">
|
||||
<div class="bg-white pt-12 lg:pt-24 pb-6">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="max-w-3xl">
|
||||
<h2 class="fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black typing">
|
||||
Why Decentralized AI Matters
|
||||
Why Decentralized AI Matters...
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="bg-white px-12 pb-12 mx-auto">
|
||||
<div class="bg-white px-12 pb-24 lg:pb-16 mx-auto">
|
||||
<div class="mx-auto max-w-3xl items-start pb-12">
|
||||
<p id="1" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black px-10">
|
||||
Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing...
|
||||
@ -45,7 +45,7 @@
|
||||
paragraphs[index].classList.add("show");
|
||||
|
||||
index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
|
||||
setTimeout(showNextParagraph, 5000); // Change paragraph every 3 seconds
|
||||
setTimeout(showNextParagraph, 5000); // Change paragraph every 5 seconds
|
||||
}
|
||||
|
||||
showNextParagraph();
|
||||
|
||||
@ -1,24 +1,27 @@
|
||||
<div class="fade-in">
|
||||
<div class="relative isolate">
|
||||
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
|
||||
<!-- Typing Text -->
|
||||
<h1 id="typing-text2" class="mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]"></h1>
|
||||
<h1 id="typing-text2" class="fade-in mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">
|
||||
</h1>
|
||||
|
||||
<!-- Specification List -->
|
||||
<dl class="mt-10 px-10 max-w-xl space-y-6 text-gray-900 lg:max-w-xl">
|
||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ AMD CPU</dt></div>
|
||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 64 GB Memory</dt></div>
|
||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
|
||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
|
||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
|
||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Integrated mini computer with relay and remote control</dt></div>
|
||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
|
||||
<dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
|
||||
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
|
||||
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
|
||||
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Powerful AMD CPU</dt></div>
|
||||
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 64-128 GB Memory</dt></div>
|
||||
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
|
||||
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
|
||||
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
|
||||
<div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- Image Section -->
|
||||
<div class="fade-in-image mt-16 sm:mt-24 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/aibox_spec.jpg" alt="Mobile App Screenshot">
|
||||
<div class="fade-in-image mt-8 lg:mt-24 lg:flex lg:justify-center lg:w-1/2">
|
||||
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="AIBox Specifications">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,65 +48,33 @@
|
||||
/*** Typing Effect ***/
|
||||
const text = "What's Inside AIBox";
|
||||
const textElement = document.getElementById("typing-text2");
|
||||
let loopCount = 0;
|
||||
const maxLoops = 5;
|
||||
let index = 0;
|
||||
|
||||
function typeText(i, callback) {
|
||||
if (i < text.length) {
|
||||
textElement.textContent += text.charAt(i);
|
||||
setTimeout(() => typeText(i + 1, callback), 100);
|
||||
} else {
|
||||
setTimeout(callback, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteText(callback) {
|
||||
let currentText = textElement.textContent;
|
||||
if (currentText.length > 0) {
|
||||
textElement.textContent = currentText.substring(0, currentText.length - 1);
|
||||
setTimeout(() => deleteText(callback), 50);
|
||||
} else {
|
||||
setTimeout(callback, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function loopTyping() {
|
||||
if (loopCount < maxLoops) {
|
||||
typeText(0, () => {
|
||||
deleteText(() => {
|
||||
loopCount++;
|
||||
loopTyping();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
typeText(0, () => {}); // Final typing with no delete
|
||||
function typeText() {
|
||||
if (index < text.length) {
|
||||
textElement.textContent += text.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeText, 100);
|
||||
}
|
||||
}
|
||||
|
||||
/*** Fade-in Items One by One ***/
|
||||
const items = document.querySelectorAll(".fade-in-item");
|
||||
const image = document.querySelector(".fade-in-image");
|
||||
let index = 0;
|
||||
let itemIndex = 0;
|
||||
|
||||
function showNextItem() {
|
||||
if (index < items.length) {
|
||||
items[index].classList.add("show");
|
||||
index++;
|
||||
setTimeout(showNextItem, 1000);
|
||||
if (itemIndex < items.length) {
|
||||
items[itemIndex].classList.add("show");
|
||||
itemIndex++;
|
||||
setTimeout(showNextItem, 300); // Faster fade-in
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
items.forEach(item => item.classList.remove("show"));
|
||||
index = 0;
|
||||
setTimeout(showNextItem, 1000);
|
||||
}, 5000);
|
||||
image.classList.add("show");
|
||||
}
|
||||
}
|
||||
|
||||
/*** Initialize Everything ***/
|
||||
loopTyping();
|
||||
showNextItem();
|
||||
|
||||
// Fade-in Image after text animations
|
||||
setTimeout(() => image.classList.add("show"), 1000);
|
||||
typeText();
|
||||
setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,251 +1,67 @@
|
||||
<div class="bg-white py-12">
|
||||
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
|
||||
<h2 id="typing-text2" class=" fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Pre-order Your AIBox</h2>
|
||||
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/8">Choose the box that’s packed with the best features for your computing needs.</p>
|
||||
<div class="bg-white py-12 fade-in-box">
|
||||
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8 fade-in-box">
|
||||
<h3 class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h3>
|
||||
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
|
||||
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
|
||||
</div>
|
||||
<div class="relative pt-16 sm:pt-24">
|
||||
<div class="absolute inset-x-0 top-48 bottom-0"></div>
|
||||
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
|
||||
{% for plan in section.extra.plans %}
|
||||
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
|
||||
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
|
||||
<h2 class="text-sm font-semibold text-black">Starter <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-gray-600">Everything you need to get started.</p>
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<div class="text-5xl font-semibold text-gray-950">$19</div>
|
||||
<h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
|
||||
<div class="mt-4 flex items-center gap-4">
|
||||
<div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<p>USD</p>
|
||||
<p>per month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="#" aria-label="Start a free trial on the Starter plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<div class="mt-6">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
|
||||
<ul class="mt-3 space-y-2">
|
||||
{% for feature in plan.features %}
|
||||
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Custom domains
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Edge content delivery
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Advanced analytics
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Quarterly workshops
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Single sign-on (SSO)
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Priority phone support
|
||||
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
|
||||
{{ feature.name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
|
||||
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
|
||||
<h2 class="text-sm font-semibold text-black">Growth <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-gray-600">All the extras for your necessities.</p>
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<div class="text-5xl font-semibold text-gray-950">$49</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<p>USD</p>
|
||||
<p>per month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="#" aria-label="Start a free trial on the Growth plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<div class="mt-6">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
|
||||
<ul class="mt-3 space-y-2">
|
||||
{% for feature in plan.rewards %}
|
||||
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Custom domains
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Edge content delivery
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Advanced analytics
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Quarterly workshops
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Single sign-on (SSO)
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Priority phone support
|
||||
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
|
||||
{{ feature.name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
|
||||
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
|
||||
<h2 class="text-sm font-semibold text-black">Scale <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-gray-600">Added flexibility at scale.</p>
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<div class="text-5xl font-semibold text-gray-950">$99</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<p>USD</p>
|
||||
<p>per month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="#" aria-label="Start a free trial on the Scale plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Custom domains
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Edge content delivery
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Advanced analytics
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Quarterly workshops
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Single sign-on (SSO)
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Priority phone support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
@ -256,62 +72,11 @@
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const text = "";
|
||||
const textElement = document.getElementById("typing-text2");
|
||||
let loopCount = 0;
|
||||
const maxLoops = 5;
|
||||
|
||||
function typeText(i, callback) {
|
||||
if (i < text.length) {
|
||||
textElement.textContent += text.charAt(i);
|
||||
setTimeout(() => typeText(i + 1, callback), 100);
|
||||
} else {
|
||||
setTimeout(callback, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteText(callback) {
|
||||
let currentText = textElement.textContent;
|
||||
if (currentText.length > 0) {
|
||||
textElement.textContent = currentText.substring(0, currentText.length - 1);
|
||||
setTimeout(() => deleteText(callback), 50);
|
||||
} else {
|
||||
setTimeout(callback, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function loopTyping() {
|
||||
if (loopCount < maxLoops) {
|
||||
typeText(0, () => {
|
||||
deleteText(() => {
|
||||
loopCount++;
|
||||
loopTyping();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
typeText(0, () => {}); // Final typing with no delete
|
||||
}
|
||||
}
|
||||
|
||||
loopTyping();
|
||||
});
|
||||
</script>
|
||||
38
templates/partials/hero/aihero8.html
Normal file
38
templates/partials/hero/aihero8.html
Normal file
@ -0,0 +1,38 @@
|
||||
<div class="bg-white fade-in lg:pt-24 pt-12 pb-4">
|
||||
<div aria-hidden="true" class="relative items-center justify-center hidden lg:flex">
|
||||
<img src="/images/aibox8.jpg" alt="AIBox" class="object-cover w-full md:w-3/4 lg:w-1/2" width="2432" height="1442">
|
||||
<div class="absolute inset-0 bg-linear-to-t from-white"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative mx-auto mt-4 max-w-7xl px-4 pb-16 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center lg:max-w-5xl">
|
||||
<h2 class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Push the Limits of AI—Your Way.</h2>
|
||||
<p class="mt-8 fade-i lg:text-3xl text-xl leading-snug font-normal tracking-tight text-gray-900"><span class="font-medium">AIBox</span> is built for those who think beyond limits—whether you're a hacker, AI researcher, or tech enthusiast, AIBox is your playground.</p>
|
||||
</div>
|
||||
|
||||
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
|
||||
<div class="border-t border-gray-200 pt-4">
|
||||
<dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For Developers & Hackers</dt>
|
||||
<dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Direct GPU programming with ROCm</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Custom containerization support</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900"> Full Linux kernel access</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Next-gen P2P networking</dd>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4">
|
||||
<dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For AI Researchers</dt>
|
||||
<dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Support for popular ML frameworks (PyTorch, TensorFlow)</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Large model training capability (up to 48GB VRAM)</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Distributed training support</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Dataset management tools</dd>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4">
|
||||
<dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For Tech Enthusiasts</dt>
|
||||
<dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Water cooling management interface</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Power consumption monitoring</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Performance benchmarking tools</dd>
|
||||
<dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Resource allocation controls</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
81
templates/partials/hero/aihero9.html
Normal file
81
templates/partials/hero/aihero9.html
Normal file
@ -0,0 +1,81 @@
|
||||
<div class="bg-white pt-12">
|
||||
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
|
||||
<h2 class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
|
||||
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
|
||||
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
|
||||
</div>
|
||||
<div class="relative pt-16 sm:pt-24">
|
||||
<div class="absolute inset-x-0 top-48 bottom-0"></div>
|
||||
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
|
||||
{% for plan in section.extra.plans %}
|
||||
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
|
||||
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
|
||||
<h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
|
||||
<div class="mt-4 flex items-center gap-4">
|
||||
<div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
|
||||
<ul class="mt-3 space-y-2">
|
||||
{% for feature in plan.features %}
|
||||
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
|
||||
{{ feature.name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
|
||||
<ul class="mt-3 space-y-2">
|
||||
{% for feature in plan.rewards %}
|
||||
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
|
||||
{{ feature.name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 2.2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -13,10 +13,10 @@
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<main class="fade-in relative flex flex-col justify-center overflow-hidden bg-white">
|
||||
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-12 border-t-2">
|
||||
<main class="relative flex flex-col justify-center overflow-hidden">
|
||||
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 pt-12 mt-12 lg:mt-20">
|
||||
|
||||
<h1 class="text-3xl lg:text-4xl font-normal tracking-tight text-black pt-12">Frequently Asked Questions</h1>
|
||||
<h1 class="lg:text-5xl text-4xl font-normal tracking-tight text-black">Frequently Asked Questions</h1>
|
||||
|
||||
<!-- Accordion component -->
|
||||
<div class="divide-y divide-white/50 my-10">
|
||||
@ -31,7 +31,7 @@
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-01"
|
||||
>
|
||||
<span style="color: #000;">What is Mycelium?</span>
|
||||
<span style="color: #000;">What is AIBox?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" 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}" />
|
||||
@ -42,12 +42,12 @@
|
||||
id="faqs-text-01"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-01"
|
||||
class="grid text-sm text-black overflow-hidden transition-all duration-300 ease-in-out"
|
||||
class="grid text-sm text-slate-200 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">
|
||||
<p class="pb-3 text-black text-base font-light">
|
||||
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.
|
||||
AIBox is a self-hosted AI compute solution powered by <a href="https://threefold.io" target="_blank"><span class="font-semibold">ThreeFold</span></a>. It allows users to run AI workloads efficiently, rent out GPU resources, and earn rewards—all without relying on expensive cloud providers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,7 +63,7 @@
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-02"
|
||||
>
|
||||
<span style="color: #000;">How do I install the Mycelium app?</span>
|
||||
<span style="color: #000;">How does AIBox compare to cloud solutions?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" 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}" />
|
||||
@ -79,8 +79,7 @@
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-black text-base font-light">
|
||||
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 <a href="/action" class="font-semibold">here</a> for more info.
|
||||
</p>
|
||||
AIBox offers a lower total cost of ownership (TCO) compared to cloud GPUs, with potential savings of over 80% in the long run. It also provides full control over computing resources, avoiding unpredictable cloud billing.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,7 +94,7 @@
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-04"
|
||||
>
|
||||
<span style="color: #000;">How can I find and use my Mycelium address?</span>
|
||||
<span style="color: #000;">Can I use AI Box to generate revenue?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" 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}" />
|
||||
@ -111,7 +110,7 @@
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-black text-base font-light">
|
||||
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.
|
||||
Yes! AIBox supports resource-sharing options where you can rent out unused GPU power for inference, development, or training workloads. Additionally, you can earn INCA token rewards through network participation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -127,7 +126,7 @@
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-05"
|
||||
>
|
||||
<span style="color: #000;">Can I deploy workloads on the TFGrid using Mycelium?</span>
|
||||
<span style="color: #000;">What are the main use cases for AIBox?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" 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}" />
|
||||
@ -143,7 +142,7 @@
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-black text-base font-light">
|
||||
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.
|
||||
AIBox is ideal for personal AI tasks and development, team-based shared resources, and commercial applications like AI-as-a-Service, model hosting, and dataset processing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -159,7 +158,7 @@
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-06"
|
||||
>
|
||||
<span style="color: #000;">Is there an API available for Mycelium?</span>
|
||||
<span style="color: #000;">How does AI Box handle cooling and power efficiency?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" 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}" />
|
||||
@ -175,7 +174,7 @@
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-black text-base font-light">
|
||||
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
|
||||
AI Box is designed with superior thermal management and optimized power consumption, ensuring long-term efficiency and performance stability compared to DIY setups.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -184,14 +183,14 @@
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-04"
|
||||
id="faqs-title-07"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-04"
|
||||
aria-controls="faqs-text-07"
|
||||
>
|
||||
<span style="color: #000;">What should I do if I encounter issues during installation or usage?</span>
|
||||
<span style="color: #000;">What is the break-even period for AIBox?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" 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}" />
|
||||
@ -199,15 +198,15 @@
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-04"
|
||||
id="faqs-text-07"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-04"
|
||||
aria-labelledby="faqs-title-07"
|
||||
class="grid text-sm text-gray-200 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">
|
||||
<p class="pb-3 text-black text-base font-light">
|
||||
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.
|
||||
Depending on usage, AI Box can break even in as little as 3 months when factoring in revenue from GPU rentals and token rewards.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -216,14 +215,14 @@
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-04"
|
||||
id="faqs-title-07"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-04"
|
||||
aria-controls="faqs-text-07"
|
||||
>
|
||||
<span style="color: #000;">How does Mycelium handle routing within its network?</span>
|
||||
<span style="color: #000;">How does AIBox integrate with the ThreeFold network?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" 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}" />
|
||||
@ -231,19 +230,50 @@
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-04"
|
||||
id="faqs-text-07"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-04"
|
||||
aria-labelledby="faqs-title-07"
|
||||
class="grid text-sm text-gray-200 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">
|
||||
<p class="pb-3 text-black text-base font-light">
|
||||
Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network.
|
||||
AIBox leverages ThreeFold’s Mycelium P2P network for decentralized computing, allowing seamless collaboration and participation in a sustainable AI ecosystem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-07"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-07"
|
||||
>
|
||||
<span style="color: #000;">Is AIBox suitable for AI startups and businesses?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" 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-07"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-07"
|
||||
class="grid text-sm text-gray-200 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">
|
||||
<p class="pb-3 text-black text-base font-light">
|
||||
Absolutely! AIBox provides scalable AI compute at a fraction of cloud costs, making it an excellent choice for AI startups and businesses looking to optimize expenses and maintain control over their AI infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End: Accordion component -->
|
||||
@ -1,22 +0,0 @@
|
||||
<div class="text-black fade-in">
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<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">
|
||||
Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-black"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
|
||||
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-black">This is Hero1.html</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
|
||||
<p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 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">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
<div class="fade-in relative isolate overflow-hidden">
|
||||
<div class="mx-auto max-w-7xl lg:col-span-2 px-6 py-18 lg:flex lg:gap-x-2 lg:px-8 lg:py-24">
|
||||
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
|
||||
<h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
|
||||
Your
|
||||
<span id="slides" class="slides"></span>
|
||||
</h1>
|
||||
<div id="learn-more" class="mt-10 flex items-center gap-x-6 hidden">
|
||||
<a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto flex max-w-5xl lg:mt-12 mt-0 lg:mr-0 lg:ml-5 lg:max-w-none lg:flex-none">
|
||||
<div class="max-w-3xl flex-none lg:max-w-5xl">
|
||||
<img src="/images/aibox6.jpg" alt="App screenshot" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const phrases = [
|
||||
"Personal AI Powerhouse.",
|
||||
"Smart Digital Companion.",
|
||||
"Always-On Genius.",
|
||||
"Supercharged Peer.",
|
||||
"Ultimate AI Sidekick.",
|
||||
"Personal AIBox." // Final phrase
|
||||
];
|
||||
|
||||
let index = 0;
|
||||
const slideElement = document.getElementById("slides");
|
||||
const learnMoreElement = document.getElementById("learn-more");
|
||||
|
||||
function typeText(text, i, callback) {
|
||||
if (i < text.length) {
|
||||
slideElement.textContent += text.charAt(i);
|
||||
setTimeout(() => typeText(text, i + 1, callback), 100);
|
||||
} else {
|
||||
setTimeout(callback, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteText(callback) {
|
||||
let text = slideElement.textContent;
|
||||
if (text.length > 0) {
|
||||
slideElement.textContent = text.substring(0, text.length - 1);
|
||||
setTimeout(() => deleteText(callback), 50);
|
||||
} else {
|
||||
setTimeout(callback, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function cyclePhrases() {
|
||||
if (index < phrases.length - 1) {
|
||||
typeText(phrases[index], 0, () => {
|
||||
deleteText(() => {
|
||||
index++;
|
||||
cyclePhrases();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
typeText(phrases[index], 0, () => {
|
||||
learnMoreElement.classList.remove("hidden"); // Show "Learn more"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
cyclePhrases(); // Start the loop
|
||||
});
|
||||
</script>
|
||||
@ -1,23 +0,0 @@
|
||||
<div class="">
|
||||
<div class="relative isolate overflow-hidden pt-14">
|
||||
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" class="absolute inset-0 -z-10 size-full object-cover opacity-30">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<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">
|
||||
Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-black"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-black">This is Hero3.html</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
|
||||
<p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 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">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user