Initial commit
This commit is contained in:
ourworld_web
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>
|
||||
|
||||
Reference in New Issue
Block a user