add product
This commit is contained in:
@@ -87,6 +87,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
require("flyonui"),
|
||||
], // if we add forms, do it here
|
||||
}
|
||||
|
||||
@@ -2,4 +2,5 @@
|
||||
{% block content %}
|
||||
|
||||
{% include "partials/products/hero.html" %}
|
||||
{% include "partials/products/portfolio.html" %}
|
||||
{% endblock content %}
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="bg-transparent">
|
||||
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-24 lg:flex lg:items-center lg:justify-between lg:px-8">
|
||||
<h2 class="lg:text-balance sm:text-center px-8 font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
|
||||
<h2 class="lg:text-balance text-left sm:text-center px-8 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 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<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-2xl px-16 pb-12">
|
||||
<div class="max-w-3xl px-16 pb-12">
|
||||
<h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">Why ThreeFold is Leading the Next Gen of Cloud & Network Technology
|
||||
</h2>
|
||||
<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 not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
|
||||
|
||||
310
templates/partials/products/portfolio copy.html
Normal file
310
templates/partials/products/portfolio copy.html
Normal file
@@ -0,0 +1,310 @@
|
||||
|
||||
<div class="bg-transparent py-24">
|
||||
<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">
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
|
||||
At Threefold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability. Explore how our creations are shaping a more open and connected future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section id="testimonies" class="py-20 bg-slate-900">
|
||||
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
|
||||
|
||||
<div class="transition duration-500 ease-in-out transform scale-100 translate-x-0 translate-y-0 opacity-100">
|
||||
<div class="mb-12 space-y-5 md:mb-16 md:text-center">
|
||||
<div
|
||||
class="inline-block px-3 py-1 text-sm font-semibold text-indigo-100 rounded-lg md:text-center text-cn bg-[#202c47] bg-opacity-60 hover:cursor-pointer hover:bg-opacity-40">
|
||||
Words from Others
|
||||
</div>
|
||||
<h1 class="mb-5 text-3xl font-semibold text-white md:text-center md:text-5xl">
|
||||
It's not just us.
|
||||
</h1>
|
||||
<p class="text-xl text-gray-100 md:text-center md:text-2xl">
|
||||
Here's what others have to say about us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
|
||||
|
||||
|
||||
<ul class="space-y-8">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
|
||||
<p class="text-gray-500 text-md">Rapper & Entrepreneur</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Find God.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
|
||||
<p class="text-gray-500 text-md">Rapper & Entrepreneur</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Find God.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="hidden space-y-8 sm:block">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/paraga" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Twitter</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
|
||||
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
|
||||
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/paraga" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Twitter</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
|
||||
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
|
||||
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
|
||||
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
|
||||
aliquam malesuada bibendum.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="hidden space-y-8 lg:block">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Microsoft</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
|
||||
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
|
||||
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
|
||||
<p class="text-gray-500 text-md">CEO of PayPal</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
|
||||
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
|
||||
<p class="text-gray-500 text-md">CEO of Microsoft</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
|
||||
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
|
||||
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4"><img
|
||||
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
|
||||
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
|
||||
<p class="text-gray-500 text-md">CEO of PayPal</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
|
||||
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,49 +1,198 @@
|
||||
<div class="bg-gray-900 py-24 sm:py-32">
|
||||
|
||||
<div class="bg-transparent pt-24 pb-10">
|
||||
<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">
|
||||
<h2 class="text-base/7 font-semibold text-indigo-400">Deploy faster</h2>
|
||||
<p class="mt-2 max-w-lg text-pretty text-4xl font-semibold tracking-tight text-white sm:text-5xl">Everything you need to deploy your app</p>
|
||||
<div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
|
||||
<div class="flex p-px lg:col-span-4">
|
||||
<div class="overflow-hidden rounded-lg bg-gray-800 ring-1 ring-white/15 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]">
|
||||
<img class="h-80 object-cover object-left" src="https://tailwindui.com/plus/img/component-images/bento-02-releases.png" alt="">
|
||||
<div class="p-10">
|
||||
<h3 class="text-sm/4 font-semibold text-gray-400">Releases</h3>
|
||||
<p class="mt-2 text-lg font-medium tracking-tight text-white">Push to deploy</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida justo et nulla efficitur, maximus egestas sem pellentesque.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex p-px lg:col-span-2">
|
||||
<div class="overflow-hidden rounded-lg bg-gray-800 ring-1 ring-white/15 lg:rounded-tr-[2rem]">
|
||||
<img class="h-80 object-cover" src="https://tailwindui.com/plus/img/component-images/bento-02-integrations.png" alt="">
|
||||
<div class="p-10">
|
||||
<h3 class="text-sm/4 font-semibold text-gray-400">Integrations</h3>
|
||||
<p class="mt-2 text-lg font-medium tracking-tight text-white">Connect your favorite tools</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400">Curabitur auctor, ex quis auctor venenatis, eros arcu rhoncus massa.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex p-px lg:col-span-2">
|
||||
<div class="overflow-hidden rounded-lg bg-gray-800 ring-1 ring-white/15 lg:rounded-bl-[2rem]">
|
||||
<img class="h-80 object-cover" src="https://tailwindui.com/plus/img/component-images/bento-02-security.png" alt="">
|
||||
<div class="p-10">
|
||||
<h3 class="text-sm/4 font-semibold text-gray-400">Security</h3>
|
||||
<p class="mt-2 text-lg font-medium tracking-tight text-white">Advanced access control</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex p-px lg:col-span-4">
|
||||
<div class="overflow-hidden rounded-lg bg-gray-800 ring-1 ring-white/15 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]">
|
||||
<img class="h-80 object-cover object-left" src="https://tailwindui.com/plus/img/component-images/bento-02-performance.png" alt="">
|
||||
<div class="p-10">
|
||||
<h3 class="text-sm/4 font-semibold text-gray-400">Performance</h3>
|
||||
<p class="mt-2 text-lg font-medium tracking-tight text-white">Lightning-fast builds</p>
|
||||
<p class="mt-2 max-w-lg text-sm/6 text-gray-400">Sed congue eros non finibus molestie. Vestibulum euismod augue vel commodo vulputate. Maecenas at augue sed elit dictum vulputate.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
|
||||
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
|
||||
At Threefold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability. Explore how our creations are shaping a more open and connected future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="pb-24 pt-12 bg-transparent">
|
||||
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
|
||||
|
||||
|
||||
<ul class="space-y-8">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="">
|
||||
</div><a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">TF DASHBOARD</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal font-light text-gray-300 text-md">A Graphical user interface (GUI) provided by ThreeFold for users to access and manage their ThreeFold Grid resources</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">TF CONNECT APP</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal font-light text-gray-300 text-md">TF Connect is a mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">3NODES</h3>
|
||||
<p class="text-white font-light text-md"> Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md"></p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="hidden space-y-8 sm:block">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">TF DAO</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal font-light text-gray-300 text-md">Through the TF DAO, users can propose, vote on, and implement changes to the network protocols, policies, and operations, fostering a collaborative and inclusive environment.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">TF CHAIN</h3>
|
||||
<p class="text-white font-light text-md">TF Chain is the universal smart contract layer on the ThreeFold Grid. It’s an application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage and network capacity. </p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md"></p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">GATEWAY NODES</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-white font-light text-md">Enim neque volutpat ac tincidunt vitae
|
||||
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
|
||||
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="hidden space-y-8 lg:block">
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">ZERO-OS V3</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal font-light text-gray-300 text-md">Zero-OS is a stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">MYCELIUM</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-white font-light text-md">Mycelium is an end-2-end encrypted IPv6 overlay network written in Rust where each node that joins the overlay network will receive an overlay network IP in the 400::/7 range.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="text-sm leading-6">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
|
||||
</div><a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" class="cursor-pointer">
|
||||
<div
|
||||
class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white">QUANTUM SAFE STORAGE</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-normal text-gray-300 text-md">QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only and immutable.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -10,9 +10,6 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-8 pt-10 pb-24 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Item #1 -->
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
@@ -43,9 +40,9 @@
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-medium text-gray-200">Phase II</div>
|
||||
<div class="font-medium text-white">Phase II</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-gray-200 mb-2">Traction & Expansion</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">Traction & Expansion</div>
|
||||
<div class="text-gray-200 font-light">
|
||||
Open Source Development
|
||||
<br>60+ Countries
|
||||
@@ -69,7 +66,7 @@
|
||||
<div class="font-medium text-white">Current Phase</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg text-white mb-2">ThreeFold Commercialization</div>
|
||||
<div class="text-white font-light">
|
||||
<div class="text-gray-200 font-light">
|
||||
+1 Million Nodes
|
||||
<br>Open Source Mode & Commercial Mode
|
||||
<br>Version 3 (TFT) & Version 4 (INCA) 12.12.24
|
||||
|
||||
Reference in New Issue
Block a user