Fix responsive ordering of key features (#905)

## Description

Fix responsive ordering of key features

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [ ] 🌻 Feature
- [x] 🐛 Bugfix
- [ ] 🗺️ Documentation
- [ ] 🤖 Test
- [ ] 💻 CI/Deployment
- [ ] 🐹 Trivial/Minor

## Issue(s)

## Test Plan

<!-- How will this be tested prior to merging.-->
- [x] 💪 Manual
- [ ]  Unit test
- [ ] 💚 E2E
This commit is contained in:
Georgi Matev 2022-09-19 22:19:05 -04:00 committed by GitHub
parent 41bb3ee6f9
commit 01476561fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -63,8 +63,8 @@
<p class="text-slate-400 max-w-xl mx-auto">See why Corso is a perfect fit for your Microsoft 365 backup and recovery needs.</p>
</div><!--end grid-->
<div class="grid md:grid-cols-12 grid-cols-1 gap-[30px] mt-8">
<div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay=".1s">
<div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row-dense gap-[30px] mt-8">
<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 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="share-2" class="h-5 w-5 rotate-45"></i>
@ -75,29 +75,7 @@
</div>
</div>
<div class="lg:col-span-4 md:col-span-6 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 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>
</div>
<div class="flex-1">
<h4 class="mb-0 text-lg font-medium">End-to-End Encryption</h4>
</div>
</div>
</div>
<div class="lg:col-span-4 md:col-span-6 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 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>
</div>
<div class="flex-1">
<h4 class="mb-0 text-lg font-medium">Open Source</h4>
</div>
</div>
</div>
<div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay=".7s">
<div class="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 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>
@ -108,29 +86,7 @@
</div>
</div>
<div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay=".9s">
<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">
<i data-feather="copy" class="h-5 w-5 rotate-45"></i>
</div>
<div class="flex-1">
<h4 class="mb-0 text-lg font-medium">Deduplication</h4>
</div>
</div>
</div>
<div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay="1.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 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>
</div>
<div class="flex-1">
<h4 class="mb-0 text-lg font-medium">Choice of Object Storage</h4>
</div>
</div>
</div>
<div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay="1.3s">
<div class="col-start-1 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 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>
@ -141,7 +97,29 @@
</div>
</div>
<div class="lg:col-span-4 md:col-span-6 wow animate__animated animate__fadeInUp" data-wow-delay="1.5s">
<div class="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".7s">
<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">
<i data-feather="lock" class="h-5 w-5 rotate-45"></i>
</div>
<div class="flex-1">
<h4 class="mb-0 text-lg font-medium">End-to-End Encryption</h4>
</div>
</div>
</div>
<div class="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp" data-wow-delay=".9s">
<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">
<i data-feather="copy" class="h-5 w-5 rotate-45"></i>
</div>
<div class="flex-1">
<h4 class="mb-0 text-lg font-medium">Deduplication</h4>
</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="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">
<i data-feather="minimize-2" class="h-5 w-5 rotate-45"></i>
@ -152,7 +130,29 @@
</div>
</div>
<div class="lg:col-span-4 md:col-span-6 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="1.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 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>
</div>
<div class="flex-1">
<h4 class="mb-0 text-lg font-medium">Open Source</h4>
</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="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">
<i data-feather="upload-cloud" class="h-5 w-5 rotate-45"></i>
</div>
<div class="flex-1">
<h4 class="mb-0 text-lg font-medium">Choice of Object Storage</h4>
</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="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">
<i data-feather="check-circle" class="h-5 w-5 rotate-45"></i>