fix: made banner section responsive

apps/academy/src/pages/index.tsx

@@ -13,7 +13,7 @@ const Home: NextPageWithLayout = () => {
       {/* HeroSection */}
       <div className=" mt-[150px] md:mb-[118px] md:mt-[230px]">
         <div className=" flex flex-col items-center justify-center text-white">
-          <h1 className=" text-bttf text-center text-5xl tracking-wide  lg:text-[100px]">
+          <h1 className=" text-bttf text-center text-5xl text-[50px] tracking-wide  lg:text-[100px]">
             <span className=" md:ml-[50px]">LEArn</span>
             <br />
             <span>WEB3__</span>
@@ -34,8 +34,8 @@ const Home: NextPageWithLayout = () => {
             </span>
           </h1>
 
-          <div className=" flex flex-col items-center justify-center ">
-            <div className="mt-[10px] max-w-[495px] px-10 text-center text-lg font-light md:mt-[50px] md:px-0 md:text-2xl">
+          <div className=" mb-[7px] mt-[87px] flex flex-col items-center justify-center md:mb-0 md:mt-[50px] ">
+            <div className="  max-w-[495px] px-10 text-center text-lg font-light   md:px-0 md:text-2xl">
               <p>Become a web3 developer with Developer DAO.</p>
             </div>
             <div className="hidden w-full items-center justify-center md:mt-[20px] md:flex">
@@ -49,12 +49,12 @@ const Home: NextPageWithLayout = () => {
 
       {/* Banner Section */}
       <div className=" flex flex-col items-center justify-center">
-        <div>
+        <div className=" m-2 md:p-0">
           <div id="learn-web3" className="lg:pt-16">
             <LearnWeb3Banner href="/tracks" />{" "}
           </div>
         </div>
-        <div>
+        <div className=" m-2 md:p-0">
           <div id="partners" className="  pb-4 pt-16">
             <PartnerBanner
               href="https://airtable.com/appDMMIARfSeiovpk/shrZExypPetXEx6Ox"

packages/ui/src/components/Banners/LearnWeb3Banner.tsx

@@ -12,8 +12,8 @@ export const LearnWeb3Banner: FC<HomePageBannerProps> = ({ href }) => {
   return (
     <div className=" banner flex-col !border-none !bg-opacity-20 !bg-gradient-to-tr from-stone-700 from-10% via-black via-60%  to-[#727171] to-90% !p-[2px] lg:flex-row">
       <Card className=" banner !bg-opacity-85 flex-col !border-none !bg-black lg:flex-row">
-        <div className=" z-20 w-[78rem] items-center justify-center md:flex">
-          <div className="terminal-text md:py-[25px] md:pr-[80px] md:text-[15px]">
+        <div className=" z-20 items-center justify-center md:flex md:w-[78rem]">
+          <div className="terminal-text text-[10px] md:py-[25px] md:pr-[80px] md:text-[15px]">
             <div className="line">
               <div>1</div>
               <div className="text-white">
@@ -115,7 +115,7 @@ export const LearnWeb3Banner: FC<HomePageBannerProps> = ({ href }) => {
             <CardHeader className="flex-row justify-center">
               <CardTitle className="title">LEARN WEB3</CardTitle>
             </CardHeader>
-            <CardContent className=" p-1 pb-12 text-center text-[17px] font-light text-white md:mb-[40px] md:pb-1">
+            <CardContent className=" p-1 pb-12 text-center text-sm font-light text-white md:mb-[40px] md:pb-1 md:text-[17px]">
               <p>
                 Developer DAO offers learning <br /> resources to help you build with web3 <br />
                 technologies.

packages/ui/src/components/Banners/PartnerBanner.tsx

@@ -13,12 +13,14 @@ export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
   return (
     <div className=" banner flex-col !border-none !bg-opacity-20 !bg-gradient-to-tr from-stone-700 from-10% via-black via-60%  to-[#727171] to-90% !p-[2px] lg:flex-row">
       <Card className=" banner !bg-opacity-85 flex-col !border-none !bg-black lg:flex-row">
-        <div className="w-[78rem] items-center justify-center md:flex">
+        <div className="items-center justify-center md:flex md:w-[78rem]">
           <div className="md:py-[25px] md:pl-[30px] md:pr-[200px]">
             <CardHeader className="flex-row justify-center">
-              <CardTitle className="title !text-[40px]">Partner with D_D Academy</CardTitle>
+              <CardTitle className="title !md:text-[40px] !text-[36px]">
+                Partner with D_D Academy
+              </CardTitle>
             </CardHeader>
-            <CardContent className=" p-1 pb-12 text-center text-[17px] font-light text-white md:mb-[40px] md:pb-1">
+            <CardContent className=" p-1 pb-12 text-center text-[13px] font-light text-white md:mb-[40px] md:pb-1 md:text-[17px]">
               <p>
                 Developer DAO is a community of thousands of web3 <br /> builders creating a better
                 internet. Join us and help <br /> educate the next generation of developers.
@@ -35,17 +37,17 @@ export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
               </Button>
             </div>
           </div>
-          <div className="felx-col ml-8 mr-4  mt-8 flex items-center justify-center md:m-auto">
+          <div className="felx-col ml-8 mr-4  mt-[80px] flex items-center justify-center md:m-auto md:mt-8">
             <div className="flex flex-col items-center">
               <Image
                 src={imgSrc}
                 width={100}
                 height={100}
                 alt="partner"
-                className="mb-4 h-[90px] w-[84px] rounded-full md:mb-[60px] md:ml-[45px] lg:mr-[50px]"
+                className="mb-4 h-[70px] w-[64px] rounded-full md:mb-[60px] md:ml-[45px] md:h-[90px] md:w-[84px] lg:mr-[50px]"
               />
               <div className=" mb-4 h-[1px] w-full border border-gray-700" />
-              <div className="flex flex-wrap items-center justify-center gap-6">
+              <div className="my-5 flex flex-wrap items-center justify-center gap-6 md:my-0">
                 {[
                   "/partners/pokt.png",
                   "/partners/zerion.png",
@@ -58,7 +60,7 @@ export const PartnerBanner: FC<PartnerBannerProps> = ({ href, imgSrc }) => {
                     width={175}
                     height={25}
                     alt="partner"
-                    className={`${i === 2 ? "max-h-10" : "max-h-7"} w-auto ${
+                    className={` ${i === 2 ? "max-h-10" : "max-h-5 md:max-h-7"} w-auto ${
                       i === 0 ? "mb-4" : ""
                     }`}
                   />