added icons and enhanced design

components/FinancialSummary/AsyncAPISummary.js

@@ -20,7 +20,7 @@ function AsyncAPISummary() {
             <div className="flex justify-center my-4">
                 <Button
                     text="Become a Sponsor"
-                    href="https://github.com/sponsors/asyncapi"
+                    href="https://opencollective.com/asyncapi#category-CONTRIBUTE"
                 />
             </div>
             <hr className="my-12 border-t border-gray-300" />
@@ -35,13 +35,13 @@ function AsyncAPISummary() {
             </div>
             <div className="text-center">
                 <a href="https://opencollective.com/asyncapi">
-                    <img className="mx-2 inline" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/800px-Square_-_black_simple.svg.png" alt="Open Collective" width="50px" height="50px" />
+                    <img className="mx-2 inline" src="/img/finance/OpenCollective.png" alt="Open Collective" width="60px" height="60px" />
                 </a>
                 <a href="https://crowdfunding.lfx.linuxfoundation.org/projects/445898e9-42a2-4965-9e0a-c2a714f381bc">
-                    <img className="mx-2 inline" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/800px-Square_-_black_simple.svg.png" alt="Linux Foundation" width="50px" height="50px" />
+                    <img className="mx-2 inline" src="/img/finance/LFX.png" alt="Linux Foundation" width="50px" height="50px" />
                 </a>
                 <a href="https://github.com/sponsors/asyncapi">
-                    <img className="mx-2 inline" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/800px-Square_-_black_simple.svg.png" alt="Github" width="50px" height="50px" />
+                    <img className="mx-2 inline" src="/img/finance/GitHub.png" alt="Github" width="60px" height="60px" />
                 </a>
             </div>
 

components/FinancialSummary/ExpenseBreakdown.js

@@ -7,32 +7,32 @@ const cardsData = [
     {
         title: "Mentorship Program",
         body: "Our AsyncAPI Mentorship program offers paid guidance to develop valuable features, investing in tools and motivated individuals for community benefit.",
-        image: "https://avatars.githubusercontent.com/u/16401334?s=280&v=4",
+        image: "/img/finance/expense_1.png",
     },
     {
         title: "Bounty Program",
         body: "Rewarding contributors regardless of affiliation or volunteer status. Free mentoring and support for newcomers to build portfolios and unlock tech prospects.",
-        image: "https://avatars.githubusercontent.com/u/16401334?s=280&v=4",
+        image: "/img/finance/expense_2.png",
     },
     {
         title: "Events",
         body: "Supporting AsyncAPI conferences incurs costs for services and travel arrangements. Your contributions facilitate event hosting and community growth.",
-        image: "https://avatars.githubusercontent.com/u/16401334?s=280&v=4",
+        image: "/img/finance/expense_3.png",
     },
     {
         title: "Swag Store",
         body: "Creating a swag store for seamless distribution to contributors, mentees, ambassadors, and community members. Store profits can fund complimentary swag expenses.",
-        image: "https://avatars.githubusercontent.com/u/16401334?s=280&v=4",
+        image: "/img/finance/expense_4.png",
     },
     {
         title: "Hiring",
         body: "To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. Thulie joins as community manager, with plans to expand the team. our team",
-        image: "https://avatars.githubusercontent.com/u/16401334?s=280&v=4",
+        image: "/img/finance/expense_5.png",
     },
     {
         title: "Services",
         body: "Occasionally, we must pay for services such as Zoom or Descript, as they are not available through specific Open Source support programs.",
-        image: "https://avatars.githubusercontent.com/u/16401334?s=280&v=4",
+        image: "/img/finance/expense_6.png",
     },
 ];
 

components/FinancialSummary/OtherFormsOfFinancialSupport.js

@@ -7,9 +7,9 @@ function OtherFormsOfFinancialSupport() {
         <Container wide>
             <div className="flex flex-wrap lg:justify-center lg:items-start my-8">
                 <div className="flex sm:flex-col gap-2 flex-row">
-                    <img className="mx-2 hidden lg:block" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/800px-Square_-_black_simple.svg.png" alt="Image 1" width="150px" height="150px" />
-                    <img className="mx-2 hidden lg:block" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/800px-Square_-_black_simple.svg.png" alt="Image 2" width="150px" height="150px" />
-                    <img className="mx-2 hidden lg:block" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/800px-Square_-_black_simple.svg.png" alt="Image 3" width="150px" height="150px" />
+                    <img className="mx-6 my-7 hidden lg:block" src="/img/finance/other_1.png" alt="Image 1" width="100px" height="100px" />
+                    <img className="mx-6 my-7 hidden lg:block" src="/img/finance/other_2.png" alt="Image 2" width="100px" height="100px" />
+                    <img className="mx-6 my-7 hidden lg:block" src="/img/finance/other_3.png" alt="Image 3" width="100px" height="100px" />
                 </div>