100 lines
5.9 KiB
HTML
100 lines
5.9 KiB
HTML
<div class="relative isolate overflow-hidden bg-transparent text-black 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-black lg:text-5xl">Why it Matters</h1>
|
||
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-black">
|
||
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>
|
||
Web4 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 Web4. 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-black fade-in font-semibold">
|
||
<p class="lg:text-2xl text-xl leading-normal text-black 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="mt-6 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-xl font-semibold tracking-tight text-black lg:text-2xl blinking-effect">Take Actions</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;
|
||
}
|
||
|
||
blockquote {
|
||
border-left-width: 2px;
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
.inline-flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.items-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.gap-2 {
|
||
gap: 0.5rem; /* Adjust the gap size as needed */
|
||
}
|
||
|
||
</style>
|