Initial commit
This commit is contained in:
ourworld_web
20
templates/404.html
Normal file
20
templates/404.html
Normal file
@@ -0,0 +1,20 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main class="container mx-auto text-center">
|
||||
|
||||
<div class="lg:pt-20 pt-8">
|
||||
<div>
|
||||
<img class="w-1/2 lg:w-1/4 mx-auto my-10" src="/images/404_1.png" alt="404_image">
|
||||
</div>
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<h3 class="text-2xl md:text-4xl font-semibold">You seem to have ended up on a missing page!</h3>
|
||||
<p class="font-normal text-gray-500">This could mean that you’ve entered the wrong URL or you’ve clicked on content which has moved locations or is no longer live. If you need assistance, click on the blue chat icon at the bottom of the screen to speak with real humans on our support team. Or go back to <a class="text-gray-50" href="/">home</a>.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
63
templates/_default/base.html
Normal file
63
templates/_default/base.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" charset="utf-8">
|
||||
{% include "partials/head.html" %}
|
||||
{% include "partials/header.html" %}
|
||||
|
||||
<body class="bg-dark-gradient">
|
||||
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"
|
||||
style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
|
||||
<!-- Twitter universal website tag code -->
|
||||
<script>
|
||||
!function (e, t, n, s, u, a) {
|
||||
e.twq || (s = e.twq = function () {
|
||||
s.exe ? s.exe.apply(s, arguments) : s.queue.push(arguments);
|
||||
}, s.version = '1.1', s.queue = [], u = t.createElement(n), u.async = !0, u.src = '//static.ads-twitter.com/uwt.js',
|
||||
a = t.getElementsByTagName(n)[0], a.parentNode.insertBefore(u, a))
|
||||
}(window, document, 'script');
|
||||
// Insert Twitter Pixel ID and Standard Event data below
|
||||
twq('init', 'o745b');
|
||||
twq('track', 'PageView');
|
||||
|
||||
|
||||
// makes all links outside of hostname open in new tab
|
||||
// from: https://stackoverflow.com/a/4425214
|
||||
var links = document.links;
|
||||
var internal_hosts = [
|
||||
'www.threefold.io',
|
||||
'threefold.io',
|
||||
'www2.threefold.io',
|
||||
'localhost',
|
||||
'127.0.0.1'
|
||||
]
|
||||
for (var i = 0, linksLength = links.length; i < linksLength; i++) {
|
||||
if (!internal_hosts.includes(links[i].hostname)) {
|
||||
links[i].target = '_blank';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- End Twitter universal website tag code -->
|
||||
|
||||
{% include "partials/header.html" %}
|
||||
<div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden">
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
</div>
|
||||
<div class="px-4 md:px-8 overflow-hidden">
|
||||
{% include "partials/footer.html" %}
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>
|
||||
<script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<style>
|
||||
.bg-dark-gradient {
|
||||
background: rgb(15,15,15);
|
||||
background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(24, 24, 24) 50%, rgba(15,15,15,1) 100%);
|
||||
}
|
||||
</style>
|
||||
103
templates/blogPage.html
Normal file
103
templates/blogPage.html
Normal file
@@ -0,0 +1,103 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% if page.taxonomies.people %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(page.taxonomies.people[0]) %}
|
||||
{% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Default page template for blog posts and basic informative markdown files -->
|
||||
|
||||
{% set split = page.content | split(pat="threefold.io") %}
|
||||
{% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if
|
||||
part is starting_with("/blog") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set
|
||||
link=link | replace(from="/blog/post" , to="/blog" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set
|
||||
rest_part=split_part | slice(start=1) | join(sep='/">' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if
|
||||
loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "threefold.io" ~ part%} {% endif
|
||||
%} {% endfor %} {% endif %} <main>
|
||||
|
||||
<div class="container mx-auto mt-16">
|
||||
|
||||
<div>
|
||||
<article class="article lg:w-4/6 mx-auto">
|
||||
<section class="post-header px-0 mb-4 border-b border-gray-600">
|
||||
<h2 class="md:text-4xl text-3xl font-medium mb-2 leading-none text-gray-100">
|
||||
{{ page.title }}
|
||||
</h2>
|
||||
|
||||
<p class="md:text-lg mb-4 text-base text-gray-300">
|
||||
{{ page.description }}
|
||||
</p>
|
||||
</section>
|
||||
<section class="post-author-list mb-3 mt-2 mx-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none pl-0 flex author-list m-0">
|
||||
<li class="author-list-item">
|
||||
{% if author %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
|
||||
replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<img src="{{author_img}}" alt="{{author.title}}" class="
|
||||
h-8
|
||||
w-8
|
||||
sm:h-10
|
||||
sm:w-10
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border border-gray-600
|
||||
" />
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pl-3 flex flex-col text-xs leading-none uppercase">
|
||||
{% if author %}
|
||||
<a href="{{author.permalink}}" class="text-gray-400 text-xs">{{ author.title }}</a>
|
||||
{% endif %}
|
||||
<p class="text-gray-400 text-xs">
|
||||
<time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago")
|
||||
}}</time><br />
|
||||
<span id="time"
|
||||
class="time"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="my-2 sharethis-inline-share-buttons"></div>
|
||||
</section>
|
||||
{% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md',
|
||||
to=page.extra.imgPath)) %}
|
||||
<img class="mb-8 mx-auto" src={{img_url}} alt="{{page.title ~ 'Picture'}}">
|
||||
<div>{{ content | safe }}</div>
|
||||
<section class="post-tags container relative py-10">
|
||||
{% for tag in page.taxonomies.tags %}
|
||||
{% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %}
|
||||
<button class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-gray-100
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-gray-100
|
||||
border-gray-600
|
||||
text-gray-400
|
||||
rounded-full
|
||||
"><a href="{{fullpath}}">{{ tag }}</a></button>
|
||||
|
||||
{% endfor %}
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
4
templates/categories/list.html
Normal file
4
templates/categories/list.html
Normal file
@@ -0,0 +1,4 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
14
templates/categories/single.html
Normal file
14
templates/categories/single.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main class="pt-12">
|
||||
|
||||
<div class="flex flex-col md:flex-row container mx-auto">
|
||||
{% include "partials/blogPosts.html" %}
|
||||
{% include "partials/blogSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
13
templates/index.html
Normal file
13
templates/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/hero/hero1.html" %}
|
||||
{% include "partials/hero/hero2.html" %}
|
||||
{% include "partials/hero/hero3.html" %}
|
||||
{% include "partials/hero/hero4.html" %}
|
||||
{% include "partials/hero/hero5.html" %}
|
||||
{% include "partials/hero/hero6.html" %}
|
||||
{% include "partials/hero/hero7.html" %}
|
||||
{% include "partials/hero/hero8.html" %}
|
||||
{% include "partials/hero/hero9.html" %}
|
||||
{% endblock content %}
|
||||
40
templates/jobPage.html
Normal file
40
templates/jobPage.html
Normal file
@@ -0,0 +1,40 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
<div class="container sm:pxi-0 mx-auto min-h-screen pt-24 mt-5">
|
||||
<div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
|
||||
<div class="w-full md:w-5/6 md:pl-8 lg:pl-0">
|
||||
<h3 class="
|
||||
uppercase
|
||||
leading-none
|
||||
text-bold
|
||||
text-gray-800
|
||||
font-black font-heading
|
||||
">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<section class="post-content mx-auto relative font-serif text-gray-700">
|
||||
<div class="mt-6 mb-8 text-gray-900">{{ page.content | safe }}</div>
|
||||
<button class="
|
||||
inline-block
|
||||
bg-green-500
|
||||
text-sm
|
||||
learn-button
|
||||
hover:bg-green-600
|
||||
px-8
|
||||
py-2
|
||||
mr-2
|
||||
my-0
|
||||
shadow
|
||||
rounded-full
|
||||
active--exact active
|
||||
">
|
||||
<a href="{{page.extra.link}}" target="_blank" aria-current="page">
|
||||
{{ page.extra.button }}
|
||||
</a>
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
8
templates/layouts/action.html
Normal file
8
templates/layouts/action.html
Normal file
@@ -0,0 +1,8 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
{% include "partials/action/video.html" %}
|
||||
{% include "partials/action/web4tools.html" %}
|
||||
{% include "partials/action/action.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
33
templates/layouts/blog.html
Normal file
33
templates/layouts/blog.html
Normal file
@@ -0,0 +1,33 @@
|
||||
{% extends "_default/base.html" %}
|
||||
<!-- blog template
|
||||
the template for displaying the blog page.
|
||||
consists of a featured blog row,
|
||||
a paginated list of posts (sorted by date),
|
||||
and a side nav for category and featured post navigation
|
||||
-->
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main>
|
||||
|
||||
<!--sets global featured variable as the most recent post with the isFeatured tag-->
|
||||
{%- set section = get_section(path="blog/_index.md") %}
|
||||
{% for page in section.pages %}
|
||||
{% if page.extra.isFeatured %}
|
||||
{%- set_global featured = page %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% if not featured %}
|
||||
{%- set_global featured = section.pages[0] %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% include "partials/featuredBlog.html" %}
|
||||
|
||||
<div class="flex flex-col md:flex-row container mx-auto my-6">
|
||||
{% include "partials/blogPosts.html" %}
|
||||
{% include "partials/blogSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
8
templates/layouts/faq.html
Normal file
8
templates/layouts/faq.html
Normal file
@@ -0,0 +1,8 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
|
||||
{% include "partials/accordion.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
80
templates/layouts/hero.html
Normal file
80
templates/layouts/hero.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<div class="bg-white">
|
||||
<header class="absolute inset-x-0 top-0 z-50">
|
||||
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
|
||||
<div class="flex lg:hidden">
|
||||
<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:gap-x-12">
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Product</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Features</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Marketplace</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Company</a>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Log in <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Mobile menu, show/hide based on menu open state. -->
|
||||
<div class="lg:hidden" role="dialog" aria-modal="true">
|
||||
<!-- Background backdrop, show/hide based on slide-over state. -->
|
||||
<div class="fixed inset-0 z-50"></div>
|
||||
<div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="#" class="-m-1.5 p-1.5">
|
||||
<span class="sr-only">Your Company</span>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600" alt="">
|
||||
</a>
|
||||
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
|
||||
<span class="sr-only">Close menu</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 flow-root">
|
||||
<div class="-my-6 divide-y divide-gray-500/10">
|
||||
<div class="space-y-2 py-6">
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Product</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Features</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Marketplace</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Company</a>
|
||||
</div>
|
||||
<div class="py-6">
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Log in</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
|
||||
Announcing our next round of funding. <a href="#" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Data to enrich your online business</h1>
|
||||
<p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
18
templates/layouts/horizontal_section.html
Normal file
18
templates/layouts/horizontal_section.html
Normal file
@@ -0,0 +1,18 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% import "macros.html" as macros %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main class="lg:mt-6">
|
||||
<div class="flex">
|
||||
<div class="w-4/6 pr-20">
|
||||
{{ section.content | safe}}
|
||||
</div>
|
||||
<div class="w-2/6 pl-20">
|
||||
{{ macros::page_list(item_type="page-box", group=false) }}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
33
templates/layouts/newsroom.html
Normal file
33
templates/layouts/newsroom.html
Normal file
@@ -0,0 +1,33 @@
|
||||
{% extends "_default/base.html" %}
|
||||
<!-- News template
|
||||
the template for displaying the news page.
|
||||
consists of a featured news row,
|
||||
a paginated list of posts (sorted by date),
|
||||
and a side nav for category and featured post navigation
|
||||
-->
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main>
|
||||
|
||||
<!--sets global featured variable as the most recent post with the isFeatured tag-->
|
||||
{%- set section = get_section(path="newsroom/_index.md") %}
|
||||
{% for page in section.pages %}
|
||||
{% if page.extra.isFeatured %}
|
||||
{%- set_global featured = page %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% if not featured %}
|
||||
{%- set_global featured = section.pages[0] %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% include "partials/featuredNews.html" %}
|
||||
|
||||
<div class="flex flex-col md:flex-row container mx-auto my-6">
|
||||
{% include "partials/newsPosts.html" %}
|
||||
{% include "partials/newsSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
18
templates/layouts/partners.html
Normal file
18
templates/layouts/partners.html
Normal file
@@ -0,0 +1,18 @@
|
||||
{% extends "_default/base.html" %}
|
||||
<!-- partners template
|
||||
the template for displaying the partners page.
|
||||
consists of a featured partners row,
|
||||
a paginated list of posts (sorted by date),
|
||||
and a side nav for category and featured post navigation
|
||||
-->
|
||||
{% block content %}
|
||||
<main>
|
||||
<!--sets global featured variable as the most recent post with the isFeatured tag-->
|
||||
{%- set section = get_section(path="partners/_index.md") %}
|
||||
{% include "partials/intro.html" %}
|
||||
<div class="flex flex-col md:flex-row container mx-auto my-8">
|
||||
{% include "partials/partnersCards.html" %}
|
||||
{% include "partials/partnersSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
83
templates/layouts/people.html
Normal file
83
templates/layouts/people.html
Normal file
@@ -0,0 +1,83 @@
|
||||
{% extends "_default/base.html" %}
|
||||
<!-- partners template
|
||||
the template for displaying the partners page.
|
||||
consists of a featured partners row,
|
||||
a paginated list of posts (sorted by date),
|
||||
and a side nav for category and featured post navigation
|
||||
-->
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main>
|
||||
|
||||
<!--sets global featured variable as the most recent post with the isFeatured tag-->
|
||||
{%- set section = get_section(path="people/_index.md") %}
|
||||
<div class="container mx-auto">
|
||||
{# {% include "partials/filter_bar.html" %} #}
|
||||
<div class="text-center main-title px-0 md:w-full">
|
||||
<h1
|
||||
class="tracking-tight text-5xl text-left sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
|
||||
>
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
</h1>
|
||||
<div>
|
||||
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none">
|
||||
{%- for page in paginator.pages %}
|
||||
{% if "Engineering" == "Engineering"%}
|
||||
{% include "partials/personCard.html" %}
|
||||
{%endif%} {%- endfor %}
|
||||
</div>
|
||||
<hr class="mt-6" />
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
6
templates/layouts/signup.html
Normal file
6
templates/layouts/signup.html
Normal file
@@ -0,0 +1,6 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/form.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
8
templates/layouts/solutions.html
Normal file
8
templates/layouts/solutions.html
Normal file
@@ -0,0 +1,8 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/solutions/hero.html" %}
|
||||
{% include "partials/solutions/what.html" %}
|
||||
{% include "partials/solutions/portfolio.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% endblock content %}
|
||||
10
templates/layouts/what.html
Normal file
10
templates/layouts/what.html
Normal file
@@ -0,0 +1,10 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
{% include "partials/feature/feature1.html" %}
|
||||
{% include "partials/feature/feature2.html" %}
|
||||
{% include "partials/feature/feature3.html" %}
|
||||
{% include "partials/feature/feature4.html" %}
|
||||
{% include "partials/feature/feature5.html" %}
|
||||
{% include "partials/feature/feature6.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
{% endblock content %}
|
||||
12
templates/layouts/why.html
Normal file
12
templates/layouts/why.html
Normal file
@@ -0,0 +1,12 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/why/hero.html" %}
|
||||
{% include "partials/why/reason.html" %}
|
||||
{% include "partials/why/timeline.html" %}
|
||||
{% include "partials/why/matters.html" %}
|
||||
{% include "partials/why/values.html" %}
|
||||
{% include "partials/why/team.html" %}
|
||||
{% include "partials/home/cta.html" %}
|
||||
|
||||
{% endblock content %}
|
||||
14
templates/list.html
Normal file
14
templates/list.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Page template for blog posts and basic informative markdown files -->
|
||||
<h1 class="title">
|
||||
{{ section.title }}
|
||||
</h1>
|
||||
<ul>
|
||||
{% for page in section.pages %}
|
||||
<li>{{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }} • <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p>This comes from /templates/_default/list.html.</p>
|
||||
{% endblock content %}
|
||||
39
templates/macros.html
Normal file
39
templates/macros.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!-- Takes the path of a page and checks if it exists
|
||||
- if exists sets the page
|
||||
-->
|
||||
{% macro get_if_exists(path, type="text") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(person.name) %}
|
||||
{% set page = get_page(path=page_path) %}
|
||||
{% endif %}
|
||||
{{ page }}
|
||||
{% endmacro get_if_exists %}
|
||||
|
||||
{% macro page_list(type="text") %}
|
||||
<div id="list"></div>
|
||||
{% if section.extra.group_pages_by %}
|
||||
<div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center">
|
||||
{% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %}
|
||||
{% set roles = taxonomy.items %}
|
||||
{% for role in roles %}
|
||||
<div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72">
|
||||
{% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %}
|
||||
<img src="{{icon_path}}" alt="role category icon" class="h-10 my-4">
|
||||
{% set path = role.name | slugify %}
|
||||
{% set fullpath = "/roles/" ~ path %}
|
||||
<a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a>
|
||||
{% for page in role.pages %}
|
||||
{% include "partials/pageBox.html"%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% for page in section.pages %}
|
||||
{{page}}
|
||||
{% include "partials/pageBox.html"%}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endmacro page_list %}
|
||||
|
||||
|
||||
4
templates/memberships/list.html
Normal file
4
templates/memberships/list.html
Normal file
@@ -0,0 +1,4 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
88
templates/memberships/single.html
Normal file
88
templates/memberships/single.html
Normal file
@@ -0,0 +1,88 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% if not paginator %}
|
||||
{% set paginator = section %}
|
||||
{% endif %}
|
||||
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{% if path_array | length < 3%}
|
||||
{% set category = "All" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-16 mx-auto max-w-screen-lg px-6 lg:px-8">
|
||||
{% include "partials/filter_bar.html" %}
|
||||
<div class="text-center main-title px-0 md:w-full">
|
||||
<div class="my-4 flex flex-col items-start">
|
||||
<h2 class="tracking-tight text-left text-3xl lg:text-5xl fw-500 leading-snug font-normal">
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
</h2>
|
||||
<div class="text-xl text-gray-800">
|
||||
{{ paginator.total_pages ~ " People"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div>
|
||||
<div class="mx-auto mt-4 grid max-w-2xl grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 xl:grid-cols-4">
|
||||
{%- for page in paginator.pages %}
|
||||
{% include "partials/person_card.html" %}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
<hr class="mt-6" />
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
4
templates/news-category/list.html
Normal file
4
templates/news-category/list.html
Normal file
@@ -0,0 +1,4 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
14
templates/news-category/single.html
Normal file
14
templates/news-category/single.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% extends "index.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main class="pt-12">
|
||||
|
||||
<div class="flex flex-col md:flex-row container mx-auto">
|
||||
{% include "partials/newsPosts.html" %}
|
||||
{% include "partials/newsSidebar.html" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
147
templates/newsPage.html
Normal file
147
templates/newsPage.html
Normal file
@@ -0,0 +1,147 @@
|
||||
{% extends "_default/base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% set split = page.content | split(pat="threefold.io") %}
|
||||
{% if split | length < 2 %}
|
||||
{% set content = page.content %}
|
||||
{% else %}
|
||||
{% set content = "" %}
|
||||
{% for part in split %}
|
||||
{% if part is starting_with("/blog") %}
|
||||
{% set split_part = part | split(pat='/">') %}
|
||||
{% set link = split_part[0] %}
|
||||
{% set link = link | replace(from="/blog/post", to="/blog") %}
|
||||
{% set link = link | replace(from="_", to="-") %}
|
||||
{% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
|
||||
{% set part = link ~ '/">' ~ rest_part %}
|
||||
{% endif %}
|
||||
{% if part is starting_with("/people") %}
|
||||
{% set split_part = part | split(pat='/">') %}
|
||||
{% set link = split_part[0] %}
|
||||
{% set link = link | replace(from="_", to="-") %}
|
||||
{% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
|
||||
{% set part = link ~ '/">' ~ rest_part %}
|
||||
{% endif %}
|
||||
{% if loop.first %}
|
||||
{% set_global content = part %}
|
||||
{% else %}
|
||||
{% set_global content = content ~ "threefold.io" ~ part %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Default page template for news posts and basic informative markdown files -->
|
||||
<main class="container mx-auto mt-16">
|
||||
|
||||
<div class="article lg:w-4/6 mx-auto">
|
||||
|
||||
<div>
|
||||
<section class="post-header px-0 mb-4 border-b border-gray-600">
|
||||
<h2 class="md:text-4xl text-3xl font-medium mb-2 leading-none text-gray-100">
|
||||
{{ page.title }}
|
||||
</h2>
|
||||
<p class="md:text-lg mb-4 text-base text-gray-300">
|
||||
{{ page.description }}
|
||||
</p>
|
||||
</section>
|
||||
<section class="post-author-list mb-3 mt-2 mx-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none pl-0 flex author-list m-0">
|
||||
{% if page.taxonomies.people %}
|
||||
{% for person in page.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ person ~ '/index.md' %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(person) %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<li class="author-list-item">
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}">
|
||||
<img src="{{author_img}}" alt="{{ author.title }}" class="
|
||||
w-8
|
||||
h-8
|
||||
sm:h-10
|
||||
sm:w-10
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border border-gray-600
|
||||
" />
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pl-3 flex flex-col text-xs leading-none uppercase">
|
||||
<p>
|
||||
{% if page.taxonomies.people %}
|
||||
{% for person in page.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ person ~ '/index.md' %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(person) %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<span class="text-xs leading-none uppercase">
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="hover:underline text-gray-400">{{ author.title }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</p>
|
||||
<p class="text-gray-400 text-xs leading-none uppercase">
|
||||
<time datetime="{{page.date}}">
|
||||
{{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
|
||||
</time>
|
||||
{# · {{ page.news.timeToRead }} min read #}
|
||||
</p>
|
||||
</div>
|
||||
<div class="my-2 ml-auto sharethis-inline-share-buttons"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="post-image mx-auto w-full">
|
||||
{% if page.extra.imgPath %}
|
||||
{% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
|
||||
<img src="{{img_url}}" />
|
||||
{%endif%}
|
||||
</section>
|
||||
|
||||
<div class="py-12">
|
||||
<section class="
|
||||
post-content
|
||||
container
|
||||
mx-auto
|
||||
relative
|
||||
font-serif
|
||||
text-gray-300
|
||||
">
|
||||
<div class="post-content-text text-xl">{{ content | safe }}</div>
|
||||
</section>
|
||||
|
||||
<section class="post-tags container mx-auto relative py-10">
|
||||
{% for tag in page.taxonomies.tags %}
|
||||
{% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %}
|
||||
<a href="{{fullpath}}" class="
|
||||
text-xs
|
||||
bg-transparent
|
||||
hover:text-gray-100
|
||||
py-2
|
||||
px-4
|
||||
mr-2
|
||||
border
|
||||
hover:border-gray-100
|
||||
border-gray-600
|
||||
text-gray-400
|
||||
rounded-full
|
||||
">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
252
templates/oldheader.html
Normal file
252
templates/oldheader.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
-->
|
||||
<!-- This example requires Tailwind CSS v1.4.0+ -->
|
||||
<script type="text/javascript">
|
||||
|
||||
var displayedMenu = "";
|
||||
var hamburgerShown = false;
|
||||
let width = screen.width;
|
||||
var isMobile = width < 1024;
|
||||
|
||||
function toggleMenu(button) {
|
||||
if (displayedMenu === button.id.split("-")[0]) {
|
||||
button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
|
||||
hideMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
|
||||
displayedMenu = "";
|
||||
}
|
||||
else {
|
||||
showMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
|
||||
button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
|
||||
displayedMenu = button.id.split("-")[0]
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(button) {
|
||||
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
|
||||
if (button.id.indexOf("menu") !== -1 ) {
|
||||
toggleMenu(button)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleHamburger() {
|
||||
if (hamburgerShown) {
|
||||
hideHamburger();
|
||||
hamburgerShown = false;
|
||||
}
|
||||
else {
|
||||
showHamburger();
|
||||
hamburgerShown = true;
|
||||
}
|
||||
}
|
||||
|
||||
function showMenu(menuName) {
|
||||
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuElement = document.getElementById(menuId)
|
||||
menuElement.className = menuElement.className.replace(" hidden" , "");
|
||||
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
|
||||
}
|
||||
|
||||
function hideMenu(menuName) {
|
||||
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
|
||||
var menuElement = document.getElementById(menuId)
|
||||
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
|
||||
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
|
||||
}
|
||||
|
||||
function showHamburger() {
|
||||
document.getElementById('header-container').className = "overflow-hidden";
|
||||
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
|
||||
document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
}
|
||||
|
||||
function hideHamburger() {
|
||||
document.getElementById('header-container').className = "";
|
||||
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
|
||||
document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
if (displayedMenu !== "") { hideMenu(displayedMenu); }
|
||||
}
|
||||
|
||||
window.onload = function(){
|
||||
let elements = document.getElementsByTagName("button");
|
||||
let buttons = [...elements]
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener( 'click', function() { handleClick(button) });
|
||||
})
|
||||
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
|
||||
}
|
||||
</script>
|
||||
<!-- set variables used for header template -->
|
||||
{% set section = get_section(path="_index.md") %}
|
||||
{% set subsections_str = section.subsections | join(sep=" ") %}
|
||||
{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
|
||||
|
||||
{% if "header/_index.md" in subsections_str %}
|
||||
{% set section = get_section(path="header/_index.md") %}
|
||||
{% set header_items = section.content | safe | split(pat="
|
||||
<li>
|
||||
") %}
|
||||
{% include "partials/header_custom.html" %}
|
||||
{% else %}
|
||||
<header id="header-container">
|
||||
{% set header_class = config.extra.header_class | default(value='') %}
|
||||
<div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
|
||||
<div class="relative z-50 shadow">
|
||||
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
||||
<div>
|
||||
<a href="/" class="flex">
|
||||
<img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
{% for page in section.pages %}
|
||||
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
|
||||
<a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
||||
{{page.title}}
|
||||
</a>
|
||||
<div class="relative"></div>
|
||||
{% endfor %}
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set button_id = subsection ~ "-menu-btn" | slugify %}
|
||||
<div class="relative">
|
||||
<button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ subsection }}</span>
|
||||
<div class="-rotate-90 transition-transform">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
fill="#000000"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set submenu_id = subsection ~ "-menu" | slugify %}
|
||||
<nav>
|
||||
<div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
|
||||
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
|
||||
{{subsection | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endfor %}
|
||||
<!--
|
||||
Mobile menu, show/hide based on mobile menu state.
|
||||
|
||||
Entering: "duration-200 ease-out"
|
||||
From: "opacity-0 scale-95"
|
||||
To: "opacity-100 scale-100"
|
||||
Leaving: "duration-100 ease-in"
|
||||
From: "opacity-100 scale-100"
|
||||
To: "opacity-0 scale-95"
|
||||
-->
|
||||
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||
<div>
|
||||
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
|
||||
<nav class="flex flex-col justify-around pb-12">
|
||||
{% for page in section.pages %}
|
||||
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
|
||||
<a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{page.title}}
|
||||
</a>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
{% for subsection in section.subsections %}
|
||||
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
|
||||
{% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
|
||||
{% set menu_id = subsection ~ "-mobile-menu" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
<span>{{ subsection }}</span>
|
||||
<div class="-rotate-90 transition-transform">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
fill="#000000"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
{{ subsection | safe }}
|
||||
</div>
|
||||
<hr>
|
||||
{% endfor %}
|
||||
{% if "footer/_index.md" in subsections_str %}
|
||||
{% set section = get_section(path="footer/_index.md")%}
|
||||
<div class="mx-8 mt-8">
|
||||
<div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<img class="w-48 h-auto" src="{{logo_path}}" alt="Company name">
|
||||
<p class="text-gray-500 text-base leading-6 ">
|
||||
{{section.description}}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% endif %}
|
||||
10
templates/page.html
Normal file
10
templates/page.html
Normal file
@@ -0,0 +1,10 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});</script>
|
||||
{{page.content | safe}}
|
||||
|
||||
</main> {% endblock content %}
|
||||
48
templates/partials/accordion.html
Normal file
48
templates/partials/accordion.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% set tfFaq = get_section(path="faq/_index.md") %}
|
||||
{% set farmFaq = get_section(path="farmfaq/_index.md") %}
|
||||
{% set tftFaq = get_section(path="tftfaq/_index.md") %}
|
||||
|
||||
{% if current_path == '/faq/' %}
|
||||
<h2 class="text-center mt-10">{{ tfFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in tfFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/farmfaq/' %}
|
||||
<h2 class="text-center mt-10">{{ farmFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in farmFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% elif current_path == '/tftfaq/' %}
|
||||
<h2 class="text-center mt-10">{{ tftFaq.title }}</h2>
|
||||
<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
|
||||
{% for page in tftFaq.pages %}
|
||||
<details class="p-4 rounded-lg">
|
||||
<summary class="font-semibold">{{ page.title }}</summary>
|
||||
<div class="mt-3">
|
||||
<p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
|
||||
</div>
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<style>
|
||||
a {
|
||||
color: #4ec48f
|
||||
}
|
||||
</style>
|
||||
90
templates/partials/action/action.html
Normal file
90
templates/partials/action/action.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
||||
<!-- Left Content -->
|
||||
<div class="lg:col-span-7">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">When 3 Becomes 4</h1>
|
||||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
|
||||
The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
|
||||
Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
|
||||
For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Blockquote -->
|
||||
<div class="lg:col-span-5">
|
||||
<figure class=" mt-6 pl-8">
|
||||
<blockquote class=" text-2xl text-white fade-in font-semibold ">
|
||||
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">We believe actions are more important than words. <br><br>
|
||||
This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
|
||||
</p>
|
||||
</blockquote>
|
||||
<br>
|
||||
<a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left-width: 2px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem; /* Adjust the gap size as needed */
|
||||
}
|
||||
|
||||
</style>
|
||||
57
templates/partials/action/announcements.html
Normal file
57
templates/partials/action/announcements.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<div class="bg-transparent fade-in pb-24 flex items-center justify-center">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
|
||||
<p class="fade-in mx-auto text-pretty lg:text-2xl leading-tight text-xl font-normal text-gray-200">Announcements</p>
|
||||
<p class="fade-in mx-auto text-pretty lg:text-5xl leading-tight text-4xl font-normal text-white">Coming Soon on 12.12.24</p>
|
||||
<p class="max-w-4xl mt-4 fade-in mx-auto text-pretty lg:text-xl mb-12 leading-tight text-lg font-light text-gray-200"></p>
|
||||
|
||||
</div>
|
||||
<div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-2">
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">A Roadmap to <br>Web4</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Phone</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Router</h2>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Node</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// JavaScript to control the blinking effect
|
||||
const items = document.querySelectorAll('.grid-item');
|
||||
let currentIndex = 0;
|
||||
|
||||
function blinkItem() {
|
||||
// Remove the 'blink' class from all items
|
||||
items.forEach(item => item.classList.remove('blink'));
|
||||
|
||||
// Add the 'blink' class to the current item
|
||||
items[currentIndex].classList.add('blink');
|
||||
|
||||
// Move to the next item in a clockwise manner
|
||||
currentIndex = (currentIndex + 1) % items.length;
|
||||
}
|
||||
|
||||
// Start the blinking effect
|
||||
setInterval(blinkItem, 1000); // Change every second
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS for the blinking effect */
|
||||
.blink {
|
||||
animation: blink-animation 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-animation {
|
||||
0%, 100% { background-color: rgba(255, 255, 255, 0.1); }
|
||||
50% { background-color: rgba(255, 255, 255, 0.5); }
|
||||
}
|
||||
</style>
|
||||
8
templates/partials/action/banner.html
Normal file
8
templates/partials/action/banner.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="h-screen flex flex-col justify-center items-center">
|
||||
<div class="">
|
||||
<img
|
||||
class="mx-auto"
|
||||
src="/images/mycel2.gif"
|
||||
alt="TF">
|
||||
</div>
|
||||
</div>
|
||||
53
templates/partials/action/cta.html
Normal file
53
templates/partials/action/cta.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<div class="bg-transparent">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 class="lg:text-balance leading-tight lg:text-left lg:items-start items-center text-center font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Stay tuned for 12.12.24<br/>
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
<a href="https://t.me/threefoldnews" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Telegram
|
||||
</a>
|
||||
<a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Newsletter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg-black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards;
|
||||
}
|
||||
|
||||
h2 {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.blockquote::before {
|
||||
content: open-quote;
|
||||
font-size: 4rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: -1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
83
templates/partials/action/hero.html
Normal file
83
templates/partials/action/hero.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<div class="flex bg-transparent">
|
||||
<div class="max-w-2xl p-8 mx-auto text-center">
|
||||
<p class="mx-auto mt-6 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
We believe actions are more important than words. <br>
|
||||
This page is in black & white,
|
||||
to let YOU be the color of the future of the internet.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
Web4
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
Web4 opens the door for Machines & Humans to create together
|
||||
a new form of Intelligence with respect for the Planet & People.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
Augmented Collective Intelligence
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
ThreeFold has been working on Web4 for more than 10 years,
|
||||
ready to go public <span class="font-semibold">12.12.2024</span>
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
An Internet created by Everyone for Everyone
|
||||
</h2>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
The Internet is a Trillion USD business.
|
||||
We want to make sure this Internet is built and owned by all of us.
|
||||
</p>
|
||||
|
||||
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
|
||||
Register for our online launch event 12-12-2024.
|
||||
</p>
|
||||
|
||||
<h2 class="mt-12 text-balance font-semibold tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
|
||||
When 3 Becomes 4
|
||||
</h2>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
||||
<a href="" class="fade-in fade-in-delay rounded-2xl bg-white px-8 py-2.5 text-base font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">
|
||||
12.12.24
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* Fade-in animation */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Fade-in keyframe */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// JavaScript to add 'visible' class after loading
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
fadeInElements.forEach((element, index) => {
|
||||
// Adding a delay for each fade-in effect (increasing delay with index)
|
||||
setTimeout(() => {
|
||||
element.classList.add('visible');
|
||||
}, index * 1000); // 1000ms delay between each element
|
||||
});
|
||||
});
|
||||
</script>
|
||||
40
templates/partials/action/tools.html
Normal file
40
templates/partials/action/tools.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<div class="bg-transparent py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6">
|
||||
<div class="mx-auto w-full max-w-3xl lg:mx-0">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock the Web4 Revolution with ThreeFold</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
|
||||
<div class="mt-8 flex gap-x-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Phone</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Router</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Nodes</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
|
||||
<div class="p-10">
|
||||
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">TF Genie</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p>
|
||||
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
109
templates/partials/action/video.html
Normal file
109
templates/partials/action/video.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<div class="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
|
||||
<!-- Main Heading -->
|
||||
<h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white">
|
||||
Join the Web4 Revolution
|
||||
</h2>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p class="mx-auto mt-6 max-w-xl text-pretty text-xl lg:text-2xl font-light text-gray-200 fade-in fade-in-delay">
|
||||
Join us on our journey. Watch the video below and scroll down to learn how you can participate.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Embed YouTube Video -->
|
||||
<div class="mt-8 flex justify-center">
|
||||
<div class="responsive-iframe">
|
||||
<iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player"
|
||||
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action Button -->
|
||||
<div class="mt-12 fade-in flex items-center justify-center gap-x-4">
|
||||
<a href="/signup" target="_blank"
|
||||
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">
|
||||
Take the Next Step
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Fade-in keyframe */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive iframe for YouTube video */
|
||||
.responsive-iframe {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px; /* Max width for large screens */
|
||||
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.responsive-iframe iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Ensure content aligns properly */
|
||||
.flex.justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Responsive text and spacing */
|
||||
.text-pretty {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.text-pretty {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Style for the button */
|
||||
.blinking-effect {
|
||||
animation: blink 1.5s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// JavaScript to add 'visible' class after loading
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
fadeInElements.forEach((element, index) => {
|
||||
// Adding a delay for each fade-in effect (increasing delay with index)
|
||||
setTimeout(() => {
|
||||
element.classList.add('visible');
|
||||
}, index * 1000); // 1000ms delay between each element
|
||||
});
|
||||
});
|
||||
</script>
|
||||
41
templates/partials/action/web4tools.html
Normal file
41
templates/partials/action/web4tools.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<div class="overflow-hidden bg-transparent py-16 lg:py-24">
|
||||
<div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
|
||||
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
|
||||
</div>
|
||||
<div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
|
||||
<!-- Image on the left and text on the right -->
|
||||
<div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
|
||||
<img class="fade-in blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- Text on the left -->
|
||||
<div class="relative p-4"> <!-- Add padding here for all sides -->
|
||||
<div class="gap-y-4">
|
||||
<div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Phone</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and seamlessly integrate with the ThreeFold Grid.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Bot</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3node" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Router</dt>
|
||||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.</dd>
|
||||
<a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
60
templates/partials/applicationForm.html
Normal file
60
templates/partials/applicationForm.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<form action="#" method="POST">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<h3 class="text-black text-lg">Application</h3>
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<label for="company-website" class="block text-sm font-medium text-gray-700"> Website </label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> http:// </span>
|
||||
<input type="text" name="company-website" id="company-website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="about" class="block text-sm font-medium text-gray-700"> About </label>
|
||||
<div class="mt-1">
|
||||
<textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">Brief description for your profile. URLs are hyperlinked.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700"> Photo </label>
|
||||
<div class="mt-1 flex items-center">
|
||||
<span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
|
||||
<svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700"> Resume </label>
|
||||
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||
<div class="space-y-1 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<div class="flex text-sm text-gray-600">
|
||||
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
|
||||
<span>Upload a file</span>
|
||||
<input id="file-upload" name="file-upload" type="file" class="sr-only">
|
||||
</label>
|
||||
<p class="pl-1">or drag and drop</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">PDF up to 10MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
70
templates/partials/blogPosts.html
Normal file
70
templates/partials/blogPosts.html
Normal file
@@ -0,0 +1,70 @@
|
||||
{% block content %}
|
||||
|
||||
<div class="text-center main-title px-0 md:w-2/3 mx-8 md:mx-12">
|
||||
<h2
|
||||
class="tracking-tight text-left text-2xl md:text-4xl fw-500 leading-snug font-medium"
|
||||
>
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
ThreeFold stories and project info
|
||||
{% if taxonomy == "categories" %} -
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
{% endif %}
|
||||
</h2>
|
||||
<div>
|
||||
<div class="mt-3 grid gap-5 max-w-lg mx-auto md:grid-cols-2 lg:grid-cols-3 lg:max-w-none">
|
||||
{%- for post in paginator.pages %}
|
||||
{% if not post.extra.hidden %}
|
||||
{% include "partials/postCard.html" %}
|
||||
{%endif%} {%- endfor %}
|
||||
</div>
|
||||
<hr class="my-10 border-gray-700"/>
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
38
templates/partials/blogSidebar.html
Normal file
38
templates/partials/blogSidebar.html
Normal file
@@ -0,0 +1,38 @@
|
||||
|
||||
<div class="mx-8 md:mx-4 flex flex-col">
|
||||
<div class="flex flex-col mb-12">
|
||||
<h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4"> FILTER POSTS BY</h4>
|
||||
<a id="all" class="mb-2 text-white font-normal" href="/blog">All</a>
|
||||
{% set taxonomy = get_taxonomy(kind="categories") %}
|
||||
{% set categories = taxonomy.items %}
|
||||
{% for category in categories %}
|
||||
{% set path = category.name | slugify %}
|
||||
{% set fullpath = "/categories/" ~ path %}
|
||||
<a id="{{path}}" class="mb-2 text-gray-100 font-normal" href={{fullpath}}> {{category.name}} </a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% set section = get_section(path="blog/_index.md")%}
|
||||
|
||||
<div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
|
||||
<h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-6"> FEATURED POSTS</h4>
|
||||
|
||||
{% for page in section.pages %}
|
||||
{% if page.extra.isFeatured %}
|
||||
<a class="mb-3 text-gray-400" href={{page.permalink}}>{{ page.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setActiveCategory() {
|
||||
let activeCategory = window.location.pathname.split("/")[2]
|
||||
if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
|
||||
else { activeLink = document.getElementById(activeCategory)}
|
||||
activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
|
||||
}
|
||||
|
||||
setActiveCategory()
|
||||
</script>
|
||||
16
templates/partials/cta.html
Normal file
16
templates/partials/cta.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<div class="bg-transparent">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 class="lg:text-balance text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Build the <br>Internet of Tomorrow, <br>Today.
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
<a href="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Dive Deeper
|
||||
</a>
|
||||
<a href="/action" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
39
templates/partials/feature/feature1.html
Normal file
39
templates/partials/feature/feature1.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<div class="overflow-hidden py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||||
<div class="lg:pt-4 lg:pr-8">
|
||||
<div class="lg:max-w-lg">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature1.html</h2>
|
||||
<p class="mt-6 mt-8 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
✓ Push to deploy.
|
||||
</dt>
|
||||
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
✓ SSL certificates.
|
||||
</dt>
|
||||
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
✓ Database backups.
|
||||
</dt>
|
||||
<dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32">
|
||||
<div class="max-w-3xl flex-none lg:max-w-5xl">
|
||||
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md bg-white/5 shadow-2xl ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
64
templates/partials/feature/feature2.html
Normal file
64
templates/partials/feature/feature2.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<div class="py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature2.html</h2>
|
||||
<p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden pt-16">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" class="mb-[-12%] rounded-xl ring-1 shadow-2xl ring-white/10" width="2432" height="1442">
|
||||
<div class="relative" aria-hidden="true">
|
||||
<div class="absolute -inset-x-20 bottom-0 bg-linear-to-t from-gray-900 pt-[7%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
|
||||
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
|
||||
✓ Push to deploy.
|
||||
</dt>
|
||||
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
|
||||
✓ SSL certificates.
|
||||
</dt>
|
||||
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
|
||||
✓ Simple queues.
|
||||
</dt>
|
||||
<dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
|
||||
✓ Advanced security.
|
||||
</dt>
|
||||
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
|
||||
✓ Powerful API.
|
||||
</dt>
|
||||
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-white">
|
||||
|
||||
✓ Database backups.
|
||||
</dt>
|
||||
<dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
50
templates/partials/feature/feature3.html
Normal file
50
templates/partials/feature/feature3.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<div class=" py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature3.html</h2>
|
||||
<p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white">
|
||||
|
||||
✓ Push to deploy
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
|
||||
<p class="flex-auto text-gray-200">Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu.</p>
|
||||
<p class="mt-6">
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white">
|
||||
|
||||
✓ SSL certificates
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
|
||||
<p class="flex-auto text-gray-200">Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.</p>
|
||||
<p class="mt-6">
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white">
|
||||
|
||||
✓ Simple queues
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
|
||||
<p class="flex-auto text-gray-200">Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod.</p>
|
||||
<p class="mt-6">
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
85
templates/partials/feature/feature4.html
Normal file
85
templates/partials/feature/feature4.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<div class="bg-transparent">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
||||
<div class="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white sm:text-5xl">This is Feature4.html
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-6">
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Communicate securely</dt>
|
||||
<dd class="mt-1 font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Store effortlessly</dt>
|
||||
<dd class="mt-1 ont-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Restore authenticity</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Unlockinsights</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ Streamline interactions</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="">
|
||||
<dt class="font-medium text-gray-200">✓ digital presence</dt>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the slow blinking animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
</style>
|
||||
152
templates/partials/feature/feature5.html
Normal file
152
templates/partials/feature/feature5.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<div class="bg-transparent pt-12 pb-6">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">This is feature5.html</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="lg:pb-24 pb-12 pt-12 bg-transparent">
|
||||
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- 2ND ROW-->
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/deploy/node_finder.html?highlight=gateway%20nodes#gateway-nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- 3RD ROW-->
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
|
||||
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
|
||||
FEATURE
|
||||
</dt>
|
||||
<dd class="mt-2 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.</p>
|
||||
<p class="mt-6">
|
||||
<a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
39
templates/partials/feature/feature6.html
Normal file
39
templates/partials/feature/feature6.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<div class="overflow-hidden py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||||
<div class="lg:ml-auto lg:pt-4 lg:pl-4">
|
||||
<div class="lg:max-w-lg">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature6.html</h2>
|
||||
<p class="mt-6 text-lg/8 text-gray-200 font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
||||
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-200 lg:max-w-none">
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-gray-200">
|
||||
Push to deploy.
|
||||
</dt>
|
||||
<dd class="inline text-gray-200 font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-gray-200">
|
||||
|
||||
SSL certificates.
|
||||
</dt>
|
||||
<dd class="inline text-gray-200 font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
|
||||
</div>
|
||||
<div class="relative pl-9">
|
||||
<dt class="inline font-semibold text-gray-200">
|
||||
|
||||
Database backups.
|
||||
</dt>
|
||||
<dd class="inline text-gray-200 font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start justify-end lg:order-first">
|
||||
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="Product screenshot" class="w-[48rem] max-w-none rounded-xl sm:w-[57rem]" width="1220" height="542">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
53
templates/partials/featuredBlog.html
Normal file
53
templates/partials/featuredBlog.html
Normal file
@@ -0,0 +1,53 @@
|
||||
{% if featured.taxonomies.people %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(featured.taxonomies.people[0]) %}
|
||||
{% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<body>
|
||||
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8 relative mt-12 md:mt-10 items-center container mx-auto">
|
||||
<div class="relative my-8 w-full md:w-auto mx-3 lg:mx-12">
|
||||
<h3 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4">FEATURED POST</h3>
|
||||
<a href={{featured.permalink}}>
|
||||
<h2
|
||||
class="text-2xl main-title md:text-4xl fw-500 text-gray-50 leading-snug font-medium">
|
||||
{{ featured.title }}
|
||||
</h2>
|
||||
<p class="mt-2 text-base font-normal text-gray-50 text-left">
|
||||
{{ featured.description }}
|
||||
</p>
|
||||
</a>
|
||||
<h4 class="my-2 text-sm not-italic font-light leading-6 text-gray-100">
|
||||
{{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
|
||||
{% for author in featured.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ author ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize text-gray-200"> <img
|
||||
src="{{ author_img }}" alt="{{ author.title }}" class="
|
||||
inline-flex
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border border-gray-400
|
||||
" /> {{ author.title }}</a>
|
||||
{% endfor %}
|
||||
</h4>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative lg:mt-0 max-w-full">
|
||||
<img class="relative rounded mx-auto max-h-64 p-2 border border-gray-600" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 container border-gray-600 mx-auto">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
45
templates/partials/featuredNews.html
Normal file
45
templates/partials/featuredNews.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<body>
|
||||
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8 relative mt-12 md:mt-10 items-center container mx-auto">
|
||||
<div class="relative my-8 w-full md:w-auto mx-3 lg:mx-12">
|
||||
<h3 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4">FEATURED NEWS</h3>
|
||||
<a href={{featured.permalink}}>
|
||||
<h2
|
||||
class="text-2xl main-title md:text-4xl fw-500 text-gray-50 font-medium">
|
||||
{{ featured.title }}
|
||||
</h2>
|
||||
<p class="mt-2 text-base font-normal text-gray-50 text-left">
|
||||
{{ featured.description }}
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<h4 class="my-2 text-sm not-italic font-light leading-6 text-gray-100">
|
||||
{{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
|
||||
{% for author in featured.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ author ~ '/index.md' %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize text-gray-200"> <img
|
||||
src="{{ author_img }}" alt="{{ author.title }}" class="
|
||||
inline-flex
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border-2 border-white
|
||||
" /> {{ author.title }}</a>
|
||||
{% endfor %}
|
||||
</h4>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative lg:mt-0 max-w-full">
|
||||
{% if featured.extra.imgPath %}
|
||||
<img class="relative rounded mx-auto max-h-64 p-2 border-2 border-gray-100" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-6 container border-gray-600 mx-auto">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
48
templates/partials/filter_bar.html
Normal file
48
templates/partials/filter_bar.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{% if path_array | length < 4%}
|
||||
{% set category = "All" %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
<div class="left-0 z-50 border border-gray-200 bg-gray-100 my-6 w-full rounded-md">
|
||||
<header class="flex flex-wrap container mx-auto pb-0 sm:px-0 transition-all transition-500">
|
||||
<div class="flex justify-between px-4 sm:p-0">
|
||||
<div class="ml-8 inline-flex flex-shrink-0">
|
||||
<span class="flex text-base items-center capitalize">
|
||||
Filter:
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="inline-flex md:order-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
|
||||
<ul class="list-none sm:flex justify-left capitalize transition-all transition-500 ">
|
||||
<li class="flex items-center">
|
||||
<div class="relative">
|
||||
<button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link">
|
||||
<span class="text-base capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
|
||||
<svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
<div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
|
||||
<div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700">
|
||||
<a data-v-21fd5df0="" href="/people" class="text-gray-700 cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
All
|
||||
</a>
|
||||
{% set taxonomy = get_taxonomy(kind="memberships") %}
|
||||
{% set categories = taxonomy.items %}
|
||||
{% for category in categories %}
|
||||
{% set path = category.name | slugify %}
|
||||
{% set fullpath = "/memberships/" ~ path %}
|
||||
<a href="{{fullpath}}" class="text-gray-700 cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||
{{category.name}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
35
templates/partials/footer.html
Normal file
35
templates/partials/footer.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{%- set section = get_section(path="footer/_index.md") %}
|
||||
{%- set logoPath = section.extra.logoPath %}
|
||||
|
||||
<html>
|
||||
<head />
|
||||
<body>
|
||||
<div class="mt-20 border-t border-gray-700"></div>
|
||||
<footer class="bg-transparent">
|
||||
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
|
||||
<div class="xl:flex xl:gap-4">
|
||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
|
||||
<p class="text-gray-200 text-base font-light leading-6">
|
||||
{{section.description}}
|
||||
</p>
|
||||
{% include "partials/socialLinks.html" %}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
|
||||
{{ section.content | safe }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mt-6 mx-auto border-t border-gray-700 pt-8">
|
||||
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
|
||||
© <span id="year"></span> ThreeFold - All rights reserved.
|
||||
<a target="_blank" href="https://docs.threefold.io/docs/legal/terms_and_conditions" class="leading-6 text-gray-500 hover:text-green">Terms & Conditions |</a>
|
||||
<a target="_blank" href="https://docs.threefold.io/docs/legal/privacy_policy" class="leading-6 text-gray-500 hover:text-green">Privacy Policy</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
1
templates/partials/form.html
Normal file
1
templates/partials/form.html
Normal file
@@ -0,0 +1 @@
|
||||
<div data-tf-live="01JEXHAZ930FVKSDJ440Y8X375"></div><script src="//embed.typeform.com/next/embed.js"></script>
|
||||
165
templates/partials/head.html
Normal file
165
templates/partials/head.html
Normal file
@@ -0,0 +1,165 @@
|
||||
{% set cloudiBase = 'https://res.cloudinary.com/brycewray-com/image/upload/' %}
|
||||
{% set xFmPart1 = 'f_auto,q_auto:eco,w_' %}
|
||||
{% set xFmPart2 = ',x_0,z_1/' %}
|
||||
{% set fallbackImg = 'typewriter-monochrome_2242164_6260x4374.jpg' %}
|
||||
{% set zolaVer = '0.13.0' %}
|
||||
<head>
|
||||
<link rel="icon" type="image/x-icon" href="{{ get_url(path='images/icons/favicon.png')}}">
|
||||
{% block title %}
|
||||
<title>{{ config.title }}</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="{{ config.base_url }}">
|
||||
{% if section.title %}
|
||||
<title>{{ section.title }}</title>
|
||||
<meta property="og:title" content="{{ section.title }}">
|
||||
{% elif page.title %}
|
||||
<title>{{ page.title }}</title>
|
||||
<meta property="og:title" content="{{ page.title }}">
|
||||
{%endif%}
|
||||
|
||||
{%if section.extra.imgPath %}
|
||||
<meta name="image" content="{{section.permalink}}{{ section.extra.imgPath }}">
|
||||
<meta property="og:image" content="{{section.permalink}}{{ section.extra.imgPath }}">
|
||||
<meta property="twitter:image" content="{{section.permalink}}{{ section.extra.imgPath }}">
|
||||
{% elif page.extra.imgPath %}
|
||||
<meta name="image" content="{{page.permalink}}{{ page.extra.imgPath }}">
|
||||
<meta property="og:image" content="{{page.permalink}}{{ page.extra.imgPath }}">
|
||||
<meta property="twitter:image" content="{{page.permalink}}{{ page.extra.imgPath }}">
|
||||
{%endif%}
|
||||
|
||||
{%if section.description%}
|
||||
<meta name="description" content="{{ section.description }}">
|
||||
<meta property="og:description" content="{{ section.description }}">
|
||||
<meta property="twitter:description" content="{{ section.description }}">
|
||||
{%elif page.description%}
|
||||
<meta name="description" content="{{ page.description }}">
|
||||
<meta property="og:description" content="{{ page.description }}">
|
||||
<meta property="twitter:description" content="{{ page.description }}">
|
||||
{%endif%}
|
||||
<meta name="twitter:card" content="summary">
|
||||
{% endblock title %}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css">
|
||||
<!-- Cookie Consent by https://www.FreePrivacyPolicy.com -->
|
||||
<script type="text/javascript" src="//www.freeprivacypolicy.com/public/cookie-consent/4.0.0/cookie-consent.js" charset="UTF-8"></script>
|
||||
<script type="text/javascript" charset="UTF-8">
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
cookieconsent.run({ "notice_banner_type": "headline", "consent_type": "express", "palette": "light", "language": "en", "page_load_consent_levels": ["strictly-necessary"], "notice_banner_reject_button_hide": false, "preferences_center_close_button_hide": false, "website_name": "https://threefold.io/", "website_privacy_policy_url": "https://library.threefold.me/info/legal/#/legal__privacypolicy" });
|
||||
});
|
||||
</script>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || []; w[l].push({
|
||||
'gtm.start':
|
||||
new Date().getTime(), event: 'gtm.js'
|
||||
}); var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-N7PNMFH');
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-100065546-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-100065546-1');
|
||||
</script>
|
||||
<!-- Matomo Tag Manager -->
|
||||
<script>
|
||||
var _mtm = window._mtm = window._mtm || [];
|
||||
_mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
|
||||
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
||||
g.async = true; g.src = 'https://analytics.threefold.io/js/container_KIcuIdn4.js'; s.parentNode.insertBefore(g, s);
|
||||
</script>
|
||||
<!-- End Matomo Tag Manager -->
|
||||
<!-- Crisp -->
|
||||
<script type="text/plain" cookie-consent="tracking">
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement("script");
|
||||
s.src = "https://client.crisp.chat/l.js";
|
||||
s.async = 1;
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
<!-- Crisp without cookies -->
|
||||
<!-- <script type="text/javascript" cookie-consent="tracking">
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement("script");
|
||||
s.src = "https://client.crisp.chat/l.js";
|
||||
s.async = 1;
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
</script> -->
|
||||
<!-- end of Crisp-->
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- **** BEGINNING, favicons **** -->
|
||||
<!-- generics -->
|
||||
<!-- iOS -->
|
||||
<!-- Android -->
|
||||
<!-- Windows 8, IE 10 -->
|
||||
<!-- Windows 8.1 and up, IE 11 -->
|
||||
<!-- **** CONCLUSION, favicons **** -->
|
||||
<!-- CSS/SCSS -->
|
||||
<link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
|
||||
<style>
|
||||
.space-x-10>:not([hidden])~:not([hidden]){
|
||||
margin-left: calc(1.5rem*calc(1 - var(--tw-space-x-reverse)))!important;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
.lazy:-moz-loading {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.ieOnly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: none),
|
||||
(-ms-high-contrast: active) {
|
||||
.ieOnly {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (min-width: 640px){
|
||||
.sm\:space-x-4>:not([hidden])~:not([hidden]){
|
||||
margin-left: calc(2rem*calc(1 - var(--tw-space-x-reverse)))!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=62556aac80366d0019fc1af2&product=sop" async="async"></script>
|
||||
<!-- MailerLite Universal -->
|
||||
<script>
|
||||
(function (m, a, i, l, e, r) {
|
||||
m['MailerLiteObject'] = e; function f() {
|
||||
var c = { a: arguments, q: [] }; var r = this.push(c); return "number" != typeof r ? r : f.bind(c.q);
|
||||
}
|
||||
f.q = f.q || []; m[e] = m[e] || f.bind(f.q); m[e].q = m[e].q || f.q; r = a.createElement(i);
|
||||
var _ = a.getElementsByTagName(i)[0]; r.async = 1; r.src = l + '?v' + (~~(new Date().getTime() / 1000000));
|
||||
_.parentNode.insertBefore(r, _);
|
||||
})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
|
||||
|
||||
var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
|
||||
</script>
|
||||
<!-- End MailerLite Universal -->
|
||||
<!-- RSS feed -->
|
||||
{% block rss %}
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
title="RSS"
|
||||
href="{{ get_url(path='atom.xml', trailing_slash=false) }}"
|
||||
>
|
||||
{% endblock %}
|
||||
</head>
|
||||
226
templates/partials/header.html
Normal file
226
templates/partials/header.html
Normal file
@@ -0,0 +1,226 @@
|
||||
{%- set section = get_page(path="header/index.md") %}
|
||||
{% set header_items = section.content | safe | split(pat="<li>") %}
|
||||
|
||||
<header id="header-container">
|
||||
<div class="z-20 fixed top-0 left-0 right-0 bg-black1 lg:bg-transparent lg:absolute w-full">
|
||||
<div class="relative z-50">
|
||||
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
|
||||
<div>
|
||||
<a href="{{get_url(path='/')}}" class="flex">
|
||||
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-6">
|
||||
<nav class="flex space-x-10">
|
||||
{% for header_item in header_items %}
|
||||
{% if not loop.first %}
|
||||
{% set header_arr = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_arr[0] %}
|
||||
{% if '<a' in header_label %}
|
||||
{% set link_label = header_label | striptags %}
|
||||
{% set link_path = header_label | split(pat="%22") | safe%}
|
||||
{% set current = get_url(path=link_path[1]) ~ "/" %}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% elif current_url and current == current_url %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light active text-pretty tracking-wide transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ header_label }}</span>
|
||||
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
|
||||
<div class="hidden md:inline-block md:order-last">
|
||||
<div class="inline-flex">
|
||||
{# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
|
||||
<li class="ml-4">
|
||||
<a href="https://t.me/threefoldnews" target="_blank" class="text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
fill="currentColor"
|
||||
class="bi bi-telegram"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="ml-4">
|
||||
<a
|
||||
href="javascript:;"
|
||||
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
|
||||
class="text-white"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="far"
|
||||
data-icon="envelope"
|
||||
class="h-5 w-5"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul> #}
|
||||
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Participate</a>
|
||||
</div>
|
||||
</div>
|
||||
</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="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 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 style="background-color: rgba(34 34 34);">
|
||||
<div id="menu" class="conatiner mx-auto">
|
||||
{{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-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||
<div>
|
||||
<div style="background-color: rgba(34 34 34);" class="shadow-xs h-screen divide-y-2 divide-gray-50">
|
||||
<div class="pb-6 sm:px-12 md:px-16 mt-0 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 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%}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-50 hover:text-gray-200 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
||||
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
|
||||
{{ header_label }}
|
||||
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
|
||||
<div id="{{menu_id}}" class="z-50 leading-3 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/>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% set section = get_section(path="footer/_index.md")%}
|
||||
{%- set logoPath = section.extra.logoPath %}
|
||||
{# <div class="mx-8 mt-8">
|
||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||
<img class="w-32 h-auto" src="{{get_url(path=logoPath)}}" alt="Company name" />
|
||||
<p class="text-gray-500 text-base leading-6 ">
|
||||
{{section.description}}
|
||||
</p>
|
||||
{% include "partials/socialLinks.html" %}
|
||||
</div> #}
|
||||
|
||||
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
|
||||
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<style>
|
||||
|
||||
nav a:hover{
|
||||
color: #c7c7c7 !important;
|
||||
}
|
||||
|
||||
.active{
|
||||
color: #c7c7c7 !important;
|
||||
}
|
||||
.nav_btn:hover {
|
||||
color: #c7c7c7 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
0
templates/partials/header_copy.html
Normal file
0
templates/partials/header_copy.html
Normal file
86
templates/partials/header_custom.html
Normal file
86
templates/partials/header_custom.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<header id="header-container" class="bg-inherit">
|
||||
<div class="z-10 bg-dark1 w-screen">
|
||||
<div class="relative z-50">
|
||||
<div class="mx-auto bg-dark1 flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
||||
<div>
|
||||
<a href="/" class="flex">
|
||||
<img src="images/tf_dark.png" alt="ODFZ Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
<button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
{% for header_item in header_items %}
|
||||
{% if not loop.first %}
|
||||
{% set header_arr = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_arr[0] %}
|
||||
{% if '<a' in header_label %}
|
||||
{% set link_label = header_label | striptags %}
|
||||
{% set link_path = header_label | split(pat="%22") | safe%}
|
||||
{% set current = get_url(path=link_path[1]) ~ "/" %}
|
||||
{% if header_label is containing("http") %}
|
||||
{% if header_label is not containing("threefold") %}
|
||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% elif current_url and current == current_url %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||
{{link_label}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="relative">
|
||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||
<button type="button" id="{{button_id}}" class="nav_btn py-3 text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
|
||||
<span>{{ header_label }}</span>
|
||||
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for header_item in header_items %}
|
||||
{% set header_parts = header_item | split(pat="</li>") %}
|
||||
{% set header_label = header_parts[0] %}
|
||||
{% set header_menu = header_parts[1] %}
|
||||
{% set menu_id = header_label ~ "-menu" | slugify %}
|
||||
<nav>
|
||||
<div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||
<div class="bg-gray-800 lg:bg-gray-900">
|
||||
<div class="mx-8 lg:mx-20 px-6 py-4 text-white">
|
||||
{{ header_menu | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.bg-dark1 {
|
||||
background: rgba(15,15,15,1);
|
||||
}
|
||||
</style>
|
||||
22
templates/partials/hero/hero1.html
Normal file
22
templates/partials/hero/hero1.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="text-white fade-in">
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
|
||||
Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-white"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">This is Hero1.html</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
|
||||
<p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
19
templates/partials/hero/hero2.html
Normal file
19
templates/partials/hero/hero2.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<div class="relative isolate overflow-hidden">
|
||||
<div class="mx-auto max-w-7xl lg:col-span-2 px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:gap-x-20 lg:px-8 lg:py-40">
|
||||
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h1 class="mt-10 font-semibold tracking-tight text-pretty text-white lg:text-6xl text-4xl">This is Hero2.html</h1>
|
||||
<h2 class="fade-in text-pretty lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
|
||||
<p class="mt-8 text-lg font-light text-gray-50 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32">
|
||||
<div class="max-w-3xl flex-none lg:max-w-5xl">
|
||||
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md bg-white/5 shadow-2xl ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
23
templates/partials/hero/hero3.html
Normal file
23
templates/partials/hero/hero3.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<div class="">
|
||||
<div class="relative isolate overflow-hidden pt-14">
|
||||
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" class="absolute inset-0 -z-10 size-full object-cover opacity-30">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
|
||||
Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-white"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">This is Hero3.html</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
|
||||
<p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
19
templates/partials/hero/hero4.html
Normal file
19
templates/partials/hero/hero4.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<div class="">
|
||||
<div class="relative isolate pt-14">
|
||||
<div class="py-24 sm:py-32 lg:pb-40">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">This is Hero4.html</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
|
||||
<p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="mt-16 rounded-md bg-white/5 ring-1 shadow-2xl ring-white/10 sm:mt-24">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
29
templates/partials/hero/hero5.html
Normal file
29
templates/partials/hero/hero5.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<div class=" fade-in">
|
||||
<div class="relative isolate pt-14">
|
||||
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h1 class="mt-10 text-4xl font-semibold tracking-tight text-white lg:text-6xl">
|
||||
This is Hero5.html
|
||||
</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
|
||||
<p class="mt-8 text-lg font-light text-gray-50 sm:text-xl">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
|
||||
Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
|
||||
</p>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
|
||||
Get started
|
||||
</a>
|
||||
<a href="#" class="text-sm font-semibold text-white hover:text-gray-200">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
|
||||
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="https://images.unsplash.com/photo-1622615875737-0d959726e947?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Mobile App Screenshot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
28
templates/partials/hero/hero6.html
Normal file
28
templates/partials/hero/hero6.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<div class="relative fade-in">
|
||||
<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
|
||||
<div class="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-6">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h1 class="mt-10 text-4xl font-semibold tracking-tight text-white lg:text-6xl">
|
||||
This is Hero6.html
|
||||
</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
|
||||
<p class="mt-8 text-lg font-light text-gray-50 lgl:text-xl">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
|
||||
Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
|
||||
</p>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
|
||||
Get started
|
||||
</a>
|
||||
<a href="#" class="text-sm font-semibold text-white hover:text-gray-200">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
|
||||
<img class="aspect-3/2 w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto h-full" src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
38
templates/partials/hero/hero7.html
Normal file
38
templates/partials/hero/hero7.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<div class="fade-in">
|
||||
<div class="relative">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="relative z-10 pt-14 lg:w-full lg:max-w-2xl">
|
||||
<div class="relative px-6 py-32 sm:py-40 lg:px-8 lg:py-56 lg:pr-0">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
|
||||
<div class="hidden sm:mb-10 sm:flex">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-50 ring-1 ring-gray-700 hover:ring-gray-600">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt.
|
||||
<a href="#" class="font-semibold whitespace-nowrap text-white">
|
||||
<span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER IF NEEDED</p>
|
||||
<h1 class="text-4xl lg:text-6xl font-semibold tracking-tight text-white">This is hero7.html</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
|
||||
<p class="mt-8 text-lg sm:text-xl font-light text-gray-50">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
|
||||
Elit sunt amet fugiat veniam occaecat fugiat aliqua.
|
||||
</p>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="#" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
|
||||
Get started
|
||||
</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-50 hover:text-gray-300">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-800 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||
<img class="aspect-3/2 object-cover lg:aspect-auto lg:size-full" src="https://images.unsplash.com/photo-1483389127117-b6a2102724ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
54
templates/partials/hero/hero8.html
Normal file
54
templates/partials/hero/hero8.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<div class="relative">
|
||||
<main>
|
||||
<div class="relative isolate">
|
||||
<div class="overflow-hidden">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:pb-24 pt-12 lg:px-8 lg:pt-12">
|
||||
<div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
|
||||
<div class="relative lg:hidden pb-4">
|
||||
<img src="/images/people_1.jpg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
<div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h1 class="fade-in text-4xl lg:text-6xl font-semibold tracking-tight text-white">This is Hero8.html</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">
|
||||
<div class="ml-auto w-44 flex-none space-y-8 lg:pt-36 hidden lg:block">
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_1.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mr-auto w-44 flex-none space-y-8 lg:pt-24 hidden lg:block">
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_2.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_3.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-44 flex-none space-y-8 lg:pt-12 hidden lg:block">
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_4.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_5.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
22
templates/partials/hero/hero9.html
Normal file
22
templates/partials/hero/hero9.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="fade-in">
|
||||
<div class="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20 pt-14">
|
||||
<div class="mx-auto max-w-7xl px-6 py-32 lg:py-40 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-x-16 xl:grid-cols-2 xl:gap-x-16">
|
||||
<div class="text-content">
|
||||
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
|
||||
<h1 class="text-4xl font-semibold tracking-tight text-white lg:text-6xl">This is hero9.html</h1>
|
||||
<h2 class="mt-6 text-4xl font-normal tracking-tight text-white lg:text-5xl">This is smaller title h2</h2>
|
||||
<p class="mt-6 text-lg font-light text-gray-200 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</p>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<img src="https://images.unsplash.com/photo-1567532900872-f4e906cbf06a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80" alt="" class="w-full max-w-lg rounded-2xl object-cover">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
9
templates/partials/home/banner.html
Normal file
9
templates/partials/home/banner.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<div class="bg-transparent py-24 mb-12 flex justify-center items-center">
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-6">
|
||||
<img
|
||||
class="object-contain w-full lg:w-[100%] max-w-[100%]"
|
||||
src="images/gif2.gif"
|
||||
alt="TF">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
115
templates/partials/home/bento.html
Normal file
115
templates/partials/home/bento.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<div class=" py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<span class="text-base/7 font-light text-white tracking-wide">CONCEPT</span>
|
||||
<p class="mt-2 max-w-lg text-4xl font-medium tracking-tight text-pretty text-white sm:text-5xl">Value Propositions</p>
|
||||
<div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-3">
|
||||
<!-- row1 2col -->
|
||||
<div class="relative lg:col-span-3">
|
||||
<div class="absolute inset-px rounded-lg bg-black1 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
|
||||
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
|
||||
<img class="h-80 object-cover object-left" src="/images/freezone2.jpg" alt="">
|
||||
<div class="p-10 pt-4">
|
||||
<h3 class="text-base/7 font-light text-white tracking-wide">NEXT-GEN BUSINESS</h3>
|
||||
<p class="mt-1 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Freezone</p>
|
||||
<!-- row1 2col -->
|
||||
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">A future-focused ecosystem with streamlined business processes, decentralized systems, and global connectivity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
|
||||
</div>
|
||||
<!-- row1- 2 column -->
|
||||
<div class="relative lg:col-span-3">
|
||||
<div class="absolute inset-px rounded-lg bg-black1 lg:rounded-tr-[2rem]"></div>
|
||||
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
|
||||
<img class="h-80 object-cover object-left lg:object-right" src="images/dc2.jpg" alt="">
|
||||
<div class="p-10 pt-4">
|
||||
<h3 class="text-base/7 font-light text-white tracking-wide">SUSTAINABLE CLOUD & AI INFRASTRUCTURE</h3>
|
||||
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">DataCenter City</p>
|
||||
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Zanzibar’s largest, most sustainable data center, equipped with Threefold Nodes and co-owned AI integrated with city services.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-tr-[2rem]"></div>
|
||||
</div>
|
||||
<!-- row2 - 3col -->
|
||||
<div class="relative lg:col-span-2">
|
||||
<div class="absolute inset-px bg-white/5 "></div>
|
||||
<div class="relative flex h-full flex-col overflow-hidden ">
|
||||
<img class="h-80 object-cover object-left" src="images/bot2.jpg" alt="">
|
||||
<div class="p-10 pt-4">
|
||||
<h3 class="text-base/7 font-light text-white tracking-wide">SECURE AI & DIGITAL IDENTITY</h3>
|
||||
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Hero</p>
|
||||
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Private, secure communication and transactions with efficient AI assisted collaboration and full control of your own data and digital identity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
|
||||
</div>
|
||||
<!-- row2 - 3col -->
|
||||
<div class="relative lg:col-span-2">
|
||||
<div class="absolute inset-px bg-white/5"></div>
|
||||
<div class="relative flex h-full flex-col overflow-hidden ">
|
||||
<img class="h-80 object-cover" src="/images/startup1.jpg" alt="">
|
||||
<div class="p-10 pt-4">
|
||||
<h3 class="text-base/7 font-light text-white tracking-wide">STARTUP GROWTH & INNOVATION HUB</h3>
|
||||
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Venture Creator</p>
|
||||
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Empowers startups with strategic guidance, funding support, global networking, talent acquisition, and operational resources.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
|
||||
</div>
|
||||
<!-- row2 - 3col -->
|
||||
<div class="relative lg:col-span-2">
|
||||
<div class="absolute inset-px bg-white/5 "></div>
|
||||
<div class="relative flex h-full flex-col overflow-hidden ">
|
||||
<img class="h-80 object-cover" src="/images/eco3.jpg" alt="">
|
||||
<div class="p-10 pt-4">
|
||||
<h3 class="text-base/7 font-light text-white tracking-wide">SUSTAINABLE FUTURE</h3>
|
||||
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Regenerative Living</p>
|
||||
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Tech-driven sustainable living powered by clean energy, organic food, and a resilient, collaborative community with global impact.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
|
||||
</div>
|
||||
<!-- row2 - 3col -->
|
||||
<div class="relative lg:col-span-2">
|
||||
<div class="absolute inset-px rounded-lg bg-white/5 lg:rounded-bl-[2rem]"></div>
|
||||
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
|
||||
<img class="h-80 object-cover object-left" src="/images/zone2.jpg" alt="">
|
||||
<div class="p-10 pt-4">
|
||||
<h3 class="text-base/7 font-light text-white tracking-wide">DECENTRALIZED ECONOMY</h3>
|
||||
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Assets</p>
|
||||
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Tokenized assets drive fair trade, sustainable economies, and stability with resilient digital currencies.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
|
||||
</div>
|
||||
<!-- row2 - 3col -->
|
||||
<div class="relative lg:col-span-2">
|
||||
<div class="absolute inset-px rounded-lg bg-white/5"></div>
|
||||
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
|
||||
<img class="h-80 object-cover" src="/images/zone1.jpg" alt="">
|
||||
<div class="p-10 pt-4">
|
||||
<h3 class="text-base/7 font-light text-white tracking-wide">LEGAL AUTONOMY </h3>
|
||||
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Autonomous Zone</p>
|
||||
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Enjoy legal independence, data ownership, and secure connections in a future-focused global ecosystem.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
|
||||
</div>
|
||||
<!-- row2 - 3col -->
|
||||
<div class="relative lg:col-span-2">
|
||||
<div class="absolute inset-px rounded-lg bg-white/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
|
||||
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
|
||||
<img class="h-80 object-cover" src="/images/home1.jpg" alt="">
|
||||
<div class="p-10 pt-4">
|
||||
<h3 class="text-base/7 font-light text-white tracking-wide">AI-POWERED INFRASTRUCTURE</h3>
|
||||
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Augmented Intelligence</p>
|
||||
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Homes power Zanzibar’s data center, with co-owned AI integrated into services and generating citizen income.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
14
templates/partials/home/cta.html
Normal file
14
templates/partials/home/cta.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="bg-transparent pt-12 pb-12">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||
<h2 class="lg:text-balance max-w-xl leading-tight text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
Build the <br>Internet of Tomorrow,<br> Today.
|
||||
</h2>
|
||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
<a href="/signup" target="_blank" class="blinking-effect fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||
Take the Next Step
|
||||
</a>
|
||||
<a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
191
templates/partials/home/faq.html
Normal file
191
templates/partials/home/faq.html
Normal file
@@ -0,0 +1,191 @@
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<main class="relative flex flex-col justify-center overflow-hidden">
|
||||
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-20">
|
||||
|
||||
<h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1>
|
||||
|
||||
<!-- Accordion component -->
|
||||
<div class="divide-y divide-white/50 my-10">
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-01"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-01"
|
||||
>
|
||||
<span style="color: #fff;">What is CyberCity?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-01"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-01"
|
||||
class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
CyberCity is a next-generation smart city in Fumba, Zanzibar, designed to integrate cutting-edge technology, sustainability, and economic innovation. It features a Digital Freezone, regenerative living, AI-driven services, and a decentralized economic model, and many more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-02"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-02"
|
||||
>
|
||||
<span style="color: #fff;">Why was Fumba, Zanzibar chosen as the project site?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-02"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-02"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
Fumba is part of the 2042 Fumba Free Economic Zone Master Plan, strategically selected for its rapid development potential, economic incentives, and unique blend of cultural heritage and natural beauty. It offers a stable environment for global investment and innovation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-04"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-04"
|
||||
>
|
||||
<span style="color: #fff;">What is the Digital Freezone, and how does it benefit businesses?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-04"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-04"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
The Digital Freezone is a business-friendly ecosystem within Cybercity that features streamlined regulations, financial transparency, and global connectivity. It provides a light-touch regulatory environment, making it ideal for startups, digital entrepreneurs, and international businesses.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-05"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-05"
|
||||
>
|
||||
<span style="color: #fff;">How does the project support sustainability and regenerative living?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-05"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-05"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
CyberCity is designed with eco-friendly urban planning, featuring car-free green spaces, smart energy solutions like Vehicle-to-Grid (V2G) integration, organic food production, and co-owned AI that optimizes resources while generating income for citizens.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-06"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-06"
|
||||
>
|
||||
<span style="color: #fff;">How can I participate in the CyberCity movement?</span>
|
||||
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-06"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-06"
|
||||
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<p class="pb-3 text-gray-300 text-base font-light">
|
||||
You can invest, register a business, become a digital citizen, or move to CyberCity as an entrepreneur or resident. The city offers opportunities for innovators, investors, and forward-thinking individuals to be part of a revolutionary ecosystem.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End: Accordion component -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
143
templates/partials/home/farmers.html
Normal file
143
templates/partials/home/farmers.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<div class="bg-transparent py-24 pb-6">
|
||||
<div class="mx-auto max-w-8xl px-6 lg:max-w-8xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<span class="text-base/7 font-light text-white tracking-wide">CONCEPT</span>
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">
|
||||
Unique Value Proposition</h2>
|
||||
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
CyberCity Zanzibar is a city that combines sustainable living, streamlined business processes, cutting-edge datacenters, venture creation, and secure digital tools that empower citizens, businesses, and investors.
|
||||
</p>
|
||||
</div>
|
||||
<section class="pb-32 bg-transparent">
|
||||
<div class="max-w-6xl mx-2 md:mx-10 lg:mx-10 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-4 gap-y-4 lg:max-w-none lg:grid-cols-4">
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/digital.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl font-semibold tracking-tight text-white rounded-2xl">
|
||||
Digital Freezone
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/datacenter.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Datacenter City
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/twin.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Digital Hero
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/startup.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Venture Creator
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/eco.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Regenerative Living
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/assets.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Sovereign Zone
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/ai.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Augmented Intelligence
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/assets.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Digital Assets
|
||||
</dt>
|
||||
<dd class="relative z-10 mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">
|
||||
|
||||
</p>
|
||||
<p class="mt-6"></p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
templates/partials/home/features.html
Normal file
79
templates/partials/home/features.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<div class="bg-transparent pt-12 pb-24 ">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 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-4xl leading-tight font-normal tracking-tight text-white">ThreeFold is the Infrastructure Layer of Web4
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
|
||||
<p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
|
||||
<a href="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">Discover How It Works <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
||||
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-4">
|
||||
<div class="pt-0">
|
||||
<dt class="font-semibold text-base text-gray-200">Unbreakable Data</dt>
|
||||
</div>
|
||||
<div class="pt-0">
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
|
||||
</div>
|
||||
<div class="lg:pt-4 pt-0">
|
||||
<dt class="font-semibold text-base text-gray-200">Autonomous Cloud</dt>
|
||||
</div>
|
||||
<div class="">
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
|
||||
</div>
|
||||
<div class="lg:pt-4 pt-0">
|
||||
<dt class="font-semibold text-base text-gray-200">Unbreakable Network</dt>
|
||||
</div>
|
||||
<div class="">
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
|
||||
<dd class="font-light text-gray-300 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</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>
|
||||
139
templates/partials/home/grid_stats.html
Normal file
139
templates/partials/home/grid_stats.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden py-24">
|
||||
<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 lg:text-5xl text-4xl font-normal tracking-tight text-white ">A Place to Live and Innovate</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Together, we aim to create a future that reflects our values. Here, we provide a safe and inspiring environment for startups to build solutions that can make a real difference. We believe that with technology, collaboration, and good intentions, anything is possible.</p>
|
||||
</div>
|
||||
<dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-5">
|
||||
<!-- planet -->
|
||||
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<img src="images/icons/planet.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
|
||||
<dt class="order-first text-2xl font-semibold tracking-tight text-white">Planet First</dt>
|
||||
<dd class="text-sm/6 font-light text-gray-300">Utmost respect to mother earth in every action.</dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- people -->
|
||||
<div class="fade-in flex flex-col bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<img src="images/icons/people.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
|
||||
<dt class="order-first text-2xl font-semibold tracking-tight text-white">People First</dt>
|
||||
<dd class="text-sm/6 font-light text-gray-300">Bring equality of opportunities for everyone</dd>
|
||||
</div>
|
||||
</div>
|
||||
<!-- open -->
|
||||
<div class="fade-in flex flex-col bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<img src="images/icons/open.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
|
||||
<dd class="order-first text-2xl font-semibold tracking-tight text-white">Open Source</dd>
|
||||
<dt class="text-sm/6 font-light text-gray-300">Value open source methods for many aspects in life.</dt>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Simple -->
|
||||
<div class="fade-in flex flex-col bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<img src="images/icons/simple.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
|
||||
<dd class="order-first text-2xl font-semibold tracking-tight text-white">Simplicity</dd>
|
||||
<dt class="text-sm/6 font-light text-gray-300">Erase complexity of things that kills progress.</dt>
|
||||
</div>
|
||||
</div>
|
||||
<!-- authemtic -->
|
||||
<div class="fade-in flex flex-col bg-white/5 p-6">
|
||||
<div class="tooltip">
|
||||
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
|
||||
<img src="images/icons/authentic.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
|
||||
<dt class="order-first text-2xl font-semibold tracking-tight text-white">Authenticity</dt>
|
||||
<dd class="text-sm/6 font-light text-gray-300">Commited to restore authenticity of people and information.</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize the countUp for each of the numbers
|
||||
new CountUp('ssd', 0, 1910, 0, 2.5).start();
|
||||
new CountUp('cores', 0, 46934, 0, 2.5).start();
|
||||
new CountUp('nodes', 0, 1596, 0, 2.5).start();
|
||||
new CountUp('countries', 0, 40, 0, 2.5).start();
|
||||
new CountUp('farms', 0, 900, 0, 2.5).start();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
background-color: rgb(26 26 26 / 90%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -7px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
/* right: -60px; */
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.tooltip .tooltiptext {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -7px !important;
|
||||
right: 0px !important;
|
||||
top: 0px !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
91
templates/partials/home/hero.html
Normal file
91
templates/partials/home/hero.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<head>
|
||||
<link href="./output.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<div class="relative isolate overflow-hidden h-screen my-8">
|
||||
<video autoplay loop muted class="absolute inset-0 -z-10 h-full w-full object-cover">
|
||||
<source src="/videos/cybercity_comp.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="flex flex-col justify-center items-center mx-auto max-w-3xl py-32 sm:py-48 lg:py-56 text-center h-full">
|
||||
<div class="text-center">
|
||||
<img src="/images/logo_s.svg" alt="Cybercity Logo" class="w-30 h-auto mx-auto" />
|
||||
<h2 class="text-xl lg:text-2xl text-gray-200 font-normal">Welcome to a New Regenerative Startup City in the Heart of Zanzibar</h2>
|
||||
<p class="mt-2 text-lg sm:text-xl leading-7 sm:leading-8 font-light text-white mx-4 sm:mx-0">Spanning 700,000m² in the heart of Fumba, Zanzibar, CyberCity is a place where talent meets opportunity, innovation embraces sustainability, and collaboration fuels progress.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.relative.isolate.overflow-hidden.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
video {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
color: white;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.bg-hover {
|
||||
color: white;
|
||||
background: #020202;
|
||||
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
/* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 2rem; /* Smaller font for mobile */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem; /* Smaller font for mobile */
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem; /* Smaller font for mobile */
|
||||
margin-left: 1rem; /* Margin left for mobile */
|
||||
margin-right: 1rem; /* Margin right for mobile */
|
||||
line-height: 1.5; /* Smaller line spacing */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
templates/partials/home/hero_old.html
Normal file
44
templates/partials/home/hero_old.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent">
|
||||
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-5xl fade-in">We are Building <br>a New Internet</h2>
|
||||
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
|
||||
<br>
|
||||
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>
|
||||
<br>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="/what" 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">What We've Built</a>
|
||||
<a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">Read TF Docs<span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Define the fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||
.fade-in {
|
||||
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||
}
|
||||
|
||||
/* Optional: Delay the animation for a more staggered effect */
|
||||
h2 {
|
||||
animation-delay: 0.5s; /* Delay for header */
|
||||
}
|
||||
|
||||
p {
|
||||
animation-delay: 1s; /* Delay for paragraphs */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
27
templates/partials/home/products.html
Normal file
27
templates/partials/home/products.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<div class="overflow-hidden bg-transparent py-24 lg:py-16">
|
||||
<div class="mx-auto max-w-7xl md:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
|
||||
<div class="sm:px-6 lg:px-0">
|
||||
<div class="relative isolate overflow-hidden bg-transparent px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pl-16 sm:pr-0 sm:pt-16 lg:mx-0 lg:max-w-none">
|
||||
<div class="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
|
||||
<img src="images/web4.png" alt="Web4 Preview" class="w-full max-w-none fade-in blinking-effect">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 lg:px-0 lg:pl-4 lg:pt-4">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
|
||||
<p class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock Web4 with ThreeFold</p>
|
||||
<p class="mt-6 mx-automax-w-3xl text-pretty lg:text-2xl text-xl font-normal text-gray-200 fade-in">Revolutionary Tools for the Decentralized Internet.</p>
|
||||
<div class="mt-6 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted Web4 routers and decentralized nodes, our products redefine digital autonomy and connectivity.</p>
|
||||
</div>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="/signup" target="_blank" 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 blinking-effect">Take the Next Step</a>
|
||||
<a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
53
templates/partials/home/residents.html
Normal file
53
templates/partials/home/residents.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<div class="relative bg-white/5">
|
||||
<main>
|
||||
<div class="relative isolate">
|
||||
<div class="overflow-hidden">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:pb-24 pt-12 lg:px-8 lg:pt-12">
|
||||
<div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
|
||||
<div class="relative lg:hidden pb-4">
|
||||
<img src="/images/people_1.jpg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
<div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
|
||||
<h2 class="text-base/7 font-light text-white tracking-wide">PARTICIPATE</h2>
|
||||
<h1 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Become a Part of the Movement</h1>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Find out how you can join CyberCity and be part of the future. Whether you're looking to invest, launch your business, become a digital citizen, or move into the heart of innovation, now is your chance to be among the first pioneers shaping this groundbreaking ecosystem.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Be the First to Shape the Future – Join Us Now!</p>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">
|
||||
<div class="ml-auto w-44 flex-none space-y-8 lg:pt-36 hidden lg:block">
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_1.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mr-auto w-44 flex-none space-y-8 lg:pt-24 hidden lg:block">
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_2.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_3.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-44 flex-none space-y-8 lg:pt-12 hidden lg:block">
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_4.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
<div class="relative hidden lg:block">
|
||||
<img src="/images/people_5.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
29
templates/partials/home/site.html
Normal file
29
templates/partials/home/site.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<div class="relative mt-24 bg-white/5">
|
||||
<main class="lg:relative">
|
||||
<div class="mx-auto w-full lg:grid lg:grid-cols-2 lg:gap-4 lg:items-center text-center lg:text-left">
|
||||
<!-- Text Section -->
|
||||
<div class="relative col-span-1 px-6 sm:px-8 xl:pr-16">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-gray-50">
|
||||
<span class="text-base/7 font-light text-white tracking-wide">PROJECT SITE</span>
|
||||
<br>
|
||||
<span class="block text-white">Discover Fumba</span>
|
||||
</h2>
|
||||
<p class="text-left my-6 text-white max-w-4xl text-pretty lg:text-xl text-lg font-light fade-in">
|
||||
Located in the heart of Zanzibar,Fumba offers a unique opportunity to merge modern development with cultural heritage and natural beauty.<br><br>
|
||||
As part of the 2042 Fumba Free Economic Zone Master Plan, Fumba is set to become a key driver of economic growth and innovation in the region, making it the perfect location for a Cybercity.
|
||||
</p>
|
||||
<div class="mt-10 sm:flex sm:justify-center lg:justify-start">
|
||||
<div class="rounded-md shadow">
|
||||
<a href="#" class="fade-in flex w-full items-center justify-center rounded-xl border border-transparent px-6 py-2 text-base font-medium text-black bg-white hover:bg-indigo-700">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Image Section -->
|
||||
<div class="relative col-span-1">
|
||||
<img class="h-full w-full object-cover" src="/images/fumba.jpg" alt="Fumba">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
18
templates/partials/home/site2.html
Normal file
18
templates/partials/home/site2.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<div class="overflow-hidden bg-gray-800 py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-4">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||||
<div class="lg:pr-8 lg:pt-4">
|
||||
<div class="lg:max-w-lg">
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-gray-50">
|
||||
<span class="text-base/7 font-light text-white tracking-wide">PROJECT SITE</span>
|
||||
<span class="block xl:inline text-white">Discover Fumba</span>
|
||||
</h2>
|
||||
<p class="text-left my-6 text-white max-w-4xl text-pretty lg:text-xl text-lg font-light fade-in">
|
||||
Fumba, located in the heart of Zanzibar, offers a unique opportunity to merge modern development with cultural heritage and natural beauty. As part of the 2042 Fumba Free Economic Zone Master Plan, Fumba is set to become a key driver of economic growth and innovation in the region. This transformation positions Fumba as the ideal site for CyberCity, a future-focused development designed to inspire sustainability, collaboration, and prosperity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="images/znz.jpg" alt="Product screenshot" class="h-full max-w-none rounded-s lg:pr-0 md:-ml-4 lg:-ml-0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
78
templates/partials/home/web4.html
Normal file
78
templates/partials/home/web4.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
|
||||
<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-6xl font-bold tracking-tight text-white sm:text-6l">WEB4</h2>
|
||||
<br>
|
||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Next Evolution of the Internet</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Web4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Blockchain was the first step to Web3.</p>
|
||||
<p class="mx-auto mt-2 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
|
||||
<!--
|
||||
<div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="cursor: pointer;">
|
||||
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
|
||||
<g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
|
||||
<path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<a href="/action" class="fade-in text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
|
||||
</div>
|
||||
-->
|
||||
<div class="mt-16 fade-in flex items-center justify-center gap-x-6">
|
||||
<a href="/signup" target="_blank" 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 blinking-effect">Take the Next Step</a>
|
||||
<a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</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 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 */
|
||||
}
|
||||
|
||||
|
||||
/* Apply the blinking animation to the link */
|
||||
.blinking-effect {
|
||||
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
82
templates/partials/icons/bar-svgrepo-com.svg
Normal file
82
templates/partials/icons/bar-svgrepo-com.svg
Normal file
@@ -0,0 +1,82 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#A39B8D;" d="M406.261,155.826h-11.13V11.13h11.13V155.826z M261.565,11.13h-11.13v144.696h11.13V11.13z
|
||||
M116.87,11.13h-11.13v144.696h11.13V11.13z"/>
|
||||
<path style="fill:#F7F2CD;" d="M467.478,278.261H333.913l55.652-133.565h22.261L467.478,278.261z M267.13,144.696H244.87
|
||||
l-55.652,133.565h133.565L267.13,144.696z M122.435,144.696h-22.261L44.522,278.261h133.565L122.435,144.696z"/>
|
||||
<path style="fill:#FFFCE3;" d="M446.609,278.261h-91.826l40.812-122.435h10.203L446.609,278.261z M261.101,155.826h-10.203
|
||||
l-40.811,122.435h91.826L261.101,155.826z M116.405,155.826h-10.203L65.391,278.261h91.826L116.405,155.826z"/>
|
||||
<path style="fill:#F5D470;" d="M369.212,155.826c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391
|
||||
s33.391,14.949,33.391,33.391c0,3.903-0.677,7.648-1.908,11.13H369.212z M287.484,155.826c1.231-3.483,1.908-7.227,1.908-11.13
|
||||
c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13H287.484z M142.788,155.826
|
||||
c1.231-3.483,1.908-7.227,1.908-11.13c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391
|
||||
c0,3.903,0.677,7.648,1.908,11.13H142.788z"/>
|
||||
<path style="fill:#D19B3F;" d="M434.087,144.696c0,3.903-0.677,7.648-1.908,11.13h-20.353v-11.13c0-6.147-4.983-11.13-11.13-11.13
|
||||
c-6.147,0-11.13,4.983-11.13,11.13v11.13h-20.353c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391
|
||||
S434.087,126.254,434.087,144.696z M256,111.304c-18.442,0-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13h20.353
|
||||
v-11.13c0-6.147,4.983-11.13,11.13-11.13s11.13,4.983,11.13,11.13v11.13h20.353c1.231-3.483,1.908-7.227,1.908-11.13
|
||||
C289.391,126.254,274.442,111.304,256,111.304z M111.304,111.304c-18.442,0-33.391,14.949-33.391,33.391
|
||||
c0,3.903,0.677,7.648,1.908,11.13h20.353v-11.13c0-6.147,4.983-11.13,11.13-11.13c6.147,0,11.13,4.983,11.13,11.13v11.13h20.353
|
||||
c1.231-3.483,1.908-7.227,1.908-11.13C144.696,126.254,129.746,111.304,111.304,111.304z"/>
|
||||
<path style="fill:#57544C;" d="M500.87,22.261H11.13C4.983,22.261,0,17.278,0,11.13l0,0C0,4.983,4.983,0,11.13,0H500.87
|
||||
C507.017,0,512,4.983,512,11.13l0,0C512,17.278,507.017,22.261,500.87,22.261z"/>
|
||||
<path style="fill:#D3C6A8;" d="M434.087,489.739L434.087,489.739c0,12.295-9.966,22.261-22.261,22.261H100.174
|
||||
c-12.295,0-22.261-9.966-22.261-22.261l0,0c0-12.295,9.966-22.261,22.261-22.261h311.652
|
||||
C424.121,467.478,434.087,477.444,434.087,489.739z"/>
|
||||
<path style="fill:#6E5840;" d="M478.609,467.478H33.391V267.13h445.217V467.478z"/>
|
||||
<path style="fill:#323030;" d="M500.87,478.609H11.13c-6.147,0-11.13-4.983-11.13-11.13l0,0c0-6.147,4.983-11.13,11.13-11.13H500.87
|
||||
c6.147,0,11.13,4.983,11.13,11.13l0,0C512,473.626,507.017,478.609,500.87,478.609z M512,267.13L512,267.13
|
||||
c0-6.147-4.983-11.13-11.13-11.13H11.13C4.983,256,0,260.983,0,267.13l0,0c0,6.147,4.983,11.13,11.13,11.13H500.87
|
||||
C507.017,278.261,512,273.278,512,267.13z"/>
|
||||
<path style="fill:#C6984F;" d="M125.217,500.87h-22.261l38.957-166.957h22.261L125.217,500.87z M347.826,333.913h-22.261
|
||||
L286.609,500.87h22.261L347.826,333.913z"/>
|
||||
<path style="fill:#AA8144;" d="M164.174,333.913h22.261l38.957,166.957H203.13L164.174,333.913z M386.783,500.87h22.261
|
||||
l-38.957-166.957h-22.261L386.783,500.87z"/>
|
||||
<path style="fill:#ADA58C;" d="M208.696,356.174h-89.043c-6.147,0-11.13-4.983-11.13-11.13v-22.261c0-6.147,4.983-11.13,11.13-11.13
|
||||
h89.043c6.147,0,11.13,4.983,11.13,11.13v22.261C219.826,351.191,214.843,356.174,208.696,356.174z M403.478,345.043v-22.261
|
||||
c0-6.147-4.983-11.13-11.13-11.13h-89.043c-6.147,0-11.13,4.983-11.13,11.13v22.261c0,6.147,4.983,11.13,11.13,11.13h89.043
|
||||
C398.495,356.174,403.478,351.191,403.478,345.043z"/>
|
||||
<path style="fill:#D3C6A8;" d="M108.522,322.783L108.522,322.783c0-6.147,4.983-11.13,11.13-11.13h89.043
|
||||
c6.147,0,11.13,4.983,11.13,11.13l0,0H108.522z M403.478,322.783L403.478,322.783c0-6.147-4.983-11.13-11.13-11.13h-89.043
|
||||
c-6.147,0-11.13,4.983-11.13,11.13l0,0H403.478z"/>
|
||||
<path style="fill:#92393C;" d="M66.783,256c0,6.147-4.983,11.13-11.13,11.13h-11.13c-6.147,0-11.13-4.983-11.13-11.13v-33.391
|
||||
h33.391V256z"/>
|
||||
<path style="fill:#DB6D53;" d="M50.087,256L50.087,256c-3.073,0-5.565-2.492-5.565-5.565v-27.826h11.13v27.826
|
||||
C55.652,253.508,53.16,256,50.087,256z"/>
|
||||
<path style="fill:#C6984F;" d="M178.087,250.435v11.13c0,3.073-2.492,5.565-5.565,5.565h-66.783c-3.073,0-5.565-2.492-5.565-5.565
|
||||
v-11.13c0-3.073,2.492-5.565,5.565-5.565h66.783C175.595,244.87,178.087,247.362,178.087,250.435z"/>
|
||||
<path style="fill:#AA8144;" d="M178.087,250.435V256h-77.913v-5.565c0-3.073,2.492-5.565,5.565-5.565h66.783
|
||||
C175.595,244.87,178.087,247.362,178.087,250.435z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
95
templates/partials/icons/code-svgrepo-com.svg
Normal file
95
templates/partials/icons/code-svgrepo-com.svg
Normal file
@@ -0,0 +1,95 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#E4EAF8;" d="M494.345,472.276H17.655C7.904,472.276,0,464.372,0,454.621V57.379
|
||||
c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655v397.241
|
||||
C512,464.372,504.096,472.276,494.345,472.276z"/>
|
||||
<path style="fill:#5B5D6E;" d="M494.345,472.276H256V83.862h256v370.759C512,464.372,504.096,472.276,494.345,472.276z"/>
|
||||
<path style="fill:#D5DCED;" d="M512,83.862H0V57.379c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655
|
||||
V83.862z"/>
|
||||
<path style="fill:#E4EAF8;" d="M26.483,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
|
||||
h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C35.31,71.082,31.358,75.034,26.483,75.034z"/>
|
||||
<path style="fill:#FF5050;" d="M423.724,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
|
||||
h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C432.552,71.082,428.599,75.034,423.724,75.034z"/>
|
||||
<path style="fill:#FFF082;" d="M459.034,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
|
||||
h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C467.862,71.082,463.91,75.034,459.034,75.034z"/>
|
||||
<path style="fill:#A0FFB4;" d="M494.345,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
|
||||
h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C503.172,71.082,499.22,75.034,494.345,75.034z"/>
|
||||
<path style="fill:#00C3FF;" d="M144.898,150.826l-59.75,59.75c-3.229,3.229-3.463,8.386-0.54,11.893L256,428.138V145.655h-98.618
|
||||
C152.7,145.655,148.209,147.516,144.898,150.826z"/>
|
||||
<polygon style="fill:#80E1FF;" points="256,145.655 176.552,216.276 256,216.276 "/>
|
||||
<g>
|
||||
<path style="fill:#00AAF0;" d="M176.552,216.276l-25.97-69.254c-2.103,0.878-4.039,2.159-5.681,3.801L85.15,210.575
|
||||
c-1.578,1.578-2.415,3.619-2.543,5.7L176.552,216.276L176.552,216.276z"/>
|
||||
<polygon style="fill:#00AAF0;" points="176.552,216.276 256,428.138 256,216.276 "/>
|
||||
</g>
|
||||
<path style="fill:#AFB9D2;" d="M256,489.931c-4.879,0-8.828-3.953-8.828-8.828V30.897c0-4.875,3.948-8.828,8.828-8.828
|
||||
c4.879,0,8.828,3.953,8.828,8.828v450.207C264.828,485.978,260.879,489.931,256,489.931z"/>
|
||||
<g>
|
||||
<path style="fill:#FF5050;" d="M317.793,163.31h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
|
||||
c4.879,0,8.828,3.953,8.828,8.828S322.673,163.31,317.793,163.31z"/>
|
||||
<path style="fill:#FF5050;" d="M317.793,233.931h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655
|
||||
c4.879,0,8.828,3.953,8.828,8.828C326.621,229.978,322.673,233.931,317.793,233.931z"/>
|
||||
</g>
|
||||
<path style="fill:#A0FFB4;" d="M344.276,198.621h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
|
||||
c4.879,0,8.828,3.953,8.828,8.828S349.155,198.621,344.276,198.621z"/>
|
||||
<path style="fill:#FFFFFF;" d="M467.862,163.31H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759
|
||||
c4.879,0,8.828,3.953,8.828,8.828S472.742,163.31,467.862,163.31z"/>
|
||||
<path style="fill:#FFF082;" d="M467.862,233.931H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759
|
||||
c4.879,0,8.828,3.953,8.828,8.828C476.69,229.978,472.742,233.931,467.862,233.931z"/>
|
||||
<path style="fill:#D5DCED;" d="M467.862,198.621h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
|
||||
c4.879,0,8.828,3.953,8.828,8.828S472.742,198.621,467.862,198.621z"/>
|
||||
<path style="fill:#A0FFB4;" d="M344.276,269.241h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
|
||||
c4.879,0,8.828,3.953,8.828,8.828S349.155,269.241,344.276,269.241z"/>
|
||||
<path style="fill:#D5DCED;" d="M467.862,269.241h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
|
||||
c4.879,0,8.828,3.953,8.828,8.828S472.742,269.241,467.862,269.241z"/>
|
||||
<g>
|
||||
<path style="fill:#FF5050;" d="M317.793,304.552h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655
|
||||
c4.879,0,8.828,3.953,8.828,8.828C326.621,300.599,322.673,304.552,317.793,304.552z"/>
|
||||
<path style="fill:#FF5050;" d="M317.793,375.172h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
|
||||
c4.879,0,8.828,3.953,8.828,8.828S322.673,375.172,317.793,375.172z"/>
|
||||
</g>
|
||||
<path style="fill:#A0FFB4;" d="M344.276,339.862h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
|
||||
c4.879,0,8.828,3.953,8.828,8.828S349.155,339.862,344.276,339.862z"/>
|
||||
<path style="fill:#FFFFFF;" d="M467.862,304.552H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759
|
||||
c4.879,0,8.828,3.953,8.828,8.828C476.69,300.599,472.742,304.552,467.862,304.552z"/>
|
||||
<path style="fill:#FFF082;" d="M467.862,375.172H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759
|
||||
c4.879,0,8.828,3.953,8.828,8.828S472.742,375.172,467.862,375.172z"/>
|
||||
<path style="fill:#D5DCED;" d="M467.862,339.862h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
|
||||
c4.879,0,8.828,3.953,8.828,8.828S472.742,339.862,467.862,339.862z"/>
|
||||
<path style="fill:#A0FFB4;" d="M344.276,410.483h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
|
||||
c4.879,0,8.828,3.953,8.828,8.828S349.155,410.483,344.276,410.483z"/>
|
||||
<path style="fill:#D5DCED;" d="M467.862,410.483h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
|
||||
c4.879,0,8.828,3.953,8.828,8.828S472.742,410.483,467.862,410.483z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
67
templates/partials/icons/form-svgrepo-com.svg
Normal file
67
templates/partials/icons/form-svgrepo-com.svg
Normal file
@@ -0,0 +1,67 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#9F6459;" d="M416,32H272c0,8.836-7.164,16-16,16s-16-7.164-16-16H96c-22.055,0-40,17.945-40,40v400
|
||||
c0,22.055,17.945,40,40,40h320c22.055,0,40-17.945,40-40V72C456,49.945,438.054,32,416,32z M416,464c0,4.418-3.582,8-8,8H104
|
||||
c-4.418,0-8-3.582-8-8V80c0-4.418,3.582-8,8-8h304c4.418,0,8,3.582,8,8V464z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#D8DCE1;" d="M152,368c-1.891,0-3.789-0.664-5.312-2.023c-3.305-2.93-3.602-7.992-0.664-11.289l64-72
|
||||
c2.328-2.625,6.094-3.422,9.289-1.969l80.445,36.57l52.844-128.336c1.688-4.078,6.359-6,10.445-4.352
|
||||
c4.086,1.68,6.031,6.359,4.352,10.445l-56,136c-0.828,2.008-2.438,3.594-4.453,4.391s-4.273,0.742-6.258-0.156l-82.625-37.555
|
||||
l-60.086,67.586C156.398,367.094,154.203,368,152,368z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FF4F19;" cx="152" cy="360" r="24"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FF9600;" cx="216" cy="288" r="24"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#FFD200;" cx="304" cy="328" r="24"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle style="fill:#74D24F;" cx="360" cy="192" r="24"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#B9BBC1;" d="M304,16h-20.391C277.969,6.242,267.484,0,256,0s-21.969,6.242-27.609,16H208
|
||||
c-22.055,0-40,17.945-40,40v32c0,4.418,3.578,8,8,8h160c4.422,0,8-3.582,8-8V56C344,33.945,326.055,16,304,16z M256,40
|
||||
c-4.418,0-8-3.582-8-8c0-4.418,3.582-8,8-8s8,3.582,8,8C264,36.418,260.418,40,256,40z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
79
templates/partials/icons/paint-brush-art-svgrepo-com.svg
Normal file
79
templates/partials/icons/paint-brush-art-svgrepo-com.svg
Normal file
@@ -0,0 +1,79 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve">
|
||||
<path style="fill:#996632;" d="M264,465.6c-4,4-10.4,6.4-16,6.4c-0.8,0-1.6,0-2.4,0c-12-1.6-21.6-12.8-21.6-25.6v-84
|
||||
c0-32-26.4-58.4-58.4-58.4h-2.4c-14.4,0-26.4-12-26.4-26.4V256h224v21.6c0,14.4-12,26.4-26.4,26.4H332c-32,0-58.4,26.4-58.4,58.4
|
||||
V448C272,454.4,268.8,461.6,264,465.6z M264,448c0-8.8-7.2-16-16-16c-8.8,0-16,7.2-16,16s7.2,16,16,16C256.8,464,264,456.8,264,448z
|
||||
"/>
|
||||
<path style="fill:#D9CDC1;" d="M364,232c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12h20h4c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12
|
||||
h-12H364z"/>
|
||||
<circle style="fill:#42210B;" cx="328" cy="208" r="16"/>
|
||||
<path style="fill:#CC9966;" d="M296,80c0-8.8,7.2-16,16-16s16,7.2,16,16v40c0,17.6,14.4,32,32,32c5.6,0,11.2-1.6,16-4.8V168h-91.2
|
||||
c6.4-5.6,11.2-14.4,11.2-24V80z"/>
|
||||
<g>
|
||||
<circle style="fill:#42210B;" cx="248" cy="448" r="16"/>
|
||||
<circle style="fill:#42210B;" cx="248" cy="208" r="16"/>
|
||||
</g>
|
||||
<path style="fill:#FFF8EF;" d="M248,192c-8.8,0-16,7.2-16,16s7.2,16,16,16c8.8,0,16-7.2,16-16S256.8,192,248,192z M364,184
|
||||
c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12H168c17.6,0,32-14.4,32-32v-16H364z M328,224c8.8,0,16-7.2,16-16s-7.2-16-16-16
|
||||
s-16,7.2-16,16S319.2,224,328,224z"/>
|
||||
<path style="fill:#CC9966;" d="M200,80c0-8.8,7.2-16,16-16s16,7.2,16,16v64c0,9.6,4,18.4,11.2,24H200V80z"/>
|
||||
<path style="fill:#FF6600;" d="M360,136c-8.8,0-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v64c0,8.8-7.2,16-16,16
|
||||
s-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v120c0,8.8-7.2,16-16,16s-16-7.2-16-16V96c0-19.2-13.6-35.2-32-39.2V56
|
||||
c0-22.4,17.6-40,40-40h176c22.4,0,40,17.6,40,40v64C376,128.8,368.8,136,360,136z"/>
|
||||
<path style="fill:#FF7D00;" d="M168,208c-4.8,0-8-3.2-8-8V96c0-20-12.8-38.4-31.2-44.8C131.2,35.2,144,24,160,24h176
|
||||
c17.6,0,32,14.4,32,32v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80c0-22.4-17.6-40-40-40s-40,17.6-40,40v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80
|
||||
c0-22.4-17.6-40-40-40s-40,17.6-40,40v120C176,204.8,172.8,208,168,208z"/>
|
||||
<path style="fill:#CC9966;" d="M136,96v72h-16V73.6C129.6,76.8,136,85.6,136,96z"/>
|
||||
<path style="fill:#FFF8EF;" d="M136,200c0,17.6,13.6,32,31.2,32h-34.4c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h3.2V200z"/>
|
||||
<path style="fill:#875426;" d="M165.6,304c32,0,58.4,26.4,58.4,58.4v84c0,12.8,9.6,24,21.6,25.6c0.8,0,1.6,0,2.4,0
|
||||
c6.4,0,12-2.4,16-6.4c4.8-4.8,8-11.2,8-17.6v-85.6c0-32,26.4-58.4,58.4-58.4h2.4c14.4,0,26.4-12,26.4-26.4V256H136v21.6
|
||||
c0,14.4,12,26.4,26.4,26.4H165.6z M244.8,480c-16-1.6-28.8-16-28.8-33.6v-84c0-28-22.4-50.4-50.4-50.4h-2.4
|
||||
c-19.2,0-34.4-15.2-34.4-34.4V248h240v29.6c0,19.2-15.2,34.4-34.4,34.4H332c-28,0-50.4,22.4-50.4,50.4V448c0,8.8-4,17.6-10.4,24
|
||||
C262.4,477.6,253.6,480.8,244.8,480z"/>
|
||||
<path style="fill:#D9CDC1;" d="M120.8,220c0,6.4,5.6,12,12,12H120h-12c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h4h20.8
|
||||
c-6.4,0-12,5.6-12,12V220z"/>
|
||||
<path style="fill:#42210B;" d="M136,96c0-10.4-6.4-19.2-16-22.4V168h16V96z M165.6,312c28,0,50.4,22.4,50.4,50.4v84
|
||||
c0,17.6,12.8,32,28.8,33.6c8.8,0.8,17.6-2.4,24.8-8c6.4-6.4,10.4-14.4,10.4-24v-85.6c0-28,22.4-50.4,50.4-50.4h2.4
|
||||
c19.2,0,34.4-15.2,34.4-34.4V248H128v29.6c0,19.2,15.2,34.4,34.4,34.4H165.6z M243.2,168c-6.4-5.6-11.2-14.4-11.2-24V80
|
||||
c0-8.8-7.2-16-16-16s-16,7.2-16,16v88H243.2z M200,200c0,17.6-14.4,32-32,32h196h12h12c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12
|
||||
h-4h-20H200V200z M330.4,328c-19.2,0-34.4,15.2-34.4,34.4V448c0,13.6-5.6,26.4-16,35.2c-8.8,8-20.8,12.8-32.8,12.8
|
||||
c-1.6,0-3.2,0-4.8,0c-24-2.4-43.2-24-43.2-49.6v-84c0-19.2-15.2-34.4-34.4-34.4h-2.4c-28,0-50.4-22.4-50.4-50.4V248h-4
|
||||
c-15.2,0-28-12.8-28-28v-24c0-14.4,10.4-25.6,24-27.2V56c0-31.2,24.8-56,56-56h176c31.2,0,56,24.8,56,56v112
|
||||
c13.6,1.6,24,13.6,24,27.2v24c0,15.2-12.8,28-28,28h-4v29.6c0,28-22.4,50.4-50.4,50.4h-3.2V328z M296,144c0,9.6-4,18.4-11.2,24H376
|
||||
v-20.8c-4.8,3.2-10.4,4.8-16,4.8c-17.6,0-32-14.4-32-32V80c0-8.8-7.2-16-16-16s-16,7.2-16,16V144z M120,232h12.8h34.4
|
||||
c-17.6,0-31.2-14.4-31.2-32v-16h-3.2H112h-4c-6.4,0-12,5.6-12,12v24c0,6.4,5.6,12,12,12H120z M280,80c0-17.6,14.4-32,32-32
|
||||
s32,14.4,32,32v40c0,8.8,7.2,16,16,16s16-7.2,16-16V56c0-22.4-17.6-40-40-40H160c-22.4,0-40,17.6-40,40v0.8c18.4,4,32,20,32,39.2
|
||||
v104c0,8.8,7.2,16,16,16s16-7.2,16-16V80c0-17.6,14.4-32,32-32s32,14.4,32,32v64c0,8.8,7.2,16,16,16s16-7.2,16-16V80z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
3
templates/partials/icons/svgDribbbleIcon.html
Normal file
3
templates/partials/icons/svgDribbbleIcon.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
3
templates/partials/icons/svgFacebookIcon.html
Normal file
3
templates/partials/icons/svgFacebookIcon.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 407 B |
1
templates/partials/icons/svgFirstPageIcon.html
Normal file
1
templates/partials/icons/svgFirstPageIcon.html
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(128,128,128);"/></g></svg>
|
||||
|
After Width: | Height: | Size: 435 B |
3
templates/partials/icons/svgGithubIcon.html
Normal file
3
templates/partials/icons/svgGithubIcon.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 865 B |
3
templates/partials/icons/svgInstagramIcon.html
Normal file
3
templates/partials/icons/svgInstagramIcon.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
5
templates/partials/icons/svgLastPageIcon.html
Normal file
5
templates/partials/icons/svgLastPageIcon.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)">
|
||||
<path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(116,221,195);"/> <!-- Updated to green -->
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 485 B |
1
templates/partials/icons/svgLinkedInIcon.html
Normal file
1
templates/partials/icons/svgLinkedInIcon.html
Normal file
@@ -0,0 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-8 w-8"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" ></path></svg>
|
||||
|
After Width: | Height: | Size: 634 B |
3
templates/partials/icons/svgNextPageIcon.html
Normal file
3
templates/partials/icons/svgNextPageIcon.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)">
|
||||
<path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(116,221,195);"/></g></svg>
|
||||
|
After Width: | Height: | Size: 452 B |
2
templates/partials/icons/svgPrevPageIcon.html
Normal file
2
templates/partials/icons/svgPrevPageIcon.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(116,221,195);"/></g></svg>
|
||||
|
After Width: | Height: | Size: 440 B |
1
templates/partials/icons/svgTelegram.html
Normal file
1
templates/partials/icons/svgTelegram.html
Normal file
@@ -0,0 +1 @@
|
||||
<svg data-v-14efe4a7="" xmlns="http://www.w3.org/2000/svg" width="1.6rem" height="1.6rem" fill="currentColor" viewBox="0 0 16 16" class="bi bi-telegram mt-1"><path data-v-14efe4a7="" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path></svg>
|
||||
|
After Width: | Height: | Size: 828 B |
3
templates/partials/icons/svgTwitterIcon.html
Normal file
3
templates/partials/icons/svgTwitterIcon.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 530 B |
3
templates/partials/icons/twitterx.html
Normal file
3
templates/partials/icons/twitterx.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" class="mt-2 h-8 w-8 bi bi-twitter-x" viewBox="0 0 24 24">
|
||||
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 310 B |
9
templates/partials/intro.html
Normal file
9
templates/partials/intro.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{% block content %}
|
||||
<div class="mb-6 mt-14">
|
||||
<h2 class="mb-4 text-center text-4xl lg:text-5xl text-gray-100 md:mb-6">{{ section.title }}</h2>
|
||||
<p class="mx-auto max-w-5xl text-center text-gray-200 text-base md:text-lg">
|
||||
{{ section.description }}
|
||||
</p>
|
||||
</div>
|
||||
<hr class="container border-gray-400 mx-auto my-4">
|
||||
{% endblock content %}
|
||||
85
templates/partials/memberships.html
Normal file
85
templates/partials/memberships.html
Normal file
@@ -0,0 +1,85 @@
|
||||
{% block content %}
|
||||
|
||||
{% if not paginator %}
|
||||
{% set paginator = section %}
|
||||
{% endif %}
|
||||
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
{% if path_array | length < 3%}
|
||||
{% set category = "All" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-16 mx-auto max-w-screen-lg px-6 lg:px-8">
|
||||
{% include "partials/filter_bar.html" %}
|
||||
<div class="text-center main-title px-0 md:w-full mx-8 md:mx-12">
|
||||
<div class="my-4 flex flex-col items-start">
|
||||
<h1 class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
</h1>
|
||||
test
|
||||
<div class="text-xl text-gray-800">
|
||||
{{ paginator.total_pages ~ " People"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div>
|
||||
<div class="mx-auto mt-4 grid max-w-2xl grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 xl:grid-cols-4">
|
||||
{%- for page in paginator.pages %}
|
||||
{% include "partials/person_card.html" %}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
<hr class="mt-6" />
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
57
templates/partials/newsCard.html
Normal file
57
templates/partials/newsCard.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden border border-gray-600">
|
||||
<div class="flex-1">
|
||||
<a href={{ post.permalink }} class="block">
|
||||
<div class="flex-shrink-0">
|
||||
{% if post.extra.imgPath %}
|
||||
{% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
|
||||
<img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="flex-1 p-4 flex flex-col justify-between">
|
||||
|
||||
<h3 class="mt-2 text-xl leading-7 font-medium text-gray-100 text-left not-italic">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
{% if post.description %}
|
||||
<p class="mt-3 text-sm font-normal leading-5 text-gray-300 text-left">
|
||||
{{ post.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="flex items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<ul class="list-none flex author-list my-10 mr-2 px-0">
|
||||
{% if post.taxonomies.people %}
|
||||
{% for author in post.taxonomies.people %}
|
||||
{% set author_path = 'people/' ~ author ~ '/index.md' %}
|
||||
{% set people = get_section(path="people/_index.md") %}
|
||||
{% set pages_str = people.pages | json_encode() | as_str %}
|
||||
{% if pages_str is containing(author) %}
|
||||
{% set author = get_page(path=author_path) %}
|
||||
{% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
|
||||
<li class="author-list-item">
|
||||
<a href="{{ author.permalink }}" tooltip="{{ author.title }}">
|
||||
<img src="{{ author_img }}" alt="{{ author.title }}" class="
|
||||
w-8
|
||||
h-8
|
||||
rounded-full
|
||||
bg-gray-200
|
||||
border border-gray-400
|
||||
" />
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-400 text-xs">
|
||||
<time datetime="{{post.date}}">
|
||||
{{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
|
||||
</time>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
70
templates/partials/newsPosts.html
Normal file
70
templates/partials/newsPosts.html
Normal file
@@ -0,0 +1,70 @@
|
||||
{% block content %}
|
||||
|
||||
<div class="text-center main-title px-0 md:w-2/3 mx-8 md:mx-12">
|
||||
<h2
|
||||
class="tracking-tight text-left text-2xl md:text-4xl fw-500 leading-snug font-medium"
|
||||
>
|
||||
{% set path_array = current_path | split(pat="/") %}
|
||||
{% set taxonomy = path_array[1] %}
|
||||
{% set category = path_array[2] %}
|
||||
Key News and Updates
|
||||
{% if taxonomy == "news-category" %} -
|
||||
{{category | replace(from='-', to=' ' ) | title}}
|
||||
{% endif %}
|
||||
</h2>
|
||||
<div>
|
||||
<div class="mt-3 grid gap-5 max-w-lg mx-auto md:grid-cols-2 lg:grid-cols-3 lg:max-w-none">
|
||||
{%- for post in paginator.pages %}
|
||||
{% if "Engineering" == "Engineering"%}
|
||||
{% include "partials/newsCard.html" %}
|
||||
{%endif%} {%- endfor %}
|
||||
</div>
|
||||
<hr class="my-10 border-gray-700"/>
|
||||
<p class="text-center text-sm mt-2 mb-16">
|
||||
{% if paginator.previous %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="First page"
|
||||
href="{{ paginator.first }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}{% include
|
||||
"partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Previous page"
|
||||
href="{{ paginator.previous }}"
|
||||
>{% include "partials/icons/svgPrevPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
{% else %} {%
|
||||
include "partials/icons/svgFirstPageIcon.html" %}{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgFirstPageIcon.html" %}
|
||||
|
||||
{% endif %} {% if
|
||||
paginator.next %}
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Next page"
|
||||
href="{{ paginator.next }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="border-transparent"
|
||||
aria-label="Last page"
|
||||
href="{{ paginator.last }}"
|
||||
>{% include "partials/icons/svgNextPageIcon.html" %}{% include
|
||||
"partials/icons/svgNextPageIcon.html" %}</a
|
||||
>
|
||||
{% else %} {% include "partials/icons/svgLastPageIcon.html" %}
|
||||
{% include
|
||||
"partials/icons/svgLastPageIcon.html" %}{% include
|
||||
"partials/icons/svgLastPageIcon.html" %} {% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
38
templates/partials/newsSidebar.html
Normal file
38
templates/partials/newsSidebar.html
Normal file
@@ -0,0 +1,38 @@
|
||||
|
||||
<div class="mx-8 md:mx-4 flex flex-col mt-2 md:mt-8">
|
||||
<div class="flex flex-col mb-12 mr-8 lg:mr-24">
|
||||
<h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4"> FILTER NEWS BY</h4>
|
||||
<a id="all" class="mb-2 text-white font-normal" href="/newsroom">All</a>
|
||||
{% set taxonomy = get_taxonomy(kind="news-category") %}
|
||||
{% set categories = taxonomy.items %}
|
||||
{% for category in categories %}
|
||||
{% set path = category.name | slugify %}
|
||||
{% set fullpath = "/news-category/" ~ path %}
|
||||
<a id="{{path}}" class="mb-3 text-gray-100 font-normal" href={{fullpath}}> {{category.name}} </a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% set section = get_section(path="newsroom/_index.md")%}
|
||||
|
||||
<div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
|
||||
<h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-6"> FEATURED NEWS</h4>
|
||||
|
||||
{% for page in section.pages %}
|
||||
{% if page.extra.isFeatured %}
|
||||
<a class="mb-3 text-gray-400" href={{page.permalink}}>{{ page.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setActiveCategory() {
|
||||
let activeCategory = window.location.pathname.split("/")[2]
|
||||
if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
|
||||
else { activeLink = document.getElementById(activeCategory)}
|
||||
activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
|
||||
}
|
||||
|
||||
setActiveCategory()
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user