55 lines
1.9 KiB
HTML
55 lines
1.9 KiB
HTML
<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
|
|
<div class="mx-auto max-w-7xl px-4 lg:px-8">
|
|
<div class="mx-auto max-w-2xl lg:max-w-none">
|
|
<div class="text-center">
|
|
<h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white capitalize">A Self-Healing Internet Infrastructure</h2>
|
|
<br>
|
|
<h2 class="fade-in text-balance lg:text-4xl text-xl font-normal tracking-tight text-white capitalize">Scalable globally, Green, Unbreakable & Secure</h2>
|
|
|
|
<div class="fade-in relative -mx-4 my-8" aria-hidden="true">
|
|
<img class="fade-in blinking-effect relative mx-auto" src="/images/selfhealing.png" alt="">
|
|
</div>
|
|
|
|
{# <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
|
|
<a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Be Part of Web4</a>
|
|
</div> #}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* 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 */
|
|
}
|
|
|
|
|
|
/* Apply the blinking animation to the link */
|
|
.blinking-effect {
|
|
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
|
}
|
|
|
|
</style>
|
|
|
|
|