52 lines
2.3 KiB
HTML
52 lines
2.3 KiB
HTML
<section class="flex items-center justify-center isolate overflow-hidden h-auto lg:h-screen">
|
|
<div class="mt-10 lg:mt-1 max-w-7xl mx-auto px-6 lg:px-16 flex flex-col-reverse lg:flex-row items-center ">
|
|
|
|
<!-- Left Content -->
|
|
<div class="w-full lg:w-1/2 lg:text-left">
|
|
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Company Profile</h2>
|
|
<p class="mx-auto mt-6 text-pretty text-lg font-medium text-gray-200 fade-in">ThreeFold is a pioneering decentralized Internet project designed to create a more open, secure, and sustainable digital infrastructure. By leveraging a global peer-to-peer network of independent nodes, ThreeFold eliminates reliance on centralized cloud providers, ensuring greater privacy, resilience, and accessibility. This innovative model empowers individuals and organizations to contribute computing, storage, and networking resources to the ThreeFold Grid, forming the foundation for a truly autonomous and resilient
|
|
<br><br>We are currently running V3.16, a large-scale proof of concept network and are now preparing for Version 4, a major upgrade to enable our Web4 vision. The ThreeFold Grid is in more than 50 countries with +2000 nodes online providing data, network and cloud resources to users.</p>
|
|
|
|
</div>
|
|
|
|
<!-- Right Image -->
|
|
<div class="w-full lg:w-1/2 flex justify-center">
|
|
<img src="/images/media_kit.png" alt="AIBox Specifications" class="blinking-effect w-full max-w-md lg:max-w-lg h-auto">
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
|
|
/* Apply the blinking animation to the link */
|
|
.blinking-effect {
|
|
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
|
}
|
|
|
|
/* Define the fade-in 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 */
|
|
}
|
|
</style>
|
|
|
|
|