From 70dae35ffcbc1adc52b9df536507a963f4d43a61 Mon Sep 17 00:00:00 2001
From: Aqib Nawab <aqibnawab1100@gmail.com>
Date: Wed, 19 Mar 2025 20:20:20 +0500
Subject: [PATCH 1/2] add animations into ambassordors card

---
 components/AmbassadorsCard.tsx | 74 +++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/components/AmbassadorsCard.tsx b/components/AmbassadorsCard.tsx
index 68b0b49c8..e5fc17b11 100644
--- a/components/AmbassadorsCard.tsx
+++ b/components/AmbassadorsCard.tsx
@@ -178,39 +178,55 @@ const AmbassadorCard = ({ ambassador }: { ambassador: Ambassador }) => {
         {contributions.length > 0 && (
           <button
             onClick={() => setShowContributions(!showContributions)}
-            className={`w-full bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white dark:text-slate-100 font-semibold py-2 px-4 rounded transition-all duration-300 transform ${
-              showContributions ? 'rotate' : ''
-            }`}
+            className={`w-full bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white dark:text-slate-100 font-semibold py-2 px-4 rounded transition-all duration-300 ${
+              showContributions ? 'shadow-inner' : 'shadow'
+            } flex items-center justify-center`}
           >
-            {showContributions ? 'Hide Details' : 'Show Full Details'}
+            <span className='mr-2'>
+              {showContributions ? 'Hide Details' : 'Show Full Details'}
+            </span>
           </button>
         )}
 
-        {showContributions && contributions.length > 0 && (
-          <div className='mt-4'>
-            <h4 className='text-lg font-semibold mb-2 text-gray-900 dark:text-white'>
-              Contributions
-            </h4>
-            <ul className='text-gray-600 dark:text-slate-100 text-sm'>
-              {contributions.map((contribution, index) => (
-                <li key={index} className='mb-2'>
-                  <strong>{contribution.title}</strong>
-                  {contribution.date &&
-                    ` (${contribution.date.month} ${contribution.date.year})`}{' '}
-                  -
-                  <a
-                    href={contribution.link}
-                    className='text-blue-600 dark:text-blue-400 ml-1 hover:underline'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
-                    {contribution.type}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
+        <div
+          className={`overflow-hidden transition-all duration-300 ease-in-out ${
+            showContributions
+              ? 'max-h-96 opacity-100 mt-4'
+              : 'max-h-0 opacity-0'
+          }`}
+        >
+          <h4 className='text-lg font-semibold mb-2 text-gray-900 dark:text-white'>
+            Contributions
+          </h4>
+          <ul className='text-gray-600 dark:text-slate-100 text-sm'>
+            {contributions.map((contribution, index) => (
+              <li
+                key={index}
+                className='mb-2 transform transition-all duration-300 ease-in-out'
+                style={{
+                  transitionDelay: `${index * 100}ms`,
+                  opacity: showContributions ? 1 : 0,
+                  transform: showContributions
+                    ? 'translateY(0)'
+                    : 'translateY(10px)',
+                }}
+              >
+                <strong>{contribution.title}</strong>
+                {contribution.date &&
+                  ` (${contribution.date.month} ${contribution.date.year})`}{' '}
+                -
+                <a
+                  href={contribution.link}
+                  className='text-blue-600 dark:text-blue-400 ml-1 hover:underline'
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  {contribution.type}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
     </div>
   );

From 72c0025a088d602585e7ef707ca8036e86778cd8 Mon Sep 17 00:00:00 2001
From: Aqib Nawab <aqibnawab1100@gmail.com>
Date: Mon, 24 Mar 2025 21:43:11 +0500
Subject: [PATCH 2/2] fix the Link and use tailwnd css

---
 components/AmbassadorsCard.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/AmbassadorsCard.tsx b/components/AmbassadorsCard.tsx
index e5fc17b11..fc9a6c3f2 100644
--- a/components/AmbassadorsCard.tsx
+++ b/components/AmbassadorsCard.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 
 interface Contribution {
   title: string;
@@ -202,27 +203,25 @@ const AmbassadorCard = ({ ambassador }: { ambassador: Ambassador }) => {
             {contributions.map((contribution, index) => (
               <li
                 key={index}
-                className='mb-2 transform transition-all duration-300 ease-in-out'
-                style={{
-                  transitionDelay: `${index * 100}ms`,
-                  opacity: showContributions ? 1 : 0,
-                  transform: showContributions
-                    ? 'translateY(0)'
-                    : 'translateY(10px)',
-                }}
+                className={`mb-2 transition-all duration-300 ease-in-out ${
+                  showContributions
+                    ? 'opacity-100 translate-y-0'
+                    : 'opacity-0 translate-y-2'
+                }`}
+                style={{ transitionDelay: `${index * 100}ms` }}
               >
                 <strong>{contribution.title}</strong>
                 {contribution.date &&
                   ` (${contribution.date.month} ${contribution.date.year})`}{' '}
                 -
-                <a
+                <Link
                   href={contribution.link}
                   className='text-blue-600 dark:text-blue-400 ml-1 hover:underline'
                   target='_blank'
                   rel='noopener noreferrer'
                 >
                   {contribution.type}
-                </a>
+                </Link>
               </li>
             ))}
           </ul>