From b7e90da2ec5607e9dc3e5d759ff52f16f7e60c9a Mon Sep 17 00:00:00 2001
From: Vishvamsinh Vaghela <vaghelavishvamsinh11111@gmail.com>
Date: Mon, 4 Sep 2023 11:11:31 +0530
Subject: [PATCH] sponsorship tier reposiveness issue fixed

---
 .../FinancialSummary/SponsorshipTiers.js      | 32 +++++++++----------
 pages/finance.js                              |  7 ++--
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/components/FinancialSummary/SponsorshipTiers.js b/components/FinancialSummary/SponsorshipTiers.js
index 199cbb0971b..e341df5cd32 100644
--- a/components/FinancialSummary/SponsorshipTiers.js
+++ b/components/FinancialSummary/SponsorshipTiers.js
@@ -5,7 +5,7 @@ function SponsorshipTiers() {
     return (
         <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center mt-16 bg-purple-100">
             <div className="col-start-2 col-span-7 my-12">
-                <div id="sponsorship">
+                <div id="sponsorship" className="mx-2">
                     <Heading level="h1" typeStyle="heading-md my-3 mx-3">
                         <h1 id="sponsorship-tiers" className="text-4xl">Sponsorship Tiers</h1>
                     </Heading>
@@ -22,39 +22,39 @@ function SponsorshipTiers() {
                         <table className="my-8 w-full max-w-full border-collapse border border-gray-500">
                             <thead className="bg-[#805CDA] text-lg text-white">
                                 <tr>
-                                    <th className="border border-gray-500 px-6 py-4 md:px-10 md:py-6 text-2xl">Tiers</th>
-                                    <th className="border border-gray-500 px-6 py-4 md:px-10 md:py-6 text-2xl">Amounts</th>
-                                    <th className="border border-gray-500 px-6 py-4 md:px-10 md:py-6 text-2xl">Benefits</th>
+                                    <th className="border border-gray-500 md:px-6 md:py-4 md:px-10 md:py-6 md:text-2xl">Tiers</th>
+                                    <th className="border border-gray-500 md:px-6 md:py-4 md:px-10 md:py-6 md:text-2xl">Amounts</th>
+                                    <th className="border border-gray-500 md:px-6 md:py-4 md:px-10 md:py-6 md:text-2xl">Benefits</th>
                                 </tr>
 
                             </thead>
 
                             <tbody className="text-sm font-normal">
                                 <tr>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-base text-[#212526]">Bronze</td>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-base text-[#212526]">$100/month</td>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-left text-base text-[#212526]">
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-base text-[#212526]">Bronze</td>
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-base text-[#212526]">$100/month</td>
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 text-left md:text-base text-[#212526]">
                                         Company logo in README on GitHub
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-base text-[#212526]">Silver</td>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-base text-[#212526]">$500/month</td>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-left text-base text-[#212526]">
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-base text-[#212526]">Silver</td>
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-base text-[#212526]">$500/month</td>
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 text-left md:text-base text-[#212526]">
                                         Company logo in README on GitHub and asyncapi.com
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-base text-[#212526]">Gold</td>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-base text-[#212526]">$1000/month</td>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-left text-base text-[#212526]">
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-base text-[#212526]">Gold</td>
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-base text-[#212526]">$1000/month</td>
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-left text-base text-[#212526]">
                                         Company logo in README on GitHub and asyncapi.com
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-base text-[#212526]">Platinum</td>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-base text-[#212526]">$2000/month</td>
-                                    <td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2 text-left text-base text-[#212526]">
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-base text-[#212526]">Platinum</td>
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 md:text-base text-[#212526]">$2000/month</td>
+                                    <td className="border border-gray-500 p-2 md:px-6 md:py-2 md:px-10 md:py-2 text-left md:text-base text-[#212526]">
                                         Company logo in README on GitHub and asyncapi.com.
                                         Up to 2 hours of support per month. Support will be
                                         remote with the option of a shared screen or via private chat.
diff --git a/pages/finance.js b/pages/finance.js
index a7390d046f7..75989fdfb7b 100644
--- a/pages/finance.js
+++ b/pages/finance.js
@@ -14,11 +14,12 @@ import { useEffect, useState } from 'react'
 function FinancialSummary() {
   const [windowWidth, setWindowWidth] = useState(0);
 
+  const handleResize = () => {
+    setWindowWidth(window.innerWidth);
+  };
+  
   // Update the window width when the component mounts and when the window is resized
   useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
 
     // Initial width
     handleResize();