42 lines
3.8 KiB
HTML
42 lines
3.8 KiB
HTML
<div class="overflow-hidden bg-transparent py-16 lg:py-24">
|
||
<div class="relative mx-auto max-w-xl 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-4xl leading-snug font-normal tracking-tight text-white">Unlock the Web4 Revolution with ThreeFold</h2>
|
||
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||
From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
|
||
</div>
|
||
<div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
|
||
<!-- Image on the left and text on the right -->
|
||
<div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
|
||
<img class="fade-in blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
|
||
</div>
|
||
|
||
<!-- Text on the left -->
|
||
<div class="relative p-4"> <!-- Add padding here for all sides -->
|
||
<div class="gap-y-4">
|
||
<div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Phone</dt>
|
||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</dd>
|
||
<a href="#" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||
</div>
|
||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">TF Genie</dt>
|
||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</dd>
|
||
<a href="#" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||
</div>
|
||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Nodes</dt>
|
||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</dd>
|
||
<a href="#" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||
</div>
|
||
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
|
||
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Router</dt>
|
||
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</dd>
|
||
<a href="#" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|