From 7898e93faff27ea2525d03e8c10e5a3f7b337c5b Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Wed, 2 Feb 2022 22:07:43 -0600
Subject: [PATCH] :art: add transition + group hover animation [sc-699]

---
 components/Sections/FactCards.jsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/Sections/FactCards.jsx b/components/Sections/FactCards.jsx
index 1d5434a..c3bb071 100644
--- a/components/Sections/FactCards.jsx
+++ b/components/Sections/FactCards.jsx
@@ -5,15 +5,18 @@ export default function FactCards({ factCardsContent }) {
         <div className="flex flex-wrap -m-4">
           {factCardsContent?.map(({ title, description }, index) => {
             return (
-              <div key={`${index}-fact-card`} className="w-full lg:w-1/2 p-4">
-                <div className="py-12 px-10 rounded-lg bg-white">
-                  <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+              <div
+                key={`${index}-fact-card`}
+                className="group w-full lg:w-1/2 p-4"
+              >
+                <div className="py-12 px-10 rounded-lg bg-white group-hover:bg-indigo-800 transition hover:ease-in ease-out duration-300">
+                  <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 group-hover:bg-indigo-200 text-indigo-50 group-hover:text-indigo-800 font-bold font-heading transition hover:ease-in ease-out duration-700">
                     {index + 1}
                   </span>
-                  <h3 className="mb-4 h-36 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                  <h3 className="mb-4 h-36 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading group-hover:text-white transition hover:ease-in ease-out duration-300">
                     {title}
                   </h3>
-                  <p className="text-lg text-gray-500 leading-loose">
+                  <p className="text-lg text-gray-500 leading-loose group-hover:text-indigo-100 transition hover:ease-in ease-out duration-700">
                     {description}
                   </p>
                 </div>