edt use cases

This commit is contained in:
sasha-astiadi 2024-08-19 00:04:41 +02:00
parent dfc3201b30
commit 4c0bd27a91
3 changed files with 109 additions and 122 deletions

View File

@ -9,7 +9,7 @@
<h2 class="text-base font-semibold leading-7 text-indigo-400 mb-4">PLATFORM</h2> <h2 class="text-base font-semibold leading-7 text-indigo-400 mb-4">PLATFORM</h2>
<h2 class="tracking-tight lg:text-4xl sm:text-base">Revolutionizing Cloud Infrastructure</h2> <h2 class="tracking-tight lg:text-4xl sm:text-base">Revolutionizing Cloud Infrastructure</h2>
<br> <br>
<p class="mt-2 mb-6 lg:mb-2 text-base">Weve developed an ultra secure planetary-scale edge and AI cloud platform with self-healing capabilities.<br><br> <p class="mt-2 mb-10 lg:mb-2 text-lg">Weve developed an ultra secure planetary-scale edge and AI cloud platform with self-healing capabilities.<br><br>
Our unique technology provides unparalleled sovereignty, scalability and efficiency features that emerging IT workloads require and that traditional cloud infrastructures cannot deliver. Our unique technology provides unparalleled sovereignty, scalability and efficiency features that emerging IT workloads require and that traditional cloud infrastructures cannot deliver.
</p> </p>
</div> </div>

View File

@ -8,9 +8,9 @@
<br> <br>
<br> <br>
<br> <br>
<h2 class="text-base font-semibold leading-8 text-indigo-400">REAL WORLD APPLICATIONS</h2> <h2 class="text-base font-semibold text-center leading-8 text-indigo-400">REAL WORLD APPLICATIONS</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Bring Your Vision to Life</p> <p class="mt-2 text-3xl font-bold text-center tracking-tight text-white sm:text-4xl">Bring Your Vision to Life</p>
<p class="mt-6 text-lg leading-8 text-gray-300">Our stack's versatility allows deployment across various use cases, demonstrating our commitment to providing flexible and adaptable IT solutions for a wide range of industries and applications.</p> <p class="mt-6 text-lg leading-8 text-center text-gray-300">Our stack's versatility allows deployment across various use cases, demonstrating our commitment to providing flexible and adaptable IT solutions for a wide range of industries and applications.</p>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,122 +1,109 @@
<div class="py-24 sm:py-32"> <div class="">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-4xl px-4 py-10 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-4xl"> <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Use Cases</h2> <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
<p class="mt-2 text-lg leading-8 text-gray-50">Uncover how TF9's advanced technology is revolutionizing various industries and delivering exceptional results through our in-depth use cases.</p> </div>
<div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20"> <div class="absolute -bottom-8 -left-96 -z-10 transform-gpu blur-3xl sm:-bottom-64 sm:-left-40 lg:-bottom-32 lg:left-8 xl:-left-10" aria-hidden="true">
<!-- Article 1 --> <div class="aspect-[1266/975] w-[79.125rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
<article class="relative isolate flex flex-col gap-8 lg:flex-row"> </div>
<div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0"> <h2 class="text-3xl pt-16 font-bold text-white">Use Cases</h2>
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover"> <h3 class="text-lg font-light text-gray-50">Uncover how TF9's advanced technology is revolutionizing various industries and delivering exceptional results through our in-depth use cases.</h2>
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div> <div class="grid grid-cols-1 gap-y-12 gap-x-6 lg:gap-x-16 lg:grid-cols-3 xl:gap-x-8">
<div> <div>
<div class="flex items-center gap-x-4 text-xs"> <div class="relative pt-16">
<time datetime="2020-03-16" class="text-gray-50">Mar 16, 2020</time> <div class="relative h-72 w-full overflow-hidden rounded-lg">
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a> <img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
</div> </div>
<div class="group relative max-w-xl"> <div class="relative mt-4">
<h3 class="mt-3 text-lg font-semibold leading-6 text-white group-hover:text-gray-600"> <h3 class="text-sm font-medium text-white">Tier-S Data Center</h3>
<a href="#"> <p class="mt-1 mb-4 text-sm text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
<span class="absolute inset-0"></span> </div>
Tier-S Data Center <div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
</a> <div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
</h3> </div>
<p class="mt-5 text-sm leading-6 text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p> </div>
</div> <div class="mt-6">
<div class="mt-6 flex border-t border-gray-900/5 pt-6"> <a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
<div class="relative flex items-center gap-x-4">
<a href="#" class="text-sm font-semibold leading-6 text-indigo-400 hover:text-indigo-500">Read Use Case <span aria-hidden="true">&rarr;</span></a>
</div>
</div>
</div>
</article>
<!-- Article 2 -->
<article class="relative isolate flex flex-col gap-8 lg:flex-row">
<div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div>
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-50">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative max-w-xl">
<h3 class="mt-3 text-lg font-semibold leading-6 text-white group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Tier-S Data Center
</a>
</h3>
<p class="mt-5 text-sm leading-6 text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
</div>
<div class="mt-6 flex border-t border-gray-900/5 pt-6">
<div class="relative flex items-center gap-x-4">
<a href="#" class="text-sm font-semibold leading-6 text-indigo-400 hover:text-indigo-500">Read Use Case <span aria-hidden="true">&rarr;</span></a>
</div>
</div>
</div>
</article>
<!-- Article 3 -->
<article class="relative isolate flex flex-col gap-8 lg:flex-row">
<div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div>
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-50">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative max-w-xl">
<h3 class="mt-3 text-lg font-semibold leading-6 text-white group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Tier-S Data Center
</a>
</h3>
<p class="mt-5 text-sm leading-6 text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
</div>
<div class="mt-6 flex border-t border-gray-900/5 pt-6">
<div class="relative flex items-center gap-x-4">
<a href="#" class="text-sm font-semibold leading-6 text-indigo-400 hover:text-indigo-500">Read Use Case <span aria-hidden="true">&rarr;</span></a>
</div>
</div>
</div>
</article>
<!-- Article 4 -->
<article class="relative isolate flex flex-col gap-8 lg:flex-row">
<div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div>
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-50">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative max-w-xl">
<h3 class="mt-3 text-lg font-semibold leading-6 text-white group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Tier-S Data Center
</a>
</h3>
<p class="mt-5 text-sm leading-6 text-gray-50">Tier 3 and Tier 4 Data centers are outdated due to the transformative impact of AI.</p>
</div>
<div class="mt-6 flex border-t border-gray-900/5 pt-6">
<div class="relative flex items-center gap-x-4">
<a href="#" class="text-sm font-semibold leading-6 text-indigo-400 hover:text-indigo-500">Read Use Case <span aria-hidden="true">&rarr;</span></a>
</div>
</div>
</div>
</article>
</div> </div>
</div> </div>
<!-- More products... -->
<div>
<div class="relative pt-16">
<div class="relative h-72 w-full overflow-hidden rounded-lg">
<img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
</div>
<div class="relative mt-4">
<h3 class="text-sm font-medium text-white">ThreeFold Grid</h3>
<p class="mt-1 mb-4 text-sm text-gray-50">ThreeFold uses TF9 for their decentralized DePIN network, the biggest of its kind globally.</p>
</div>
<div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
<div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
</div>
</div>
<div class="mt-6">
<a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
</div>
</div>
<!-- More products... -->
<div>
<div class="relative pt-16">
<div class="relative h-72 w-full overflow-hidden rounded-lg">
<img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
</div>
<div class="relative mt-4">
<h3 class="text-sm font-medium text-white">Digital Free Zone</h3>
<p class="mt-1 mb-4 text-sm text-gray-50">Zanzibar is using our technology for the development of a cutting-edge digital free zone.</p>
</div>
<div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
<div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
</div>
</div>
<div class="mt-6">
<a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
</div>
</div>
<!-- More products... -->
<div>
<div class="relative pt-16">
<div class="relative h-72 w-full overflow-hidden rounded-lg">
<img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
</div>
<div class="relative mt-4">
<h3 class="text-sm font-medium text-white">Sovereign Internet for countries</h3>
<p class="mt-1 mb-4 text-sm text-gray-50">By harnessing TF9's advanced solutions, Tanzania is building its own sovereign internet</p>
</div>
<div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
<div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
</div>
</div>
<div class="mt-6">
<a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
</div>
</div>
<!-- 2nd row -->
<div>
<div class="relative pt-6 lg:pt-16 xl:pt-16">
<div class="relative h-72 w-full overflow-hidden rounded-lg">
<img src="https://tailwindui.com/img/ecommerce-images/product-page-03-related-product-01.jpg" alt="usecase" class="h-full w-full object-cover object-center">
</div>
<div class="relative mt-4">
<h3 class="text-sm font-medium text-white">Cyber Pandemic Solution</h3>
<p class="mt-1 mb-4 text-sm text-gray-50">The gravity of cyber threats and our robust solutions to protect against them.</p>
</div>
<div class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4">
<div aria-hidden="true" class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black opacity-50"></div>
</div>
</div>
<div class="mt-6">
<a href="#" class="relative flex items-center justify-center rounded-md border border-transparent bg-indigo-400 px-8 py-2 text-sm font-medium text-white hover:bg-gray-900">Read More</a>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>