edit
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: "12.12.24"
|
title: "Solutions"
|
||||||
description: "f" # quotation marks to allow colons where used
|
description: "Take actions" # quotation marks to allow colons where used
|
||||||
template: "layouts/121224.html"
|
template: "layouts/action.html"
|
||||||
insert_anchor_links: "left"
|
insert_anchor_links: "left"
|
||||||
extra:
|
extra:
|
||||||
author: Your name here
|
author: Your name here
|
||||||
@@ -8,7 +8,8 @@ extra:
|
|||||||
---
|
---
|
||||||
|
|
||||||
- [Why]("/about")
|
- [Why]("/about")
|
||||||
- [Products]("/solutions")
|
- [Solutions]("/solutions")
|
||||||
|
- [12.12.24]("/action")
|
||||||
- Info
|
- Info
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +0,0 @@
|
|||||||
{% extends "_default/base.html" %}
|
|
||||||
{% block content %}
|
|
||||||
|
|
||||||
{% include "partials/121224/hero.html" %}
|
|
||||||
{% include "partials/home/cta.html" %}
|
|
||||||
{% endblock content %}
|
|
||||||
7
templates/layouts/action.html
Normal file
7
templates/layouts/action.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{% extends "_default/base.html" %}
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
{% include "partials/action/banner.html" %}
|
||||||
|
{% include "partials/action/hero.html" %}
|
||||||
|
|
||||||
|
{% endblock content %}
|
||||||
@@ -2,9 +2,10 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
{% include "partials/why/hero.html" %}
|
{% include "partials/why/hero.html" %}
|
||||||
|
{% include "partials/why/reason.html" %}
|
||||||
{% include "partials/why/timeline.html" %}
|
{% include "partials/why/timeline.html" %}
|
||||||
{% include "partials/why/values.html" %}
|
{% include "partials/why/values.html" %}
|
||||||
{% include "partials/why/ourwhy.html" %}
|
{% include "partials/why/matters.html" %}
|
||||||
|
|
||||||
{% include "partials/home/cta.html" %}
|
{% include "partials/home/cta.html" %}
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
<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-3xl fade-in">A Secure & Sovereign Infrastructure Layer for the Internet</h2>
|
|
||||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime. .</p>
|
|
||||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
|
|
||||||
</p>
|
|
||||||
<div class="mt-12 flex items-center justify-center gap-x-6">
|
|
||||||
<a href="https://docs.threefold.io" 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">Dive Deeper</a>
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|
||||||
9
templates/partials/action/banner.html
Normal file
9
templates/partials/action/banner.html
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<div class="bg-transparent pt-32 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>
|
||||||
|
|
||||||
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
|
||||||
|
And is 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-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">
|
||||||
|
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>
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Blockchain was the first step to Web3 </p>
|
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Blockchain was the first step to Web3 </p>
|
||||||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
|
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
|
||||||
<br>
|
<br>
|
||||||
<a href="121224.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a>
|
<a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
94
templates/partials/why/matters.html
Normal file
94
templates/partials/why/matters.html
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
|
||||||
|
<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 sm:text-5xl">Why it Matters</h1>
|
||||||
|
<p class="fade-in mt-6 text-lg font-light text-white">
|
||||||
|
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
|
||||||
|
<br><br>
|
||||||
|
But we won’t stop here.
|
||||||
|
<br><br>
|
||||||
|
Web 4 is the next generation of the Internet and our team has been working on it for +10 years—the Decentralized Cloud was the base layer to create Web 4. As far as we know, we are the world’s first project approaching a fully functional Web4 infrastructure that places priority on both the planet and people
|
||||||
|
</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="text-2xl text-white font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
|
||||||
|
</blockquote>
|
||||||
|
<br>
|
||||||
|
<div class="inline-flex blinking-effect items-center gap-2 fade-in ">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" 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.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.html" class="text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl">12.12.2024</a>
|
||||||
|
</div>
|
||||||
|
</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::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>
|
||||||
36
templates/partials/why/motto.html
Normal file
36
templates/partials/why/motto.html
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<div class="bg-transparent pb-24 pt-12">
|
||||||
|
<div class="flex items-center justify-center bg-transparent">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="fade-in mx-auto text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
||||||
|
Planet First. People First.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Define the fade-in animation */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 5s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Optional: Delay the animation for a more staggered effect */
|
||||||
|
h2 {
|
||||||
|
animation-delay: 0.5s; /* Delay for header */
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
animation-delay: 1s; /* Delay for paragraphs */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -1,17 +1,5 @@
|
|||||||
<div class="fade-in bg-transparent relative isolate overflow-hidden py-24 mb-12">
|
<div class="fade-in bg-transparent relative isolate overflow-hidden py-24 mb-12">
|
||||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||||
<div class="fade-in mx-auto max-w-2xl lg:max-w-none">
|
|
||||||
<div class=" mx-auto max-w-3xl text-center">
|
|
||||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">The Reason Behind It All</h2>
|
|
||||||
<p class="mt-6 text-lg font-light text-white">
|
|
||||||
The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
|
|
||||||
<br><br>
|
|
||||||
Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally.
|
|
||||||
<br><br>
|
|
||||||
<span class="font-semibold">We believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none">
|
<div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none">
|
||||||
<div class="fade-in mx-auto max-w-3xl text-center">
|
<div class="fade-in mx-auto max-w-3xl text-center">
|
||||||
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Why it Matters?</h2>
|
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Why it Matters?</h2>
|
||||||
@@ -27,7 +15,7 @@
|
|||||||
secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
|
secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
|
||||||
</p>
|
</p>
|
||||||
<br>
|
<br>
|
||||||
<a href="121224.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a>
|
<a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
46
templates/partials/why/reason.html
Normal file
46
templates/partials/why/reason.html
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
|
||||||
|
<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 sm:text-5xl">The Reason Behind It All</h1>
|
||||||
|
<p class="fade-in mt-6 text-lg font-light text-white">
|
||||||
|
The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
|
||||||
|
<br><br>
|
||||||
|
Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally...
|
||||||
|
<br><br>
|
||||||
|
</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="text-2xl text-white font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p>
|
||||||
|
</blockquote>
|
||||||
|
<br>
|
||||||
|
<div class="mx-4">
|
||||||
|
<p class="fade-in mx-auto text-3xl font-semibold tracking-tight text-white sm:text-2xl opacity-0 transition-opacity duration-1000" data-observer>
|
||||||
|
Planet First. People First.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.blockquote::before {
|
||||||
|
content: open-quote;
|
||||||
|
font-size: 4rem;
|
||||||
|
position: absolute;
|
||||||
|
top: -1rem;
|
||||||
|
left: -1rem;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,28 +1,12 @@
|
|||||||
<div class="relative overflow-hidden bg-transparent pb-32 pt-16 min-h-screen flex items-center justify-center">
|
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
|
||||||
<div class="relative w-full">
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||||
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-1 lg:gap-24 lg:px-8">
|
<div class="relative grid lg:grid-cols-12 lg:gap-8">
|
||||||
<!-- First Section: Center Aligned -->
|
<!-- Left Content -->
|
||||||
<div class="mt-6 max-w-2xl text-center">
|
<div class="lg:col-span-7">
|
||||||
<h2 class="lg:text-4xl text-3xl font-normal tracking-tight text-white">The Reason Behind It All</h2>
|
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||||
<p class="mt-4 text-lg font-light text-white">
|
<p class="text-base/7 font-semibold text-indigo-400">Deploy faster</p>
|
||||||
The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
|
<h1 class="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">A better workflow</h1>
|
||||||
<br><br>
|
<p class="mt-6 text-xl/8">Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.</p>
|
||||||
Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally.
|
|
||||||
<br><br>
|
|
||||||
<span class="font-semibold">We believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Second Section: Center Aligned -->
|
|
||||||
<div class="pt-24">
|
|
||||||
<div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none lg:px-0 lg:py-32">
|
|
||||||
<div class="cols col-grid-1"></div>
|
|
||||||
<div class="mt-6 max-w-3xl text-center">
|
|
||||||
<h2 class="lg:text-4xl text-3xl font-normal tracking-tight text-white">Better understand your customers</h2>
|
|
||||||
<p class="mt-4 text-lg font-light text-white">
|
|
||||||
Semper curabitur ullamcorper posuere nunc sed. Ornare iaculis bibendum malesuada faucibus lacinia porttitor. Pulvinar laoreet sagittis viverra duis. In venenatis sem arcu pretium pharetra at. Lectus viverra dui tellus ornare pharetra.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user