Compare commits
5 Commits
developmen
...
developmen
| Author | SHA1 | Date | |
|---|---|---|---|
| 0c2bee3d96 | |||
| 64cf405eb5 | |||
| 50213a4de3 | |||
| db7c7f0bf7 | |||
| f91db3b865 |
@ -2,22 +2,42 @@
|
|||||||
title: "Become Farmer"
|
title: "Become Farmer"
|
||||||
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
|
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
|
||||||
insert_anchor_links: "left"
|
insert_anchor_links: "left"
|
||||||
template: "layouts/farmer.html"
|
template: "page.html"
|
||||||
extra:
|
extra:
|
||||||
author: AIBOX
|
author: AIBOX
|
||||||
imgPath: tf.png
|
imgPath: tf.png
|
||||||
|
|
||||||
---
|
---
|
||||||
|
<!-- section 1 (Hero) -->
|
||||||
|
|
||||||
|
<div class="fade-in lg:h-screen px-6 flex flex-col text-center pt-10 justify-center items-center">
|
||||||
|
<div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
|
||||||
|
|
||||||
|
|
||||||
<!--
|
|
||||||
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
|
</div>
|
||||||
2. Hero section: "templates/partials/about/about2.html
|
|
||||||
|
# Own Your AI GPU <br>& Share Capacity
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- -------------------------------------------------------------------------------------------------------- -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- section 8 Cta -->
|
||||||
|
|
||||||
|
{{ cta(
|
||||||
|
title_1="Own",
|
||||||
|
title_2="Your AI",
|
||||||
|
title_3="",
|
||||||
|
button_text_1="Register Now",
|
||||||
|
button_link_1="/signup",
|
||||||
|
button_text_2="",
|
||||||
|
button_link_2="",
|
||||||
|
button_text_3="Learn More",
|
||||||
|
button_link_3="https://threefold.info/aibox/docs/"
|
||||||
|
) }}
|
||||||
|
|
||||||
|
|||||||
@ -1,86 +1,345 @@
|
|||||||
---
|
---
|
||||||
title: "Mycelium"
|
title: "Pre-order Your AIBox"
|
||||||
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold. " # quotation marks to allow colons where used
|
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
|
draft: false
|
||||||
extra:
|
extra:
|
||||||
author: ThreeFold
|
author: ThreeFold
|
||||||
imgPath: home/tf.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).
|
|
||||||
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/index.html) contains:
|
<!-- Section 1 (Hero_animation_1) -->
|
||||||
|
|
||||||
1. Hero section: "templates/partials/hero/myhero.html
|
{{ hero_animation(
|
||||||
2. About section: "templates/partials/hero/myhero1.html"
|
title="Your",
|
||||||
3. How it works section: "templates/partials/hero/myhero3.html"
|
title_part_1="Personal AI Powerhouse.",
|
||||||
4. whats new section: "templates/partials/hero/myhero5.html
|
title_part_2="Smart GPU, Your Rules.",
|
||||||
5. benefits section: "templates/partials/hero/myhero2.html"
|
title_part_3="True Digital Playground.",
|
||||||
6. faq section: "templates/partials/hero/myhero6.html"
|
title_part_4="Gateway to AI freedom.",
|
||||||
7. cta section: "templates/partials/hero/myhero7.html"
|
title_part_5="Personal AIBox.",
|
||||||
|
image_src="/images/aibox6.jpg",
|
||||||
|
image_alt="AI Box",
|
||||||
|
button_text="Learn more",
|
||||||
|
button_link="/farmers"
|
||||||
|
)}}
|
||||||
|
|
||||||
-->
|
|
||||||
|
<!----------------------------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<!-- section 2 (How it works)-->
|
||||||
|
|
||||||
|
<div class="container mx-auto lg:max-w-7xl lg:pb-24 pb-12 px-4 lg:px-0">
|
||||||
|
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8 ">
|
||||||
|
|
||||||
|
{{ animated_header(
|
||||||
|
header="Take Control of Your AI Future"
|
||||||
|
)}}
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
### Meet **AIBox** – a powerful and personalized AI experience, without limitations.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-w-7xl mx-4 md:mx-10 lg:mx-20 mt-4 lg:mt-10 xl:mx-auto">
|
||||||
|
|
||||||
|
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
|
||||||
|
|
||||||
|
{{ farm_steps(
|
||||||
|
image_src="/images/gpu.png",
|
||||||
|
image_alt="GPU",
|
||||||
|
title="Own Your AI GPU, Maximize Your Potential",
|
||||||
|
description="AI is transforming the world, but centralized AI infrastructure comes with limitations – high costs, privacy concerns, and lack of control. AI BOX empowers you to take back ownership of your AI journey by providing a personal AI GPU that’s always within reach."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ farm_steps(
|
||||||
|
image_src="/images/Share.png",
|
||||||
|
image_alt="Share",
|
||||||
|
title="Share Your Capacity, Share the Cost",
|
||||||
|
description="By renting out unused capacity to your friends and others, you can generate revenue while still enjoying full control over your hardware. This empowers AI enthusiasts, developers, and researchers to share the cost of their own AI endeavors."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ farm_steps(
|
||||||
|
image_src="/images/Decentralized.png",
|
||||||
|
image_alt="Decentralized",
|
||||||
|
title="Decentralized AI for a Better Future",
|
||||||
|
description="The future of AI shouldn’t be locked in the hands of a few corporations. AI BOX enables distributed AI computing, allowing individuals to train, fine-tune, and deploy models without relying on centralized cloud providers. This ensures that AI remains accessible, private, and under your control."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!----------------------------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<!-- Section 3 (timeline) -->
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12">
|
||||||
|
<div class="mx-auto max-w-4xl text-center">
|
||||||
|
|
||||||
|
## What Can You Do<br> with an **AIBox**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ timeline(
|
||||||
|
subtitle_1="",
|
||||||
|
title_1="Run AI Models with Full Control",
|
||||||
|
point_1_1="Execute AI models directly on your dedicated GPU.",
|
||||||
|
point_1_2="Decide which models are allowed to run on your AI BOX.",
|
||||||
|
point_1_3="Reserve 100% of your GPU resources anytime for your own experimentation",
|
||||||
|
|
||||||
|
subtitle_2="",
|
||||||
|
title_2="Rent Out Virtual Machines (CloudSlices)",
|
||||||
|
point_2_1="Slice your hardware into a maximum of 8 Virtual Machines.",
|
||||||
|
point_2_2="Control GPU allocation: 0, 1, or 2 GPUs per VM (no oversubscription).",
|
||||||
|
point_2_3="Users can connect or disconnect GPUs as needed, with owner permissions.",
|
||||||
|
point_2_4="Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication.",
|
||||||
|
point_2_5="Pre-built container images available for quick setup and deployment.",
|
||||||
|
point_2_6="Web gateways allow external connections to VM containers.",
|
||||||
|
paragraph_2_1="Planned end of summer 2025.",
|
||||||
|
|
||||||
|
subtitle_3="",
|
||||||
|
title_3="Mycelium Actors",
|
||||||
|
point_3_1="Become a host for Mycelium Actors and contribute to the Mycelium network.",
|
||||||
|
point_3_2="Mycelium Actors process jobs and generate rewards for their hosts.",
|
||||||
|
point_3_3="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 ...",
|
||||||
|
paragraph_3_1="By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.",
|
||||||
|
paragraph_3_2="Upcoming feature, stay tuned."
|
||||||
|
|
||||||
|
) }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!----------------------------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<!-- Section 4 (Push the Limits) -->
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12">
|
||||||
|
<div class="product mx-auto mb-8 " style="width:60%">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-4xl text-center">
|
||||||
|
|
||||||
|
## Push the Limits of <br>AI—Your Way.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
### **AIBox** is built for those who think beyond limits. Whether you're a hacker, AI researcher, or tech enthusiast, AIBox is your playground.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 lg:max-w-none lg:grid-cols-3 lg:gap-x-10">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="p-2 lg:p-6">
|
||||||
|
|
||||||
|
#### For Developers & Hackers
|
||||||
|
|
||||||
|
<div class="border-t border-gray-300 pt-4">
|
||||||
|
|
||||||
|
- Direct GPU programming with ROCm
|
||||||
|
- Custom containerization support
|
||||||
|
- Full Linux kernel access
|
||||||
|
- Next-gen P2P networking
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2 lg:p-6">
|
||||||
|
|
||||||
|
#### For AI Researchers
|
||||||
|
|
||||||
|
<div class="border-t border-gray-300 pt-4">
|
||||||
|
|
||||||
|
- Support for popular ML frameworks (PyTorch, TensorFlow)
|
||||||
|
- Large model training capability (up to 48GB VRAM)
|
||||||
|
- Distributed training support
|
||||||
|
- Dataset management tools
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2 lg:p-6">
|
||||||
|
|
||||||
|
#### For Tech Enthusiasts
|
||||||
|
|
||||||
|
<div class="border-t border-gray-300 pt-4">
|
||||||
|
|
||||||
|
- Water cooling management interface
|
||||||
|
- Power consumption monitoring
|
||||||
|
- Performance benchmarking tools
|
||||||
|
- Resource allocation controls
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!----------------------------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<!-- Section 5 (Push the Limits) -->
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12 mb-10">
|
||||||
|
|
||||||
|
<div class="typing px-6 mb-4">
|
||||||
|
|
||||||
|
## Why Decentralized<br> AI Matters...
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-3xl">
|
||||||
|
|
||||||
|
{{ animated_paragraph(
|
||||||
|
id="1",
|
||||||
|
description="Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing..."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ animated_paragraph(
|
||||||
|
id="2",
|
||||||
|
description="AI BOX empowers you to take back control, ensuring your data stays private and secure while giving you full sovereignty over your AI applications..."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ animated_paragraph(
|
||||||
|
id="3",
|
||||||
|
description="By decentralizing AI, you can break free from corporate gatekeeping, experiment without limits, and innovate on your terms..."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ animated_paragraph(
|
||||||
|
id="4",
|
||||||
|
description="As AI workloads continue to grow, self-hosted solutions like AI BOX provide a future-proof infrastructure, guaranteeing you always have cutting-edge computing power at your fingertips."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!----------------------------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<!-- Section 6 (Coming Soon) -->
|
||||||
|
|
||||||
|
<div class="lg:max-w-5xl text-center container mx-auto px-6 lg:px-8 lg:py-24 py-12">
|
||||||
|
|
||||||
|
## AIBox is Coming Soon
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
### The future of computing is almost here.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
We are preparing to launch AIBox, a powerful next-generation system designed to transform decentralized AI and edge computing. Built for performance, privacy, and autonomy, AIBox will enable users to contribute to the ThreeFold Grid and run AI workloads using their own hardware.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
**Register and stay informed about launch details, setup options, and how to participate.**
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!----------------------------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<!-- Section 7 (FAQ) -->
|
||||||
|
|
||||||
|
<div class="lg:max-w-7xl container mx-auto px-6 lg:px-8 lg:py-24 py-12">
|
||||||
|
|
||||||
|
## Frequently Asked Questions
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
{{ accordion(
|
||||||
|
id_accordion="accordion1"
|
||||||
|
question="What is AIBox?",
|
||||||
|
description="AIBox is a self-hosted AI compute solution powered by ThreeFold. It allows users to run AI workloads efficiently, rent out GPU resources, and earn rewards—all without relying on expensive cloud providers."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ accordion(
|
||||||
|
id_accordion="accordion2"
|
||||||
|
question="How does AIBox compare to cloud solutions?",
|
||||||
|
description="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."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ accordion(
|
||||||
|
id_accordion="accordion3"
|
||||||
|
question="Can I use AI Box to generate revenue?",
|
||||||
|
description="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."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ accordion(
|
||||||
|
id_accordion="accordion4"
|
||||||
|
question="What are the main use cases for AIBox?",
|
||||||
|
description="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."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ accordion(
|
||||||
|
id_accordion="accordion5"
|
||||||
|
question="How does AI Box handle cooling and power efficiency?",
|
||||||
|
description="AI Box is designed with superior thermal management and optimized power consumption, ensuring long-term efficiency and performance stability compared to DIY setups."
|
||||||
|
) }}
|
||||||
|
|
||||||
|
{{ accordion(
|
||||||
|
id_accordion="accordion6"
|
||||||
|
question="What is the break-even period for AIBox?",
|
||||||
|
description="Depending on usage, AI Box can break even in as little as 3 months when factoring in revenue from GPU rentals and token rewards."
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
|
||||||
|
{{ accordion(
|
||||||
|
id_accordion="accordion7"
|
||||||
|
question="How does AIBox integrate with the ThreeFold network?",
|
||||||
|
description="AIBox leverages ThreeFold’s Mycelium P2P network for decentralized computing, allowing seamless collaboration and participation in a sustainable AI ecosystem."
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
|
||||||
|
{{ accordion(
|
||||||
|
id_accordion="accordion8"
|
||||||
|
question="Is AIBox suitable for AI startups and businesses?",
|
||||||
|
description="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."
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- -------------------------------------------------------------------------------------------------------- -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- section 8 Cta -->
|
||||||
|
|
||||||
|
{{ cta(
|
||||||
|
title_1="Own",
|
||||||
|
title_2="Your AI",
|
||||||
|
title_3="",
|
||||||
|
button_text_1="Register Now",
|
||||||
|
button_link_1="/signup",
|
||||||
|
button_text_2="",
|
||||||
|
button_link_2="",
|
||||||
|
button_text_3="Learn More",
|
||||||
|
button_link_3="https://threefold.info/aibox/docs/"
|
||||||
|
) }}
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.typing {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: normal; /* Allows wrapping */
|
||||||
|
border-right: 4px solid black; /* Cursor effect */
|
||||||
|
animation: typing 3s steps(40, end) forwards, blink 0.75s step-end infinite;
|
||||||
|
max-width: 100%; /* Ensures text expands naturally */
|
||||||
|
word-break: break-word; /* Allows words to break onto a new line */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
|
||||||
|
.product {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -12,11 +12,6 @@
|
|||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
|
||||||
|
|
||||||
.dashboard:hover {
|
|
||||||
|
|
||||||
background: #74ddc3 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Custom CSS for header partial */
|
/* Custom CSS for header partial */
|
||||||
.backdrop-blur {
|
.backdrop-blur {
|
||||||
@ -40,11 +35,6 @@
|
|||||||
background-color: rgba(16,16,16,1);
|
background-color: rgba(16,16,16,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-transparent {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Custom css allowing image styling in markdown */
|
/* Custom css allowing image styling in markdown */
|
||||||
img[src*="#mx-auto"] {
|
img[src*="#mx-auto"] {
|
||||||
@ -262,35 +252,32 @@ background-color:#5596f5 !important;
|
|||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
h1 {
|
h1 {
|
||||||
@apply text-4xl lg:text-6xl font-normal;
|
@apply lg:text-[7.37rem] text-[3rem] font-medium tracking-tight leading-tight ;
|
||||||
color: #ffffff;
|
|
||||||
font-family: "Inter", sans-serif !important;
|
font-family: "Inter", sans-serif !important;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
@apply text-3xl lg:text-4xl my-4 font-normal leading-none;
|
@apply lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight;
|
||||||
color: #ffffff;
|
|
||||||
font-family: "Inter", sans-serif !important;
|
font-family: "Inter", sans-serif !important;
|
||||||
}
|
}
|
||||||
h2 strong {
|
h2 strong {
|
||||||
@apply font-semibold;
|
@apply font-semibold;
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
@apply text-2xl lg:text-3xl my-4 font-extralight;
|
@apply lg:text-3xl text-xl leading-snug font-light tracking-tight;
|
||||||
color: #ffffff;
|
|
||||||
font-family: "Inter", sans-serif !important;
|
font-family: "Inter", sans-serif !important;
|
||||||
}
|
}
|
||||||
h3 strong {
|
h3 strong {
|
||||||
@apply font-normal;
|
@apply font-normal;
|
||||||
}
|
}
|
||||||
h4 {
|
h4 {
|
||||||
@apply text-xl lg:text-2xl font-normal tracking-wider;
|
@apply text-xl font-semibold my-2 tracking-wider;
|
||||||
font-family: "Inter", sans-serif !important;
|
font-family: "Inter", sans-serif !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
h5 {
|
h5 {
|
||||||
@apply text-lg my-1 tracking-normal font-medium;
|
@apply text-lg my-1 tracking-normal font-medium;
|
||||||
font-family: "Inter", sans-serif !important;
|
font-family: "Inter", sans-serif !important;
|
||||||
color: #fff !important
|
|
||||||
}
|
}
|
||||||
h6 {
|
h6 {
|
||||||
@apply text-md not-italic font-normal my-1;
|
@apply text-md not-italic font-normal my-1;
|
||||||
@ -298,7 +285,7 @@ background-color:#5596f5 !important;
|
|||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
@apply text-lg;
|
@apply text-lg;
|
||||||
color: #3d3d3d;
|
|
||||||
font-family: "Inter", sans-serif !important;
|
font-family: "Inter", sans-serif !important;
|
||||||
}
|
}
|
||||||
blockquote {
|
blockquote {
|
||||||
@ -591,9 +578,7 @@ header {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@media (min-width: 1024px){
|
@media (min-width: 1024px){
|
||||||
h2 {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
BIN
static/images/Decentralized.png
Normal file
BIN
static/images/Decentralized.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
static/images/Share.png
Normal file
BIN
static/images/Share.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
static/images/gpu.png
Normal file
BIN
static/images/gpu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@ -20,9 +20,6 @@ module.exports = {
|
|||||||
'first', 'first:sm', 'first:md', 'first:lg',
|
'first', 'first:sm', 'first:md', 'first:lg',
|
||||||
'last', 'last:sm', 'last:md', 'last:lg'
|
'last', 'last:sm', 'last:md', 'last:lg'
|
||||||
],
|
],
|
||||||
},
|
|
||||||
{
|
|
||||||
pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/, // Added teal color safelist
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
{% include "partials/head.html" %}
|
{% include "partials/head.html" %}
|
||||||
{% include "partials/header.html" %}
|
{% include "partials/header.html" %}
|
||||||
|
|
||||||
<body class="bg-white">
|
<body>
|
||||||
|
|
||||||
<!-- Google Tag Manager (noscript) -->
|
<!-- Google Tag Manager (noscript) -->
|
||||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"
|
||||||
@ -27,9 +27,9 @@
|
|||||||
// from: https://stackoverflow.com/a/4425214
|
// from: https://stackoverflow.com/a/4425214
|
||||||
var links = document.links;
|
var links = document.links;
|
||||||
var internal_hosts = [
|
var internal_hosts = [
|
||||||
'www.mycelium.threefold.io',
|
'www.aibox.threefold.io',
|
||||||
'mycelium.threefold.io',
|
'aibox.threefold.io',
|
||||||
'www2.mycelium.threefold.io',
|
'www2.aibox.threefold.io',
|
||||||
'localhost',
|
'localhost',
|
||||||
'127.0.0.1'
|
'127.0.0.1'
|
||||||
]
|
]
|
||||||
@ -42,7 +42,7 @@
|
|||||||
<!-- End Twitter universal website tag code -->
|
<!-- End Twitter universal website tag code -->
|
||||||
|
|
||||||
{% include "partials/header.html" %}
|
{% include "partials/header.html" %}
|
||||||
<div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden">
|
<div id="content" class="pt-12 overflow-hidden">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,12 +1,11 @@
|
|||||||
{% extends "_default/base.html" %}
|
{% extends "_default/base.html" %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% include "partials/hero/aihero1.html" %}
|
|
||||||
{% include "partials/hero/aihero2.html" %}
|
|
||||||
{% include "partials/hero/aihero3.html" %}
|
<!-- home page template, has a banner and rows of page summaries -->
|
||||||
{% include "partials/hero/aihero8.html" %}
|
<div>
|
||||||
{% include "partials/hero/aihero4.html" %}
|
{% set page = get_page(path="home/index.md") %}
|
||||||
{% include "partials/hero/aihero5.html" %}
|
{{page.content | safe}}
|
||||||
{% include "partials/hero/coming_soon.html" %}
|
</div>
|
||||||
{% include "partials/hero/faq.html" %}
|
|
||||||
{% include "partials/farmer/cta.html" %}
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
44
templates/shortcodes/accordion.html
Normal file
44
templates/shortcodes/accordion.html
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<div class="rounded-lg shadow-lg overflow-hidden my-2 border border-gray-200">
|
||||||
|
<input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
|
||||||
|
<label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
|
||||||
|
<span class="text-lg font-semibold">{{ question }}</span>
|
||||||
|
<svg class="w-6 h-6 transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
<div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
|
||||||
|
<div class="p-4">
|
||||||
|
{% if description %}
|
||||||
|
<p class="semigray font-normal leading-relaxed">{{ description }} </p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
body .accordion:hover {
|
||||||
|
background-color: rgb(240, 240, 240) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .accordion:hover {
|
||||||
|
background-color: #2e2e2e !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
71
templates/shortcodes/animated_header.html
Normal file
71
templates/shortcodes/animated_header.html
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
{% set header = header | default(value="") %}
|
||||||
|
|
||||||
|
<div class="max-w-3xl">
|
||||||
|
<h2 id="typing-text" class="mx-auto fade-in">
|
||||||
|
</h2>
|
||||||
|
</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; }
|
||||||
|
.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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const text = "Take Control of Your AI Future";
|
||||||
|
const textElement = document.getElementById("typing-text");
|
||||||
|
let loopCount = 0;
|
||||||
|
const maxLoops = 1;
|
||||||
|
|
||||||
|
function typeText(i, callback) {
|
||||||
|
if (i < text.length) {
|
||||||
|
textElement.textContent += text.charAt(i);
|
||||||
|
setTimeout(() => typeText(i + 1), 100);
|
||||||
|
} else {
|
||||||
|
setTimeout(callback, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function loopTyping() {
|
||||||
|
if (loopCount < maxLoops) {
|
||||||
|
typeText(0, () => {
|
||||||
|
deleteText(() => {
|
||||||
|
loopCount++;
|
||||||
|
loopTyping();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
typeText(0, () => {}); // Final typing with no delete
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loopTyping();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
42
templates/shortcodes/animated_paragraph.html
Normal file
42
templates/shortcodes/animated_paragraph.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
{% set id = id | default(value="") %}
|
||||||
|
{% set description = description | default(value="") %}
|
||||||
|
|
||||||
|
|
||||||
|
<p id="{{ id }}" class="mt-0 mb-10 lg:mt-8 fade-in-up text-left lg:text-3xl text-lg leading-snug font-light tracking-tight text-black px-4 lg:px-10">
|
||||||
|
{{ description }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.fade-in-up {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
position: absolute;
|
||||||
|
transition: opacity 1s ease-out, transform 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in-up.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const paragraphs = document.querySelectorAll(".fade-in-up");
|
||||||
|
let index = 0;
|
||||||
|
|
||||||
|
function showNextParagraph() {
|
||||||
|
paragraphs.forEach((p, i) => {
|
||||||
|
p.classList.remove("show");
|
||||||
|
});
|
||||||
|
|
||||||
|
paragraphs[index].classList.add("show");
|
||||||
|
|
||||||
|
index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
|
||||||
|
setTimeout(showNextParagraph, 5000); // Change paragraph every 5 seconds
|
||||||
|
}
|
||||||
|
|
||||||
|
showNextParagraph();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
36
templates/shortcodes/cta.html
Normal file
36
templates/shortcodes/cta.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
{% set title_1 = title_1 | default(value="") %}
|
||||||
|
{% set title_2 = title_2 | default(value="") %}
|
||||||
|
{% set title_3 = title_3 | default(value="") %}
|
||||||
|
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||||
|
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||||
|
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||||
|
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||||
|
{% set button_text_3 = button_text_3 | default(value="") %}
|
||||||
|
{% set button_link_3 = button_link_3 | default(value="") %}
|
||||||
|
{% set button_text_4 = button_text_4 | default(value="") %}
|
||||||
|
{% set button_link_4 = button_link_4 | default(value="") %}
|
||||||
|
|
||||||
|
<div class="py-12 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 class="max-w-xl leading-tight items-start lg:text-left text-center fade-in">
|
||||||
|
{{ title_1 }} <br>{{ title_2 }}<br> {{ title_3 }}
|
||||||
|
</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="{{ button_link_1 }}" 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:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||||
|
{{ button_text_1 }}
|
||||||
|
</a>
|
||||||
|
{% if button_link_2 %}
|
||||||
|
<a href="{{ button_link_2 }}" target="_blank" class="blinking-effect 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 mb-4 lg:mb-0">
|
||||||
|
{{ button_text_2 }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
<a href="{{ button_link_3 }}" target="_blank" class="text-sm/6 font-semibold text-gray-900">
|
||||||
|
{{ button_text_3 }} <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
{% if button_link_4 %}
|
||||||
|
<a href="{{ button_link_4 }}" class="fade-in text-sm/6 font-semibold text-white">{{ button_text_4 }}<span aria-hidden="true">→</span></a>
|
||||||
|
{% endif%}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
60
templates/shortcodes/farm_steps.html
Normal file
60
templates/shortcodes/farm_steps.html
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
{% set image_src = image_src | default(value="") %}
|
||||||
|
{% set image_alt = image_alt | default(value="") %}
|
||||||
|
{% set title = title | default(value="") %}
|
||||||
|
{% set subtitle = subtitle | default(value="") %}
|
||||||
|
{% set description = description | default(value="") %}
|
||||||
|
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||||
|
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||||
|
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||||
|
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="fade-in-box flex flex-col p-8 rounded-2xl my-4 bg-gray-50">
|
||||||
|
<img class="fade-in relative mb-4" width="20%" src="{{ image_src }}" alt="{{ image_alt }}">
|
||||||
|
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
|
||||||
|
{{ title }}
|
||||||
|
</dt>
|
||||||
|
<dt class="text-lg font-normal">{{ subtitle }}<dt>
|
||||||
|
<dd class="mt-4 flex flex-auto flex-col">
|
||||||
|
<p class="flex-auto leading-normal font-light text-gray-800 text-base">{{ description }}</p>
|
||||||
|
<div class="flex mt-6 justify-center fade-in">
|
||||||
|
{% if button_link_1 %}
|
||||||
|
<a href="{{ button_link_1 }}" class="mr-2 fade-in rounded-2xl bg-white px-4 py-2.5 text-sm 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" target="_blank">{{ button_text_1 }}</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if button_link_1 %}
|
||||||
|
<a href="{{ button_link_2 }}" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm 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" target="_blank">{{ button_text_2 }}</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
84
templates/shortcodes/hero_animation.html
Normal file
84
templates/shortcodes/hero_animation.html
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
{% set title = title | default(value="") %}
|
||||||
|
{% set title_part_1 = title_part_1 | default(value="") %}
|
||||||
|
{% set title_part_2 = title_part_2 | default(value="") %}
|
||||||
|
{% set title_part_3 = title_part_3 | default(value="") %}
|
||||||
|
{% set title_part_4 = title_part_4 | default(value="") %}
|
||||||
|
{% set title_part_5 = title_part_5 | default(value="") %}
|
||||||
|
{% set image_src = image_src | default(value="") %}
|
||||||
|
{% set image_alt = image_alt | default(value="") %}
|
||||||
|
{% set button_text = button_text | default(value="") %}
|
||||||
|
{% set button_link = button_link | default(value="") %}
|
||||||
|
|
||||||
|
<div class="fade-in relative isolate overflow-hidden py-12 lg:py-24 lg:h-screen">
|
||||||
|
<div class="mx-auto max-w-7xl lg:col-span-2 px-4 lg:flex lg:gap-x-2 lg:px-8">
|
||||||
|
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
|
||||||
|
<h1 class="mt-10">
|
||||||
|
{{ title }}
|
||||||
|
<span id="slides" class="slides"></span>
|
||||||
|
</h1>
|
||||||
|
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6">
|
||||||
|
<a href="{{ button_link }}" target="_blank" class="text-xl font-semibold text-black hover:text-gray-500">
|
||||||
|
{{ button_text }} <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="{{ image_src }}" alt="{{ image_alt }}" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const phrases = [
|
||||||
|
"{{ title_part_1 }}",
|
||||||
|
"{{ title_part_2 }}",
|
||||||
|
"{{ title_part_3 }}",
|
||||||
|
"{{ title_part_4 }}",
|
||||||
|
"{{ title_part_5 }}" // 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>
|
||||||
|
|
||||||
30
templates/shortcodes/left_header.html
Normal file
30
templates/shortcodes/left_header.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{% set title = title | default(value="MYCELIUM") %}
|
||||||
|
{% set subtitle = subtitle | default(value="") %}
|
||||||
|
{% set subtitle_2 = subtitle_2 | default(value="") %}
|
||||||
|
{% set description = description | default(value="") %}
|
||||||
|
{% set description2 = description2 | default(value="") %}
|
||||||
|
{% set description3 = description3 | default(value="") %}
|
||||||
|
{% set button_text = button_text | default(value="") %}
|
||||||
|
{% set button_link = button_link | default(value="") %}
|
||||||
|
|
||||||
|
<div class="lg:pt-24 pt-12 lg:max-w-7xl container mx-auto px-4 lg:px-0">
|
||||||
|
<div class="mx-auto">
|
||||||
|
<div class="mx-auto">
|
||||||
|
{% if subtitle %}
|
||||||
|
<p class="text-base font-light tracking-wide">{{ subtitle }}</p>
|
||||||
|
{% endif %}
|
||||||
|
<h2 class="fade-in my-4">{{ title }}</h2>
|
||||||
|
<h3 class="mx-auto fade-in">{{ subtitle_2 }}</h2>
|
||||||
|
<p class="mt-6 max-w-3xl text-lg font-light">{{ description }}</p>
|
||||||
|
{% if description2 %}
|
||||||
|
<p class="mt-6 text-lg font-light">{{ description2 }}</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if description3 %}
|
||||||
|
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light fade-in">
|
||||||
|
{{ description3 }} <a href="{{ button_link }}" class="font-semibold" target="_blanks"><u>{{ button_text }}</u></a>
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
145
templates/shortcodes/timeline.html
Normal file
145
templates/shortcodes/timeline.html
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
{% set title_1 = title_1 | default(value="") %}
|
||||||
|
{% set subtitle_1 = subtitle_1 | default(value="") %}
|
||||||
|
{% set point_1_1 = point_1_1 | default(value="") %}
|
||||||
|
{% set point_1_2 = point_1_2 | default(value="") %}
|
||||||
|
{% set point_1_3 = point_1_3 | default(value="") %}
|
||||||
|
{% set title_2 = title_2 | default(value="") %}
|
||||||
|
{% set subtitle_2 = subtitle_2 | default(value="") %}
|
||||||
|
{% set point_2_1 = point_2_1 | default(value="") %}
|
||||||
|
{% set point_2_2 = point_2_2 | default(value="") %}
|
||||||
|
{% set point_2_3 = point_2_3 | default(value="") %}
|
||||||
|
{% set point_2_4 = point_2_4 | default(value="") %}
|
||||||
|
{% set point_2_5 = point_2_5 | default(value="") %}
|
||||||
|
{% set point_2_6 = point_2_6 | default(value="") %}
|
||||||
|
{% set paragraph_2_1 = paragraph_2_1 | default(value="") %}
|
||||||
|
{% set title_3 = title_3 | default(value="") %}
|
||||||
|
{% set subtitle_3 = subtitle_3 | default(value="") %}
|
||||||
|
{% set point_3_1 = point_3_1 | default(value="") %}
|
||||||
|
{% set point_3_2 = point_3_2 | default(value="") %}
|
||||||
|
{% set point_3_3 = point_3_3 | default(value="") %}
|
||||||
|
{% set paragraph_3_1 = paragraph_3_1 | default(value="") %}
|
||||||
|
{% set paragraph_3_2 = paragraph_3_2 | default(value="") %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="space-y-8 pt-12 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">
|
||||||
|
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||||
|
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||||
|
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
|
||||||
|
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||||
|
<div class="font-medium">{{ subtitle_1 }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="font-semibold text-lg mb-2">{{ title_1 }}</div>
|
||||||
|
<div class="text-gray-900 font-light">
|
||||||
|
<ul style="list-style: disc;">
|
||||||
|
<li>{{ point_1_1 }}</li>
|
||||||
|
<li>{{ point_1_2 }}</li>
|
||||||
|
<li>{{ point_1_3 }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Item #2 -->
|
||||||
|
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||||
|
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||||
|
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||||
|
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
|
||||||
|
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||||
|
<div class="font-medium">{{ subtitle_2 }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="font-semibold text-lg mb-2">{{ title_2 }}</div>
|
||||||
|
<div class="text-gray-900 font-light">
|
||||||
|
<ul style="list-style: disc;">
|
||||||
|
<li>{{ point_2_1 }}</li>
|
||||||
|
<li>{{ point_2_2 }}</li>
|
||||||
|
<li>{{ point_2_3 }}</li>
|
||||||
|
<li>{{ point_2_4 }}</li>
|
||||||
|
<li>{{ point_2_5 }}</li>
|
||||||
|
<li>{{ point_2_6 }}</li>
|
||||||
|
</ul>
|
||||||
|
<p class="text-base font-semibold mt-4">{{ paragraph_2_1 }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Item #3 -->
|
||||||
|
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||||
|
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||||
|
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||||
|
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
|
||||||
|
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||||
|
<div class="font-medium">{{ subtitle_3 }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="font-semibold text-lg mb-2">{{ title_3 }}</div>
|
||||||
|
<div class="text-gray-900 font-light">
|
||||||
|
|
||||||
|
<ul style="list-style: disc;">
|
||||||
|
<li>{{ point_3_1 }}</li>
|
||||||
|
<li>{{ point_3_2 }}</li>
|
||||||
|
<li>{{ point_3_3 }}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="text-base mt-8">
|
||||||
|
<p class="text-base">{{ paragraph_3_1 }}</p>
|
||||||
|
<p class="text-base font-semibold mt-4">{{ paragraph_3_2 }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</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() {
|
||||||
|
// 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>
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user