152 lines
9.4 KiB
HTML
152 lines
9.4 KiB
HTML
<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-black tracking-wide">SUBHEADER</p>
|
|
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black">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-black">
|
|
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-black 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-black">
|
|
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-black 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-black">
|
|
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-black 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-black">
|
|
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-black 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-black">
|
|
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-black 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-black">
|
|
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-black 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-black">
|
|
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-black 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-black">
|
|
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-black 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-black">
|
|
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-black 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>
|
|
|