From 4a02761879ca31ec1eec3e48708e537fbe173525 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Fri, 24 Nov 2023 09:39:16 +0000
Subject: [PATCH] feat: faqs animation

---
 .github/workflows/trello.yml              |  4 ++--
 layout/FAQs/components/Question/index.tsx | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/trello.yml b/.github/workflows/trello.yml
index cc4842dd..a449624e 100644
--- a/.github/workflows/trello.yml
+++ b/.github/workflows/trello.yml
@@ -10,8 +10,8 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    steps: 
-      # Link PR to Trello    
+    steps:
+      # Link PR to Trello
       - name: Link to Trello
         uses: rematocorp/trello-integration-action@v7.1.0
         with:
diff --git a/layout/FAQs/components/Question/index.tsx b/layout/FAQs/components/Question/index.tsx
index cfb5f589..d4b49686 100644
--- a/layout/FAQs/components/Question/index.tsx
+++ b/layout/FAQs/components/Question/index.tsx
@@ -21,7 +21,13 @@ export default function Question({
       <h2 className="font-terminal-uppercase mb-4 text-2xl md:text-4xl">
         {title}
       </h2>
-      {showQuestion && <p>{description}</p>}
+      <div
+        className={`transition-max-height overflow-hidden duration-300 ${
+          showQuestion ? "max-h-48 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        {description && <p>{description}</p>}
+      </div>
       <div className="flex items-center justify-end">
         <Link
           href={href}
@@ -30,7 +36,7 @@ export default function Question({
           {link}
         </Link>
         <button
-          className="font-terminal-uppercase w-16 rounded-full bg-quinary px-2 text-xl text-white"
+          className="font-terminal-uppercase w-16 transform rounded-full bg-quinary px-2 text-xl text-white transition-transform duration-300 hover:scale-110"
           onClick={() =>
             setShowQuestion((prevShowQuestion) => !prevShowQuestion)
           }