Fade in key features by column (#919)

## Description

Fade in key features, ordered by column

Without this change, the rest of the page was visually loading way before the key features section was done

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [x] 🐛 Bugfix

## Test Plan

<!-- How will this be tested prior to merging.-->
- [x] 💪 Manual
This commit is contained in:
Niraj Tolia 2022-09-20 18:16:51 -07:00 committed by GitHub
parent c3176cf113
commit 0155851b59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<div class="col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".3s"> <div class="col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".1s">
<div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900"> <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3"> <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
<i data-feather="zap" class="h-5 w-5 rotate-45"></i> <i data-feather="zap" class="h-5 w-5 rotate-45"></i>
@ -86,7 +86,7 @@
</div> </div>
</div> </div>
<div class="col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".5s"> <div class="col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".1s">
<div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900"> <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3"> <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
<i data-feather="activity" class="h-5 w-5 rotate-45"></i> <i data-feather="activity" class="h-5 w-5 rotate-45"></i>
@ -97,7 +97,7 @@
</div> </div>
</div> </div>
<div class="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".7s"> <div class="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".3s">
<div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900"> <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3"> <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
<i data-feather="lock" class="h-5 w-5 rotate-45"></i> <i data-feather="lock" class="h-5 w-5 rotate-45"></i>
@ -108,7 +108,7 @@
</div> </div>
</div> </div>
<div class="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".9s"> <div class="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".3s">
<div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900"> <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3"> <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
<i data-feather="copy" class="h-5 w-5 rotate-45"></i> <i data-feather="copy" class="h-5 w-5 rotate-45"></i>
@ -119,7 +119,7 @@
</div> </div>
</div> </div>
<div class="lg:col-start-2 md:col-start-2 md:order-last wow animate__animated animate__fadeInUp" data-wow-delay="1.1s"> <div class="lg:col-start-2 md:col-start-2 md:order-last wow animate__animated animate__fadeInUp" data-wow-delay=".3s">
<div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900"> <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3"> <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
<i data-feather="minimize-2" class="h-5 w-5 rotate-45"></i> <i data-feather="minimize-2" class="h-5 w-5 rotate-45"></i>
@ -130,7 +130,7 @@
</div> </div>
</div> </div>
<div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay="1.3s"> <div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay=".5s">
<div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900"> <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3"> <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
<i data-feather="code" class="h-5 w-5 rotate-45"></i> <i data-feather="code" class="h-5 w-5 rotate-45"></i>
@ -141,7 +141,7 @@
</div> </div>
</div> </div>
<div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay="1.5s"> <div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay=".5s">
<div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900"> <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3"> <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
<i data-feather="upload-cloud" class="h-5 w-5 rotate-45"></i> <i data-feather="upload-cloud" class="h-5 w-5 rotate-45"></i>
@ -152,7 +152,7 @@
</div> </div>
</div> </div>
<div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay="1.7s"> <div class="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp" data-wow-delay=".5s">
<div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900"> <div class="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3"> <div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
<i data-feather="check-circle" class="h-5 w-5 rotate-45"></i> <i data-feather="check-circle" class="h-5 w-5 rotate-45"></i>