update home markdown
This commit is contained in:
@@ -6,12 +6,12 @@ title = "ThreeFold"
|
||||
description = "Our global digital backbone"
|
||||
|
||||
# When set to "true", a feed is automatically generated.
|
||||
generate_feed = true
|
||||
#generate_feed = true
|
||||
|
||||
# The filename to use for the feed. Used as the template filename, too.
|
||||
# Defaults to "atom.xml", which has a built-in template that renders an Atom 1.0 feed.
|
||||
# There is also a built-in template "rss.xml" that renders an RSS 2.0 feed.
|
||||
feed_filename = "atom.xml"
|
||||
#feed_filename = "atom.xml"
|
||||
|
||||
# The number of articles to include in the feed. All items are included if
|
||||
# this limit is not set (the default).
|
||||
@@ -51,8 +51,8 @@ external_links_no_referrer = true
|
||||
# For example, `...` into `…`, `"quote"` into `“curly”` etc
|
||||
smart_punctuation = true
|
||||
|
||||
[build]
|
||||
not_found = "404.md"
|
||||
#[build]
|
||||
#not_found = "404.md"
|
||||
|
||||
[[taxonomies]]
|
||||
name = "categories"
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: "ThreeFold"
|
||||
description: "TF offers a secure, sovereign infrastructure layer for the Internet, delivering unparalleled scalability, incorruptible and permanent data storage, AI and Web2/Web3/Edge compatibility, and 100% uptime for a resilient digital future." # quotation marks to allow colons where used
|
||||
date: 2018-09-14T21:00:00-05:00
|
||||
updated: 2021-02-20T14:40:00-06:00
|
||||
#date: 2018-09-14T21:00:00-05:00
|
||||
#updated: 2021-02-20T14:40:00-06:00
|
||||
draft: false
|
||||
extra:
|
||||
author: ThreeFold
|
||||
@@ -10,195 +10,3 @@ extra:
|
||||
---
|
||||
|
||||
|
||||
<!-- 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 %}
|
||||
|
||||
@@ -12,7 +12,7 @@ insert_anchor_links: "left"
|
||||
template: "layouts/blog.html"
|
||||
page_template: "blogPage.html"
|
||||
#transparent: true
|
||||
generate_feed: true
|
||||
#generate_feed: true
|
||||
extra:
|
||||
imgPath: tf.png
|
||||
---
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 884 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1003 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 568 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 464 KiB |
@@ -7,339 +7,52 @@ extra:
|
||||
imgPath: home/tf.png
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- section 1 (header) -->
|
||||
|
||||
|
||||
<div class="container mx-auto">
|
||||
{{ hero_text_center(
|
||||
title="Built for Everyone by Everyone, Everywhere",
|
||||
subtitle="Unleashing the Power of Decentralized Networks",
|
||||
description="ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.",
|
||||
button1_text="What We've Built",
|
||||
button1_link="/what"
|
||||
button2_text="Why We Do It",
|
||||
button2_link="/why"
|
||||
button3_text="Read EV3's Report",
|
||||
button3_link="https://paragraph.com/@ev3news/threefold-rearchitecting-the-internet"
|
||||
|
||||
) }}
|
||||
|
||||
{% row(style=" center header margin") %}
|
||||
|
||||
<div class="max-w-none lg:max-w-4xl leading-normal mx-auto">
|
||||
<!-- section 2 -->
|
||||
|
||||
# **Self-Healing Data, Network, <br>and Cloud Platform**
|
||||
{{ features(
|
||||
title="ThreeFold is a Decentralized Infrastructure Layer for The Internet",
|
||||
description="We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.",
|
||||
button_text="Discover How It Works",
|
||||
button_link="/what",
|
||||
title_2="Three Inventions at the Core of Our System",
|
||||
subtitle_1 ="COMPUTE",
|
||||
header1="Bare Metal Operating System",
|
||||
description1_1="Zero OS, an efficient and secure operating system, runs directly on the hardware – enabling an autonomous cloud.",
|
||||
description1_2="Can run any Web2, Web3, or AI workload at the edge of the Internet, with more scalability and reliability.",
|
||||
subtitle_2="DATA",
|
||||
header2="Unbreakable Data",
|
||||
description2_1="Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level.",
|
||||
description2_2="Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.",
|
||||
subtitle_3="NETWORK",
|
||||
header3="Unbreakable Network",
|
||||
description3_1="End-to-end encrypted overlay network, always looking for the shortest possible path between participants.",
|
||||
description3_2="Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations."
|
||||
) }}
|
||||
|
||||
Imagine a system which can scale to a planetary level, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, capable to provide 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.
|
||||
|
||||
<br>
|
||||
|
||||
<button class="blue_b">[Host](/host)</button><button class="blue_b">[Deploy](/deploy)</button><button class="green">[About](/about)</button>
|
||||
|
||||
|
||||
|||
|
||||
|
||||
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- section 3 (Map) -->
|
||||
<div class="container mx-auto">
|
||||
|
||||
|
||||
{% grid_stats() %}
|
||||
|
||||
|
||||
#### <span class="blue">LIVE AND OPERATIONAL</span>
|
||||
|
||||
|
||||
## **Proven by a global community**
|
||||
|
||||
|
||||
With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own<br>sovereign infrastructure. Our Proof of Concept Network with 50,000 vCPUs is live and operational.
|
||||
|
||||
**Version 3.14 is live on Mainnet**
|
||||
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- section 4 (Host the cloud) -->
|
||||
|
||||
|
||||
<div style="background-color:#F6F6F6">
|
||||
<div class="container mx-auto">
|
||||
|
||||
{% row( style="mtop center between ") %}
|
||||
|
||||
#### <span class="blue">THREEFOLD DIFFERENCE</span>
|
||||
|
||||
## **A ground-up approach**
|
||||
|
||||
ThreeFold is not a protocol. We've developed foundational technology that runs directly on bare metal (the hardware). ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud's core bottlenecks: data, cloud, and network.
|
||||
|
||||
<br>
|
||||
|
||||
<button class="blue_b">[Learn More](/technology)</button>
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="reverse margin") %}
|
||||
|
||||
|
||||
|
||||
|||
|
||||
|
||||
### **Unbreakable Data**
|
||||
|
||||
Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.
|
||||
|
||||
### **Autonomous Cloud**
|
||||
|
||||
Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.
|
||||
|
||||
### **P2P Network**
|
||||
|
||||
End-to-end encrypted overlay network, always looking for the shortest possible path between participants. Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- section 9 (Ecosystem) -->
|
||||
|
||||
|
||||
<div class="container mx-auto">
|
||||
|
||||
|
||||
{% row( style="center mtop semiNarrow") %}
|
||||
|
||||
|
||||
<h4 class="green_text">REAL-WORLD IMPACT</h4>
|
||||
|
||||
|
||||
## **Collaboration, Innovation, Evolution**
|
||||
|
||||
ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects.
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
{% row( style="semiNarrow mbottom") %}
|
||||
|
||||
<div class="rounded_img border-2 rounded-lg shadow-lg">
|
||||
|
||||
[](/newsroom/freezone-anouncement/)
|
||||
|
||||
<div class="p-6 lg:p-3 mycard">
|
||||
|
||||
#### **OurWorld Free Zone**
|
||||
|
||||
<br>
|
||||
|
||||
<span class="text-md truncate ..." >ThreeFold is working with the Zanzibar Communication Corporation (ZICTIA), on behalf of the Zanzibar government, to create the world’s first 100% Digital Free Zone – accessible and affordable for all. The announcement was made August 2023, and progress has been ongoing behind the scenes since then. Updates expected Q4 2024.
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|||
|
||||
|
||||
|
||||
<div class="rounded_img border-2 rounded-lg shadow-lg">
|
||||
|
||||
|
||||
[](/newsroom/duniayetulaunchdar/)
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="p-6 lg:p-3 mycard">
|
||||
|
||||
|
||||
#### **Tanzanian Sovereign Internet**
|
||||
|
||||
<br>
|
||||
<span class="text-md truncate ..." >
|
||||
In January 2024, ThreeFold announced in collaboration with The ICT Commission of Tanzania and Holochain a collaboration to deploy sovereign Internet in Tanzania, along with the introduction of coding academies and innovation hubs. The Dunia Yetu cooperative is being set up and efforts will ramp up in 2025.
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% end %}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- section 5 (INCA) -->
|
||||
|
||||
<div style="background-color:#F6F6F6">
|
||||
<div class="container mx-auto">
|
||||
|
||||
{% row(style="margin") %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|||
|
||||
|
||||
|
||||
#### <span class="green_text">THE NEXT CHAPTER</span>
|
||||
|
||||
## **Ready for commercialization**
|
||||
|
||||
For years, ThreeFold has been quietly and steadily developing its innovative technology, with a solid foundation of mature infrastructure that is now ready to take the next leap forward.
|
||||
|
||||
<br>
|
||||
|
||||
We are currently fundraising for the next stage of our project – major commercial expansion. This will involve the launch of the $INCA token on the Solana blockchain. If you are interested in learning more or taking part, please reach out.
|
||||
|
||||
<br>
|
||||
|
||||
<button class="blue_b">[Get in Touch](https://calendly.com/florian_threefold/30min)</button>
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- section 10 (news) -->
|
||||
|
||||
|
||||
<div class="rounded_img container mx-auto">
|
||||
|
||||
|
||||
{% row( style="mtop semiNarrow") %}
|
||||
|
||||
|
||||
## **Top Blogs**
|
||||
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
{% row( style="mbottom semiNarrow") %}
|
||||
|
||||
|
||||
<div class="rounded_img">
|
||||
|
||||
|
||||
[](/blog/ground-up-innovations/)
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
##### From the ground up: Three inventions that make ThreeFold possible
|
||||
|
||||
</div>
|
||||
|
||||
|||
|
||||
|
||||
[](/blog/evolution-of-the-internet)
|
||||
|
||||
<br>
|
||||
|
||||
##### The Evolution of the Internet: From free to controlled, and back again
|
||||
|
||||
|||
|
||||
|
||||
<div class="pl-12 road_border">
|
||||
<h3 class="mt-0 font-semibold">JOIN IN</h3>
|
||||
|
||||
|
||||
<div class="my-4">
|
||||
<a href="https://manual.grid.tf" target="_blank">
|
||||
<h4 class="text-xl green_text font-normal my-0">Manuals</h4>
|
||||
<p class="white-gray font-normal">Dive deeper into our technology</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<a href="https://threefoldfaq.crisp.help/en/" target="_blank">
|
||||
<h4 class="text-xl green_text font-normal my-0">Support</h4>
|
||||
<p class="white-gray font-normal">Get assistance from our Support Team</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<a href="/community" target="_blank">
|
||||
<h4 class="text-xl green_text font-normal my-0">Community</h4>
|
||||
<p class="white-gray font-normal">Be part of our journey and participate</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.card_h{
|
||||
height: 110px !important;
|
||||
}
|
||||
|
||||
|
||||
.rounded_img img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.white-gray{
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
|
||||
.road_border{
|
||||
|
||||
border-left: 1px solid #cbcbcb;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
|
||||
|
||||
|
||||
.road_border{
|
||||
|
||||
border-left: 0px solid #cbcbcb;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 541 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
@@ -12,7 +12,7 @@ insert_anchor_links: "left"
|
||||
template: "layouts/newsroom.html"
|
||||
page_template: "newsPage.html"
|
||||
#transparent: true
|
||||
generate_feed: true
|
||||
#generate_feed: true
|
||||
extra:
|
||||
imgPath: newsroom.png
|
||||
---
|
||||
@@ -1,14 +1,12 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/home/hero.html" %}
|
||||
{% include "partials/home/features.html" %}
|
||||
{% include "partials/home/grid_stats.html" %}
|
||||
{% include "partials/home/use_cases.html" %}
|
||||
{% include "partials/home/farmers.html" %}
|
||||
{% include "partials/home/self_healing.html" %}
|
||||
{% include "partials/home/web4.html" %}
|
||||
{% include "partials/home/faq.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
<div>
|
||||
{% set page = get_page(path="home/index.md") %}
|
||||
{{page.content | safe}}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
107
templates/shortcodes/features.html
Normal file
107
templates/shortcodes/features.html
Normal file
@@ -0,0 +1,107 @@
|
||||
{% set title = title | default(value="Built") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set subtitle_1 = subtitle_1 | default(value="") %}
|
||||
{% set header1 = header1 | default(value="") %}
|
||||
{% set description1_1 = description1_1 | default(value="") %}
|
||||
{% set description1_2 = description1_2 | default(value="") %}
|
||||
{% set subtitle_2 = subtitle_2 | default(value="") %}
|
||||
{% set header2 = header2 | default(value="") %}
|
||||
{% set description2_1 = description2_1 | default(value="") %}
|
||||
{% set description2_2 = description2_2 | default(value="") %}
|
||||
{% set subtitle_3 = subtitle_3 | default(value="") %}
|
||||
{% set header3 = header3 | default(value="") %}
|
||||
{% set description3_1 = description3_1 | default(value="") %}
|
||||
{% set description3_2 = description3_2 | default(value="") %}
|
||||
|
||||
|
||||
<div class="bg-transparent lg:pb-24 pb-12">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-y-16 px-4 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
||||
<div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-3xl leading-tight font-normal tracking-tight text-white">{{ title }}
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description }}</p>
|
||||
<a href="{{ button_link }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<h3 class="mb-6 lg:mb-8 lg:text-2xl text-xl leading-tight font-normal tracking-tight text-white">{{ title_2 }}
|
||||
</h3>
|
||||
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-8 gap-y-4">
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">{{ subtitle_1 }}</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">{{ header1 }} </dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">{{ description1_1 }} </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">{{ description1_2 }}</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">{{ subtitle_2 }}</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">{{ header2 }} </dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">{{ description2_1 }} </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">{{ description2_2 }}</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pt-0">
|
||||
<dt class="font-normal text-sm text-gray-200">{{ subtitle_3 }}</dt>
|
||||
<dt class="mt-1 font-semibold text-base text-gray-200">{{ header3 }} </dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-2">{{ description3_1 }} </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">{{ description3_2 }}</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>
|
||||
67
templates/shortcodes/hero_text_center.html
Normal file
67
templates/shortcodes/hero_text_center.html
Normal file
@@ -0,0 +1,67 @@
|
||||
{% set title = title | default(value="Built") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button1_text = button1_text | default(value="") %}
|
||||
{% set button1_link = button1_link | default(value="") %}
|
||||
{% set button2_text = button2_text | default(value="") %}
|
||||
{% set button2_link = button2_link | default(value="") %}
|
||||
{% set button3_text = button3_text | default(value="") %}
|
||||
{% set button3_link = button3_link | default(value="") %}
|
||||
|
||||
<div class="relative flex justify-center items-center isolate overflow-hidden h-screen">
|
||||
|
||||
<div class="px-4 lg:px-8">
|
||||
|
||||
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight leading-tight text-white lg:text-6xl text-3xl fade-in">
|
||||
{{ title }}</h2>
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description }}</p>
|
||||
<!-- <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> -->
|
||||
<br>
|
||||
|
||||
<div class="mt-6 flex items-center justify-center gap-x-8">
|
||||
{% if button1_link %}
|
||||
<a href="{{ button1_link }}"
|
||||
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">{{ button1_text }}</a>
|
||||
{% endif %}
|
||||
{% if button3_link %}
|
||||
<a href="{{ button2_link }}" class="fade-in text-base font-semibold text-white hover:text-green mr-1 ">{{ button2_text }}<span class="ml-2"
|
||||
aria-hidden="true">→</span></a>
|
||||
{% endif %}
|
||||
{% if button3_link %}
|
||||
<a href="{{ button3_link }}" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">{{ button3_text }}<span class="ml-2" aria-hidden="true">→</span></a>
|
||||
{% endif %}
|
||||
</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>
|
||||
Reference in New Issue
Block a user