forked from hero/www_hero_project
edt use cases
This commit is contained in:
parent
dfc3201b30
commit
4c0bd27a91
@ -9,7 +9,7 @@
|
||||
<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>
|
||||
<br>
|
||||
<p class="mt-2 mb-6 lg:mb-2 text-base">We’ve 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">We’ve 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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<h2 class="text-base font-semibold 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-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>
|
||||
<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 text-center tracking-tight text-white sm:text-4xl">Bring Your Vision to Life</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>
|
||||
|
||||
@ -1,122 +1,109 @@
|
||||
<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 lg:max-w-4xl">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Use Cases</h2>
|
||||
<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 class="mt-16 space-y-20 lg:mt-20 lg:space-y-20">
|
||||
<!-- Article 1 -->
|
||||
<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">→</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">→</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">→</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">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="">
|
||||
<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="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<h2 class="text-3xl pt-16 font-bold text-white">Use Cases</h2>
|
||||
<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="grid grid-cols-1 gap-y-12 gap-x-6 lg:gap-x-16 lg:grid-cols-3 xl:gap-x-8">
|
||||
<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">Tier-S Data Center</h3>
|
||||
<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>
|
||||
</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">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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user