From bfc729cbe3dd052d84b8c8e19c62ba186302bf78 Mon Sep 17 00:00:00 2001
From: vivek310111 <vivekjinadra31@gmail.com>
Date: Mon, 12 Feb 2024 19:03:40 +0530
Subject: [PATCH] fix:added navigation links to expense breakdown and also
 added a hover effect

---
 .../FinancialSummary/ExpenseBreakdown.js      | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/components/FinancialSummary/ExpenseBreakdown.js b/components/FinancialSummary/ExpenseBreakdown.js
index f91a3083bc48..aeeab62ed850 100644
--- a/components/FinancialSummary/ExpenseBreakdown.js
+++ b/components/FinancialSummary/ExpenseBreakdown.js
@@ -18,7 +18,8 @@ export default function ExpenseBreakdown() {
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-10 mt-8 mx-3">
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        <a href='https://www.asyncapi.com/blog/beyond-boundaries' target='_blank'>                      
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center transform transition-transform hover:scale-110 active:scale-90">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/MentorshipProgram.webp" alt="Mentorship Program" className="w-1/5 h-auto object-cover rounded-md m-1" />
@@ -27,8 +28,10 @@ export default function ExpenseBreakdown() {
                                 <p className="text-base text-center text-darkGunMetal">Our AsyncAPI Mentorship program offers paid guidance to develop valuable features, investing in tools and motivated individuals for community benefit.</p>
                             </div>
                         </div>
+                        </a>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                      <a href='https://github.com/orgs/asyncapi/discussions/963' target='_blank'>
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center transform transition-transform hover:scale-110 active:scale-90">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/BountyProgram.webp" alt="Bounty Program" className="w-1/5 h-auto object-cover rounded-md m-1" />
@@ -37,8 +40,10 @@ export default function ExpenseBreakdown() {
                                 <p className="text-base text-center text-darkGunMetal">Rewarding contributors regardless of affiliation or volunteer status. Free mentoring and support for newcomers to build portfolios and unlock tech prospects.</p>
                             </div>
                         </div>
-
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                      </a>
+                        
+                        <a href='https://github.com/orgs/asyncapi/discussions/categories/asyncapi-conf-2022-organization'  target='_blank'>                       
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center transform transition-transform hover:scale-110 active:scale-90">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/Events.webp" alt="Events" className="w-1/5 h-auto object-cover rounded-md m-1" />
@@ -47,8 +52,10 @@ export default function ExpenseBreakdown() {
                                 <p className="text-base text-center text-darkGunMetal">Supporting AsyncAPI conferences incurs costs for services and travel arrangements. Your contributions facilitate event hosting and community growth.</p>
                             </div>
                         </div>
-
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        </a>
+                    
+                         <a href='https://www.store.asyncapi.com/' target='_blank'>
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center transform transition-transform hover:scale-110 active:scale-90">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/SwagStore.webp" alt="Swag Store" className="w-1/5 h-auto object-cover rounded-md m-1" />
@@ -57,18 +64,22 @@ export default function ExpenseBreakdown() {
                                 <p className="text-base text-center text-darkGunMetal">Creating a swag store for seamless distribution to contributors, mentees, ambassadors, and community members. Store profits can fund complimentary swag expenses.</p>
                             </div>
                         </div>
+                        </a>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        <a href='https://github.com/orgs/asyncapi/discussions/515' target='_blank'> 
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center transform transition-transform hover:scale-110 active:scale-90">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/Hiring.webp" alt="Hiring" className="w-1/5 h-auto object-cover rounded-md m-1" />
                                     <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Hiring</h2>
                                 </div>
-                                <p className="text-base text-center text-darkGunMetal">To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{ textDecoration: "underline" }} href="https://www.linkedin.com/in/v-thulisile-sibanda/" target='_blank'>Thulie</a> joined us as a community manager, with plans to expand our team.</p>
+                                <p className="text-base text-center text-darkGunMetal">To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{ textDecoration: "underline" }} href="https://www.linkedin.com/in/v-thulisile-sibanda/" target='_blank'>Thulie</a> has joined us as a community manager, with plans to expand our team.</p>
                             </div>
                         </div>
-
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        </a>
+                        
+                        <a href='https://github.com/orgs/asyncapi/discussions/295' target='_blank'>
+                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center transform transition-transform hover:scale-110 active:scale-90" >
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/Services.webp" alt="Services" className="w-1/5 h-auto object-cover rounded-md m-1" />
@@ -77,6 +88,7 @@ export default function ExpenseBreakdown() {
                                 <p className="text-base text-center text-darkGunMetal">Occasionally, we must pay for services such as Zoom or Descript, as they are not available through specific Open Source support programs.</p>
                             </div>
                         </div>
+                        </a>
 
                     </div>
                 </div>