Added sponsors description responsiveness

src/app/donate/page.js

@@ -19,9 +19,9 @@ const page = () => {
   return (
     <div className="flex justify-center flex-col items-center font-sans">
       <PageTitle title="SPONSORS" />
-      <div className=" w-7/12">
-        <div className="grid grid-cols-3 my-8 gap-4">
-          <div className="flex justify-center">
+      <div className=" w-7/12 justify-center">
+        <div className="grid md:grid-cols-3 my-8 gap-4">
+          <div className="hidden md:flex justify-center">
             <Image src={Image1} alt="building rocket" />
           </div>
 
@@ -30,6 +30,10 @@ const page = () => {
           </div>
         </div>
 
+        <div className="block md:hidden itmes-center justify-center">
+          <Image src={Image1} alt="" />
+        </div>
+
         <div>
           {newTexts.map((paragraph, index) => (
             <Description
@@ -40,11 +44,11 @@ const page = () => {
           ))}
         </div>
 
-        <div className="grid grid-cols-3 ">
-          <div className=" grid col-span-2">
+        <div className="grid md:grid-cols-3 ">
+          <div className=" grid md:col-span-2">
             <Description key={0} title={last.heading} texts={last.para} />
           </div>
-          <div className="flex justify-center items-center">
+          <div className="block md:flex justify-center items-center">
             <Image src={Image2} alt="college ranking" />
           </div>
         </div>

src/components/PageTitle.js

@@ -6,7 +6,7 @@ const PageTitle = ({ title }) => {
   return (
     <div className="relative">
       <Image src={starBackground} alt="Star Background" className=" w-full" />
-      <div class="font-montserrat absolute top-28 inset-x-0 text-white text-5xl font-bold text-center">
+      <div class="hidden md:block font-montserrat absolute top-28 inset-x-0 text-white text-5xl font-bold text-center">
         {title}
       </div>
     </div>

src/components/donate/Contact.js

@@ -6,7 +6,7 @@ const Contact = () => {
       <div className="mt-3 md:mt-5 text-3xl lg:text-6xl font-urbanist font-extrabold ">
         Contact Us
       </div>
-      <div className=" font-sans text-xs lg:text-lg md:text-sm mt-4">
+      <div className=" font-sans text-base lg:text-lg mt-4">
         <div className="mb-4">[email protected] </div>
 
         <div className="font-extrabold">Javen Dosanjh</div>

src/components/donate/Descriptions.js

@@ -2,13 +2,16 @@ import React from "react";
 
 const Descriptions = ({ title, texts }) => {
   return (
-    <div>
-      <div className="font-montserrat text-3xl font-bold leading-10 my-2">
+    <div className="text-center md:justify-start">
+      <div className="font-montserrat md:text-3xl text-xl font-bold leading-10 my-2">
         {title}
       </div>
 
       {texts.map((text, index) => (
-        <div key={index} className="font-sans text-lg mb-3 leading-9">
+        <div
+          key={index}
+          className="font-sans md:text-lg text-base mb-3 md:leading-9 leading-8"
+        >
           <p>{text}</p>
         </div>
       ))}

src/components/donate/Donate.js

@@ -5,7 +5,7 @@ const Donate = () => {
   return (
     <Link
       href="#"
-      className="bg-hsp-green text-white text-5xl font-urbanist font-black underline flex justify-center items-center rounded-full w-3/12 my-7 py-3 underline-offset-4 hover:scale-105"
+      className="bg-hsp-green text-white text-xl lg:text-5xl font-urbanist font-black underline flex justify-center items-center rounded-full w-4/12 lg:w-3/12 my-7 py-2 underline-offset-4 hover:scale-105"
     >
       Donate Here
     </Link>

src/components/donate/Sponsors.js

@@ -3,7 +3,7 @@ import Image from "next/image";
 
 const Sponsors = ({ logos }) => {
   return (
-    <div className="my-12 text-center flex flex-col justify-center items-center h-full">
+    <div className="mt-12 text-center flex flex-col justify-center items-center h-full">
       <div className="mb-2 text-3xl lg:text-6xl font-extrabold font-urbanist">
         Sponsors
       </div>

src/components/donate/Table.js

@@ -3,7 +3,7 @@ import React from "react";
 const Table = () => {
   return (
     <div className="text-center w-full flex flex-col justify-center items-center font-sans">
-      <div className="text-3xl w-full mt-10 mb-6">BENEFITS TIER TABLE</div>
+      <div className="text-xl lg:text-3xl w-full mb-6">BENEFITS TIER TABLE</div>
 
       <table className="table-auto border border-black mb-4 lg:text-xl w-7/12 ">
         <thead>

src/components/projects/poseidon/Description.js

@@ -10,7 +10,7 @@ const Description = ({ title, texts }) => {
       {texts.map((text, index) => (
         <div
           key={index}
-          className="font-sans text-base lg:text-lg mb-3 leading-9"
+          className="font-sans text-base lg:text-lg mb-3 leading-8 lg:leading-9"
         >
           <p>{text}</p>
         </div>