refactor: adjust GsocPage text size and improve GsocLoader styling for better responsiveness

Author: codeaashu

src/Page/OpportunitiesHub/opensource/gsoc.jsx

@@ -495,14 +495,14 @@ export default function GsocPage() {
           </div>
           <div className="relative z-10 mx-auto grid max-w-7xl items-center gap-8 sm:gap-10 md:grid-cols-2 md:gap-32">
             <div className="space-y-4 text-center md:text-left">
-              <p className="animate-text-gradient bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-[length:200%_auto] bg-clip-text pb-2 text-xl font-semibold tracking-wide text-transparent sm:text-5xl">
+              <p className="animate-text-gradient bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-[length:200%_auto] bg-clip-text pb-2 text-3xl font-semibold tracking-wide text-transparent sm:text-5xl">
                 Everything
               </p>
-              <p className="animate-text-gradient bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-[length:200%_auto] bg-clip-text pb-2 text-xl font-semibold tracking-wide text-transparent sm:text-5xl">
+              <p className="animate-text-gradient bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-[length:200%_auto] bg-clip-text pb-2 text-3xl font-semibold tracking-wide text-transparent sm:text-5xl">
                 You Need to Decode:
               </p>
               <div className="flex justify-center md:justify-start">
-                <div className="relative max-w-md overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 shadow-2xl">
+                <div className="relative w-full max-w-md overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 shadow-2xl">
                   <img
                     src="/assets/opensourceProgram/GSOC.png"
                     alt="Google Summer of Code 2026"
@@ -538,7 +538,7 @@ export default function GsocPage() {
               </p>
             </div>
 
-            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
               {proposals.map((entry) => (
                 <ProposalCard
                   key={`${entry.name}-${entry.organization}`}

src/components/GsocLoader.jsx

@@ -22,7 +22,13 @@ const GsocLoader = () => {
 
 const StyledWrapper = styled.div`
   /* Container to reserve space for the scaled element */
-  min-height: 240px;
+  min-height: 150px;
+  @media (min-width: 480px) {
+    min-height: 200px;
+  }
+  @media (min-width: 768px) {
+    min-height: 240px;
+  }
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,8 +48,11 @@ const StyledWrapper = styled.div`
     user-select: none;
     color: #fff;
 
-    scale: 2;
+    scale: 1.2;
 
+    @media (min-width: 480px) {
+      scale: 1.8;
+    }
     @media (min-width: 768px) {
       scale: 2.5;
     }