From 87865980b89e9527c05b958d1f319f9a0d1e9c72 Mon Sep 17 00:00:00 2001
From: Swetanshu <swetanshusingh17@gmail.com>
Date: Mon, 25 Dec 2023 23:10:16 +0530
Subject: [PATCH 1/3] Added Nav links to expense breakdown components

---
 components/FinancialSummary/ExpenseBreakdown.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/FinancialSummary/ExpenseBreakdown.js b/components/FinancialSummary/ExpenseBreakdown.js
index 2c4666657c56..dc9d9515f3d4 100644
--- a/components/FinancialSummary/ExpenseBreakdown.js
+++ b/components/FinancialSummary/ExpenseBreakdown.js
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import Heading from '../typography/Heading'
 import Paragraph from '../typography/Paragraph'
 
@@ -22,7 +23,7 @@ export default function ExpenseBreakdown() {
                             <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" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Mentorship Program</h2>
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer"><Link href="https://www.asyncapi.com/blog/beyond-boundaries">Mentorship Program</Link></h2>
                                 </div>
                                 <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>
@@ -32,7 +33,7 @@ export default function ExpenseBreakdown() {
                             <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" />
-                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Bounty Program</h2>
+                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal hover:underline cursor-pointer"><Link href="https://github.com/orgs/asyncapi/discussions/541">Bounty Program</Link></h2>
                                 </div>
                                 <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>
@@ -42,7 +43,7 @@ export default function ExpenseBreakdown() {
                             <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" />
-                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Events</h2>
+                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal hover:underline cursor-pointer"><Link href="https://www.asyncapi.com/community/events">Events</Link></h2>
                                 </div>
                                 <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>
@@ -52,7 +53,7 @@ export default function ExpenseBreakdown() {
                             <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" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Swag Store</h2>
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer"><Link href="https://www.store.asyncapi.com/collections/all-products">Swag Store</Link></h2>
                                 </div>
                                 <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>
@@ -62,9 +63,9 @@ export default function ExpenseBreakdown() {
                             <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>
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer"><Link href="https://opencollective.com/">Hiring</Link></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> joins as community manager, with plans to expand the team. 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. <Link href="https://www.linkedin.com/in/v-thulisile-sibanda/"><span className=' cursor-pointer underline'>Thulie</span></Link> joins as community manager, with plans to expand our team.</p>
                             </div>
                         </div>
 
@@ -72,7 +73,7 @@ export default function ExpenseBreakdown() {
                             <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" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Services</h2>
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer"><Link href="https://zoom.us/pricing">Services</Link></h2>
                                 </div>
                                 <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>

From 7e78d9157455d1b5257fc9df07dd274403e21ba0 Mon Sep 17 00:00:00 2001
From: Swetanshu <swetanshusingh17@gmail.com>
Date: Sun, 14 Jan 2024 19:12:57 +0530
Subject: [PATCH 2/3] fix : added links to expense breakdown card

---
 .../FinancialSummary/ExpenseBreakdown.js      | 98 +++++++++++--------
 1 file changed, 55 insertions(+), 43 deletions(-)

diff --git a/components/FinancialSummary/ExpenseBreakdown.js b/components/FinancialSummary/ExpenseBreakdown.js
index 7de53627a643..150e90c9e9fd 100644
--- a/components/FinancialSummary/ExpenseBreakdown.js
+++ b/components/FinancialSummary/ExpenseBreakdown.js
@@ -19,65 +19,77 @@ 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 cursor-pointer"onClick={() => window.open('https://www.asyncapi.com/blog/beyond-boundaries', '_blank')}>
-                            <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" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer"><Link href="https://www.asyncapi.com/blog/beyond-boundaries">Mentorship Program</Link></h2>
+                    <Link href="https://www.asyncapi.com/blog/beyond-boundaries">
+                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
+                                <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" />
+                                        <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer">Mentorship Program</h2>
+                                    </div>
+                                    <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>
-                                <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>
+                        </Link>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer"onClick={() => window.open('https://github.com/orgs/asyncapi/discussions/541', '_blank')}>
-                            <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" />
-                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal hover:underline cursor-pointer"><Link href="https://github.com/orgs/asyncapi/discussions/541">Bounty Program</Link></h2>
+                        <Link href="https://github.com/orgs/asyncapi/discussions/541">    
+                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
+                                <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" />
+                                        <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal hover:underline cursor-pointer">Bounty Program</h2>
+                                    </div>
+                                    <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>
-                                <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 cursor-pointer"onClick={() => window.open('https://www.asyncapi.com/community/events', '_blank')}>
-                            <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" />
-                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal hover:underline cursor-pointer"><Link href="https://www.asyncapi.com/community/events">Events</Link></h2>
+                        </Link>
+                        
+                        <Link href="https://www.asyncapi.com/community/events">
+                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
+                                <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" />
+                                        <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal hover:underline cursor-pointer">Events</h2>
+                                    </div>
+                                    <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>
-                                <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>
+                        </Link>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer"onClick={() => window.open('https://www.store.asyncapi.com/collections/all-products', '_blank')}>
-                            <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" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer"><Link href="https://www.store.asyncapi.com/collections/all-products">Swag Store</Link></h2>
+                        <Link href="https://www.store.asyncapi.com/collections/all-products">
+                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
+                                <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" />
+                                        <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer">Swag Store</h2>
+                                    </div>
+                                    <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>
-                                <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>
+                        </Link>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer"onClick={() => window.open('https://opencollective.com', '_blank')}>
-                            <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 hover:underline cursor-pointer"><Link href="https://opencollective.com/">Hiring</Link></h2>
+                        <Link href="https://opencollective.com/">
+                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
+                                <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 hover:underline cursor-pointer">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. <Link href="https://www.linkedin.com/in/v-thulisile-sibanda/"><span className=' cursor-pointer underline'>Thulie</span></Link> joins as community manager, with plans to expand our team.</p>
                                 </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. <Link href="https://www.linkedin.com/in/v-thulisile-sibanda/"><span className=' cursor-pointer underline'>Thulie</span></Link> joins as community manager, with plans to expand our team.</p>
                             </div>
-                        </div>
+                        </Link>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer"onClick={() => window.open('https://zoom.us/pricing', '_blank')}>
-                            <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" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer"><Link href="https://zoom.us/pricing">Services</Link></h2>
+                        <Link href="https://zoom.us/pricing">
+                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
+                                <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" />
+                                        <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer">Services</h2>
+                                    </div>
+                                    <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>
-                                <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>
+                        </Link>
 
                     </div>
                 </div>

From 54af16f976374b152bf898a6f40c577965e77fb2 Mon Sep 17 00:00:00 2001
From: Swetanshu <swetanshusingh17@gmail.com>
Date: Fri, 23 Feb 2024 23:29:13 +0530
Subject: [PATCH 3/3] update : add shadow on cards & passhref to links

---
 .../FinancialSummary/ExpenseBreakdown.js      | 108 ++++++++++--------
 1 file changed, 60 insertions(+), 48 deletions(-)

diff --git a/components/FinancialSummary/ExpenseBreakdown.js b/components/FinancialSummary/ExpenseBreakdown.js
index 150e90c9e9fd..89cbd1ab323c 100644
--- a/components/FinancialSummary/ExpenseBreakdown.js
+++ b/components/FinancialSummary/ExpenseBreakdown.js
@@ -19,76 +19,88 @@ export default function ExpenseBreakdown() {
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-10 mt-8 mx-3">
 
-                    <Link href="https://www.asyncapi.com/blog/beyond-boundaries">
-                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
-                                <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" />
-                                        <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer">Mentorship Program</h2>
+                        <Link href="https://www.asyncapi.com/blog/beyond-boundaries" passHref>
+                            <a>
+                                <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer hover:shadow-xl transition-shadow">
+                                    <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" />
+                                            <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Mentorship Program</h2>
+                                        </div>
+                                        <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>
-                                    <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>
                         </Link>
 
-                        <Link href="https://github.com/orgs/asyncapi/discussions/541">    
-                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
-                                <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" />
-                                        <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal hover:underline cursor-pointer">Bounty Program</h2>
+                        <Link href="https://github.com/orgs/asyncapi/discussions/541" passHref>
+                            <a>    
+                                <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer hover:shadow-xl transition-shadow">
+                                    <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" />
+                                            <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Bounty Program</h2>
+                                        </div>
+                                        <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>
-                                    <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>
+                            </a>
                         </Link>
                         
-                        <Link href="https://www.asyncapi.com/community/events">
-                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
-                                <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" />
-                                        <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal hover:underline cursor-pointer">Events</h2>
+                        <Link href="https://www.asyncapi.com/community/events" passHref>
+                            <a>
+                                <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer hover:shadow-xl transition-shadow">
+                                    <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" />
+                                            <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Events</h2>
+                                        </div>
+                                        <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>
-                                    <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>
+                            </a>
                         </Link>
 
-                        <Link href="https://www.store.asyncapi.com/collections/all-products">
-                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
-                                <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" />
-                                        <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer">Swag Store</h2>
+                        <Link href="https://www.store.asyncapi.com/collections/all-products" passHref>
+                            <a>
+                                <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer hover:shadow-xl transition-shadow">
+                                    <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" />
+                                            <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Swag Store</h2>
+                                        </div>
+                                        <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>
-                                    <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>
                         </Link>
 
-                        <Link href="https://opencollective.com/">
-                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
-                                <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 hover:underline cursor-pointer">Hiring</h2>
+                        <Link href="https://opencollective.com/" passHref>
+                            <a>
+                                <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer hover:shadow-xl transition-shadow">
+                                    <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. <Link href="https://www.linkedin.com/in/v-thulisile-sibanda/"><span className=' cursor-pointer underline'>Thulie</span></Link> joins as community manager, with plans to expand our team.</p>
                                     </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. <Link href="https://www.linkedin.com/in/v-thulisile-sibanda/"><span className=' cursor-pointer underline'>Thulie</span></Link> joins as community manager, with plans to expand our team.</p>
                                 </div>
-                            </div>
+                            </a>
                         </Link>
 
-                        <Link href="https://zoom.us/pricing">
-                            <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer">
-                                <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" />
-                                        <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal hover:underline cursor-pointer">Services</h2>
+                        <Link href="https://zoom.us/pricing" passHref>
+                            <a>
+                                <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center cursor-pointer hover:shadow-xl transition-shadow">
+                                    <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" />
+                                            <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Services</h2>
+                                        </div>
+                                        <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>
-                                    <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>
                         </Link>
 
                     </div>