Compare commits
1 Commits
developmen
...
developmen
| Author | SHA1 | Date | |
|---|---|---|---|
| 8fead1a010 |
@ -4,7 +4,7 @@ description: ""
|
||||
insert_anchor_links: "left"
|
||||
template: "partials/footer.html"
|
||||
extra:
|
||||
logoPath: "images/tf_logo.svg"
|
||||
logoPath: "images/tf_dark.png"
|
||||
socialLinks: { Github: "https://github.com/ourworldfreezone", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews" }
|
||||
---
|
||||
|
||||
@ -55,6 +55,12 @@ extra:
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.bg-dark {
|
||||
background: rgb(15,15,15);
|
||||
background: linear-gradient(0deg, rgba(15,15,15,1) 0%, rgba(21,22,22,1) 50%, rgba(15,15,15,1) 100%);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@ description: ""
|
||||
insert_anchor_links: "left"
|
||||
template: "partials/header.html"
|
||||
extra:
|
||||
logoPath: "./images/tf_logo.svg"
|
||||
logoPath: "./images/tf_dark.png"
|
||||
imgPath: ""
|
||||
---
|
||||
- [Home]("/")
|
||||
|
||||
@ -10,17 +10,21 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* Custom CSS for header partial */
|
||||
.backdrop-blur {
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.bg-semi-white {
|
||||
@ -97,7 +101,7 @@ img[src*="#tft_img"] {
|
||||
}
|
||||
p {
|
||||
@apply text-lg lg:text-xl leading-tight tracking-normal font-normal;
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
blockquote {
|
||||
@apply border-l-4 border-gray-400 mx-2 my-2 p-2;
|
||||
@ -404,7 +408,7 @@ header #menu button a{
|
||||
px-0
|
||||
}
|
||||
|
||||
.bg-gradient-bl {
|
||||
background: rgb(0,166,255);
|
||||
background: linear-gradient(125deg, rgba(0,166,255,1) 0%, rgba(8,173,179,1) 100%);
|
||||
}
|
||||
.bg-dark {
|
||||
background: rgb(15,15,15);
|
||||
background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(12, 0, 30) 50%, rgba(15,15,15,1) 100%);
|
||||
}
|
||||
|
||||
@ -1796,7 +1796,7 @@ p {
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -2542,7 +2542,7 @@ button {
|
||||
}
|
||||
|
||||
.max-h-12 {
|
||||
max-height: 3rem;
|
||||
max-height: 3.5rem;
|
||||
}
|
||||
|
||||
.max-h-80 {
|
||||
@ -4180,11 +4180,11 @@ button {
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.bg-semi-white {
|
||||
|
||||
@ -40,7 +40,7 @@ span.ge {
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-family: "Inter", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
@ -1495,7 +1495,7 @@ p {
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -4253,11 +4253,11 @@ details[open] > summary::after {
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: "CercoDEMO", sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.bg-semi-white {
|
||||
|
||||
BIN
static/images/freezone.png
Normal file
BIN
static/images/freezone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
static/images/logos/black/freezone.png
Normal file
BIN
static/images/logos/black/freezone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
static/images/logos/black/holo.png
Normal file
BIN
static/images/logos/black/holo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
static/images/logos/black/ict.png
Normal file
BIN
static/images/logos/black/ict.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
static/images/logos/black/sikana.png
Normal file
BIN
static/images/logos/black/sikana.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
static/images/logos/black/social.png
Normal file
BIN
static/images/logos/black/social.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
static/images/logos/black/veverse.png
Normal file
BIN
static/images/logos/black/veverse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
static/images/logos/black/vverse.png
Normal file
BIN
static/images/logos/black/vverse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
static/images/logos/black/zictia11.png
Normal file
BIN
static/images/logos/black/zictia11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
static/images/logos/black/znz.png
Normal file
BIN
static/images/logos/black/znz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 46 KiB |
BIN
static/images/tf_dark.png
Normal file
BIN
static/images/tf_dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -4,11 +4,19 @@ module.exports = {
|
||||
safelist: [
|
||||
{
|
||||
pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
|
||||
variants: ['sm', 'md', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
|
||||
variants: [
|
||||
'sm', 'md', 'lg',
|
||||
'first', 'first:sm', 'first:md', 'first:lg',
|
||||
'last', 'last:sm', 'last:md', 'last:lg'
|
||||
],
|
||||
},
|
||||
{
|
||||
pattern: /(pt|pb)-(0)/,
|
||||
variants: ['!', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
|
||||
variants: [
|
||||
'!', 'lg',
|
||||
'first', 'first:sm', 'first:md', 'first: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
|
||||
@ -28,9 +36,14 @@ module.exports = {
|
||||
700: '#00796B',
|
||||
800: '#00695C',
|
||||
900: '#004D40',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
},
|
||||
}, // End of extend
|
||||
}, // **Added closing brace for theme here**
|
||||
plugins: [
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
],
|
||||
};
|
||||
|
||||
@ -5,11 +5,19 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div id="content" class="py-12 md:py-16 lg:py-18 overflow-hidden">
|
||||
<div id="content" class="overflow-hidden bg-dark">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
{% include "partials/footer.html" %}
|
||||
<script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
.bg-dark {
|
||||
background: rgb(15,15,15);
|
||||
background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(12, 0, 30) 50%, rgba(15,15,15,1) 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</html>
|
||||
@ -5,9 +5,6 @@
|
||||
|
||||
{% include "partials/hero.html" %}
|
||||
{% include "partials/logos2.html" %}
|
||||
{% include "shortcodes/grid_stats.html" %}
|
||||
{% include "partials/simple_stats.html" %}
|
||||
{% include "partials/features.html" %}
|
||||
|
||||
{% include "partials/blogs.html" %}
|
||||
{% include "partials/faq.html" %}
|
||||
{% endblock content %}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="bg-transparent pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="max-w-7xl lg:max-w-2xl text-left">
|
||||
<h2 class="text-xl font-normal tracking-wide text-indigo-600">THREEFOLD DIFFERENCE</h2>
|
||||
<p class="mt-4 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">A ground-up Approach</p>
|
||||
<p class="mt-6 mb-4 text-lg max-w-2xl font-light text-gray-700">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.</p>
|
||||
<a href="#" class="text-sm font-semibold text-indigo-700">Learn more <span aria-hidden="true">→</span></a>
|
||||
<h2 class="text-xl font-normal tracking-wide text-indigo-200">THREEFOLD DIFFERENCE</h2>
|
||||
<p class="mt-4 text-pretty text-4xl font-semibold tracking-tight text-white sm:text-balance sm:text-5xl">A ground-up Approach</p>
|
||||
<p class="mt-6 mb-4 text-lg max-w-2xl font-light text-gray-200">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.</p>
|
||||
<a href="#" class="text-sm font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-x-8 sm:mt-16">
|
||||
<!-- Card 1 -->
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{%- set section = get_section(path="footer/_index.md") %}
|
||||
{%- set logoPath = section.extra.logoPath %}
|
||||
|
||||
<div class="border-t border-gray-200"></div>
|
||||
<div class="bg-dark"></div>
|
||||
<footer>
|
||||
<div class="max-w-screen-2xl mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-screen-2xl bg-dark mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col xl:flex-row xl:gap-4 items-center">
|
||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 mb-4 xl:col-span-1 text-center xl:text-left">
|
||||
<img class="lg:w-60 h-auto w-20 mx-auto" src="./images/tf_logo.svg" alt="logo" />
|
||||
<img class="lg:w-60 h-auto w-20 mx-auto" src="/images/tf_dark.png" alt="logo" />
|
||||
</div>
|
||||
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 mb-4">
|
||||
© 2024 OurWorld Holdings, All rights reserved.
|
||||
@ -16,3 +16,10 @@
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.bg-dark {
|
||||
background: rgb(15,15,15);
|
||||
background: linear-gradient(0deg, rgba(15,15,15,1) 0%, rgba(21,22,22,1) 50%, rgba(15,15,15,1) 100%);
|
||||
}
|
||||
</style>
|
||||
@ -10,22 +10,22 @@
|
||||
{% else %}
|
||||
<header id="header-container">
|
||||
{% set header_class = config.extra.header_class | default(value='') %}
|
||||
<div class="{{'z-10 bg-transparent 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 class="{{'z-10 bg-transparent w-screen' ~ header_class}}">
|
||||
<div class="relative z-50">
|
||||
<div class="mx-auto flex z-50 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-60 h-auto sm:w-15" src="{{logo_path}}" alt="tf 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-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">
|
||||
<button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white 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" class="menu-mobile 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">
|
||||
<button id="close-hamburger-btn" class="menu-mobile lg:hidden inline-flex items-center justify-center p-2 rounded-md text-white 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" />
|
||||
@ -36,7 +36,7 @@
|
||||
<nav class="flex space-x-10">
|
||||
{% for page in section.pages %}
|
||||
{% if page.extra.menu %} {% 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">
|
||||
<a href="{{page.permalink}}" class="text-lg leading-6 text-white focus:outline-none focus:text-white transition ease-in-out duration-150 mt-0">
|
||||
{{page.title}}test
|
||||
</a>
|
||||
<div class="relative">
|
||||
@ -46,7 +46,7 @@
|
||||
{% 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">
|
||||
<button type="button" id="{{button_id}}" class="nav_btn text-white 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>
|
||||
@ -61,7 +61,7 @@
|
||||
{% 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="bg-transparent 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>
|
||||
@ -85,14 +85,14 @@
|
||||
-->
|
||||
<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="shadow-xs h-screen bg-transparent 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 %}
|
||||
{% if page.extra.menu %} {% 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">
|
||||
<a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
|
||||
{{page.title}}
|
||||
</a>
|
||||
<hr/>
|
||||
@ -102,7 +102,7 @@
|
||||
{% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
|
||||
{% set menu_id = subsection ~ "-mobile-menu" | slugify %}
|
||||
|
||||
<button type="button" id="{{button_id}}" class="menu-mobile flex px-8 py-3 items-start text-left text-gray-900 group lg: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">
|
||||
<button type="button" id="{{button_id}}" class="menu-mobile flex px-8 py-3 items-start text-left text-white group lg:inline-flex space-x-2 text-lg leading-6 font-normal hover:text-white 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>
|
||||
@ -118,7 +118,7 @@
|
||||
<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 ">
|
||||
<p class="text-white text-base leading-6 ">
|
||||
{{section.description}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,143 +1,77 @@
|
||||
<!--
|
||||
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+ -->
|
||||
|
||||
{%- set section = get_section(path="header/_index.md") %}
|
||||
{% set header_items = section.content | safe | split(pat="<li>") %}
|
||||
|
||||
<header id="header-container">
|
||||
<div class="z-10 bg-white fixed w-screen">
|
||||
<div class="relative z-50 shadow">
|
||||
<div class="mx-auto flex z-50 shadow 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 class="w-48 h-auto sm:w-15" src="{{section.extra.logoPath}}" 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-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" class="menu-mobile 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 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%}
|
||||
<a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button id="{{button_id}}" class="nav_btn font-medium 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>{{ 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 %}
|
||||
{% if not loop.first %}
|
||||
{% set header_arr = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_arr[0] %}
|
||||
{% set header_menu = header_arr[1] %}
|
||||
{% set menu_id = header_label ~ "-menu" | slugify %}
|
||||
|
||||
<nav>
|
||||
<div id="{{menu_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">
|
||||
{{header_menu | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
{% endif %}
|
||||
{% 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-28 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||
<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 pt-2">
|
||||
{% for header_item in header_items %}
|
||||
<header id="header-container" class="bg-inherit">
|
||||
<div class="z-10 bg-dark1 w-screen">
|
||||
<div class="relative z-50">
|
||||
<div class="mx-auto 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 class="w-48 h-auto sm:w-15" src="{{section.extra.logoPath}}" 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 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%}
|
||||
<a href="{{link_path[1]}}" 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">
|
||||
{% set link_path = header_label | split(pat="%22") | safe %}
|
||||
<a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-white hover:text-gray-300 transition ease-in-out duration-150 mt-0">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="menu-mobile my-0 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">
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button id="{{button_id}}" class="nav_btn font-medium text-white 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>{{ 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>
|
||||
<div class="-rotate-90 transition-transform">
|
||||
<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>
|
||||
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
|
||||
<div id="{{menu_id}}" class="z-50 leading-3 pl-9 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
{{ header_arr[1] | safe }}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
<hr/>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if "footer/_index.md" in subsections_str %}
|
||||
{% set section = get_section(path="footer/_index.md")%}
|
||||
{% set logoPath = section.extra.logoPath %}
|
||||
<div class="mx-8 my-2">
|
||||
{# <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="{{logoPath}}" alt="Company name" />
|
||||
<p class="text-gray-500 text-base leading-6 ">
|
||||
{{section.description}}
|
||||
</p>
|
||||
</div> #}
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for header_item in header_items %}
|
||||
{% if not loop.first %}
|
||||
{% set header_arr = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_arr[0] %}
|
||||
{% set header_menu = header_arr[1] %}
|
||||
{% set menu_id = header_label ~ "-menu" | slugify %}
|
||||
<nav>
|
||||
<div id="{{menu_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 lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
<div class="bg-gray-800 lg:bg-gray-900 md:bg-gray-900 xl:bg-gray-900">
|
||||
<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 text-white">
|
||||
{{header_menu | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
</header>
|
||||
<style>
|
||||
.bg-dark1 {
|
||||
background: rgb(15,15,15,1);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,83 +1,39 @@
|
||||
<div class="relative bg-white py-24">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="relative z-10 lg:w-full lg:max-w-2xl">
|
||||
<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-gradient-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 class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 pt-32 pb-24 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance lg:text-6xl font-normal tracking-tight text-white text-5xl fade-in">A Self-Healing Data, Network and Cloud Platform</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="relative px-6 lg:px-8 lg:pr-0">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl animate-fade-up">
|
||||
<h1 class="text-pretty lg:text-6xl text-4xl font-semibold tracking-tight text-gray-900 animate-fade-up">Self-Healing Data, Network, and Cloud Platform</h1>
|
||||
<p class="mt-8 text-pretty text-lg font-light text-gray-700 sm:text-xl/8 animate-fade-up">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, provides 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.</p>
|
||||
<div class="mt-10 flex items-center gap-x-6 animate-fade-up">
|
||||
<a href="#" class="rounded-xl bg-black px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Host</a>
|
||||
<a href="#" class="rounded-xl bg-blue-700 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Deploy</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 animate-fade-in">
|
||||
<img class="aspect-[3/2] lg:mt-0 mt-12 lg:p-10 p-0 w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
|
||||
<div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Background gradient */
|
||||
.bg-gradient-bl {
|
||||
background: linear-gradient(125deg, rgba(0, 166, 255, 1) 0%, rgba(8, 173, 179, 1) 100%);
|
||||
}
|
||||
|
||||
/* Fade-up animation for text */
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade-in animation for the image (GIF) */
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply fade-up animation to text */
|
||||
.animate-fade-up {
|
||||
animation: fadeUp 1.5s ease-out forwards;
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
/* Apply fade-in animation to the GIF */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 2s ease-out forwards;
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
/* Responsive styles for smaller screens */
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
<div class="bg-transparent lg:py-24 py-10 overflow-hidden">
|
||||
<div class="bg-transparent lg:py-12 overflow-hidden">
|
||||
<div class="flex space-x-8 animate-scroll">
|
||||
<!-- First set of logos -->
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
|
||||
<img class="object-contain" src="images/logos/sikana.png" alt="Transistor" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/ict.png" alt="Reform" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/znz.png" alt="Tuple" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/social.png" alt="SavvyCal" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/holo.png" alt="Statamic" width="158" height="48">
|
||||
<img class=" object-contain" src="images/logos/freezone.png" alt="Statamic" width="158" height="48">
|
||||
<img class=" object-contain" src="images/logos/vverse.png" alt="Statamic" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/veverse.png" alt="Statamic" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/zictia.png" alt="Statamic" width="158" height="48">
|
||||
|
||||
<!-- First set of logos -->
|
||||
<img class="object-contain" src="images/logos/sikana.png" alt="Transistor" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/ict.png" alt="Reform" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/znz.png" alt="Tuple" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/social.png" alt="SavvyCal" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/holo.png" alt="Statamic" width="158" height="48">
|
||||
<img class=" object-contain" src="images/logos/freezone.png" alt="Statamic" width="158" height="48">
|
||||
<img class=" object-contain" src="images/logos/vverse.png" alt="Statamic" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/veverse.png" alt="Statamic" width="158" height="48">
|
||||
<img class="object-contain" src="images/logos/zictia.png" alt="Statamic" width="158" height="48">
|
||||
|
||||
<!-- Duplicate set of logos to create the endless effect -->
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -34,7 +35,7 @@
|
||||
/* Apply the animation */
|
||||
.animate-scroll {
|
||||
display: flex;
|
||||
animation: scroll 25s linear infinite;
|
||||
animation: scroll 30s linear infinite;
|
||||
gap: 2rem;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
72
templates/partials/simple_stats.html
Normal file
72
templates/partials/simple_stats.html
Normal file
@ -0,0 +1,72 @@
|
||||
<div class="bg-transparent py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<div class="text-center">
|
||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Proven by a Global Community</h2>
|
||||
<p class="fade-in mt-4 max-w-4xl mx-auto text-lg/8 font-light text-gray-300">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p>
|
||||
<p class="fade-in mt-4 max-w-4xl mx-auto text-lg/8 font-medium text-gray-300">Version 3.14 is live on Mainnet.</p>
|
||||
</div>
|
||||
<dl class="mt-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 lg:gap-8 overflow-hidden rounded-2xl text-center">
|
||||
<div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
|
||||
<dt class="text-sm/6 mt-1 font-light text-gray-300">CAPACITY</dt>
|
||||
<dd class="order-first text-3xl font-semibold tracking-tight text-white" id="capacity">19,10 PB</dd>
|
||||
</div>
|
||||
<div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
|
||||
<dt class="text-sm/6 font-light mt-1 text-gray-300">CORES</dt>
|
||||
<dd class="order-first text-3xl font-semibold tracking-tight text-white" id="cores">46,934</dd>
|
||||
</div>
|
||||
<div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
|
||||
<dt class="text-sm/6 font-light mt-1 text-gray-300">NODES</dt>
|
||||
<dd class="order-first text-3xl font-semibold tracking-tight text-white" id="nodes">1596</dd>
|
||||
</div>
|
||||
<div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
|
||||
<dt class="text-sm/6 font-light mt-1 text-gray-300">COUNTRIES</dt>
|
||||
<dd class="order-first text-3xl font-semibold tracking-tight text-white" id="countries">40+</dd>
|
||||
</div>
|
||||
<div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
|
||||
<dt class="text-sm/6 font-light mt-1 text-gray-300">FARMS</dt>
|
||||
<dd class="order-first text-3xl font-semibold tracking-tight text-white" id="farms">900+</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize the countUp for each of the numbers
|
||||
new CountUp('capacity', 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 20s 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>
|
||||
|
||||
88
templates/partials/slider.html
Normal file
88
templates/partials/slider.html
Normal file
@ -0,0 +1,88 @@
|
||||
<!--
|
||||
This example requires some changes to your config:
|
||||
|
||||
```
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
// ...
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
],
|
||||
}
|
||||
```
|
||||
-->
|
||||
<div class="bg-white">
|
||||
<section aria-labelledby="features-heading" class="mx-auto max-w-7xl py-32 sm:px-2 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0">
|
||||
<div class="max-w-3xl">
|
||||
<h2 id="features-heading" class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Collaboration, Innovation, Evolution</h2>
|
||||
<p class="mt-4 font-light text-gray-700">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="-mx-4 flex overflow-x-auto sm:mx-0">
|
||||
<div class="flex-auto border-b border-gray-200 px-4 sm:px-0">
|
||||
<div class="-mb-px flex space-x-10" aria-orientation="horizontal" role="tablist">
|
||||
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<button id="features-tab-2" class="whitespace-nowrap border-b-2 border-transparent bg-transparent py-6 text-lg font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="features-panel-2" role="tab" type="button">Material</button>
|
||||
<button id="features-tab-3" class="whitespace-nowrap border-b-2 border-transparent py-6 bg-transparent text-lg font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="features-panel-3" role="tab" type="button">Considerations</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="features-panel-2" class="space-y-16 pt-10 lg:pt-16" aria-labelledby="features-tab-2" role="tabpanel" tabindex="0">
|
||||
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
||||
<div class="mt-6 lg:col-span-5 lg:mt-0">
|
||||
<h3 class="text-lg font-medium text-gray-900">Natural wood options</h3>
|
||||
<p class="mt-2 text-sm text-gray-500">Organize has options for rich walnut and bright maple base materials. Accent your desk with a contrasting material, or match similar woods for a calm and cohesive look. Every base is hand sanded and finished.</p>
|
||||
</div>
|
||||
<div class="lg:col-span-7">
|
||||
<div class="aspect-h-1 aspect-w-2 overflow-hidden rounded-lg bg-gray-100 sm:aspect-h-2 sm:aspect-w-5">
|
||||
<img src="https://tailwindui.com/plus/img/ecommerce-images/product-feature-06-detail-02.jpg" alt="Walnut organizer base with pen, sticky note, phone, and bin trays, next to modular drink coaster attachment." class="object-cover object-center">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="features-panel-3" class="space-y-16 pt-10 lg:pt-16" aria-labelledby="features-tab-3" role="tabpanel" tabindex="0">
|
||||
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
||||
<div class="mt-6 lg:col-span-5 lg:mt-0">
|
||||
<h3 class="text-lg font-medium text-gray-900">Helpful around the home</h3>
|
||||
<p class="mt-2 text-sm text-gray-500">Our customers use Organize throughout the house to bring efficiency to many daily routines. Enjoy Organize in your workspace, kitchen, living room, entry way, garage, and more. We can't wait to see how you'll use it!</p>
|
||||
</div>
|
||||
<div class="lg:col-span-7">
|
||||
<div class="aspect-h-1 aspect-w-2 overflow-hidden rounded-lg bg-gray-100 sm:aspect-h-2 sm:aspect-w-5">
|
||||
<img src="https://tailwindui.com/plus/img/ecommerce-images/product-feature-06-detail-03.jpg" alt="Walnut organizer base with white polycarbonate trays in the kitchen with various kitchen utensils." class="object-cover object-center">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const tabs = document.querySelectorAll('[role="tab"]');
|
||||
const tabPanels = document.querySelectorAll('[role="tabpanel"]');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener("click", () => {
|
||||
// Remove active classes from all tabs and panels
|
||||
tabs.forEach(t => {
|
||||
t.classList.remove("border-indigo-500", "text-indigo-600");
|
||||
t.classList.add("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700");
|
||||
});
|
||||
tabPanels.forEach(panel => panel.classList.add("hidden"));
|
||||
|
||||
// Add active classes to clicked tab and associated panel
|
||||
tab.classList.add("border-indigo-500", "text-indigo-600");
|
||||
tab.classList.remove("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700");
|
||||
|
||||
const panelId = tab.getAttribute("aria-controls");
|
||||
document.getElementById(panelId).classList.remove("hidden");
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user