From 93b09e783dd1c7c48eb18d9bc9ff8135b565cd6d Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Tue, 11 Nov 2025 09:06:24 +0530
Subject: [PATCH 1/4] style(footer): Refine footer layout and responsive design

- Update container padding for better responsiveness across breakpoints
- Adjust grid layout to improve mobile and desktop spacing
- Optimize social media icon sizing and spacing
- Replace div with semantic nav elements for improved accessibility
- Reduce vertical padding and adjust text sizes for more compact design
- Add aria-labels to social media links for better screen reader support
- Simplify class names and improve overall layout consistency
---
 components/footer.tsx | 90 ++++++++++++++++++++++---------------------
 1 file changed, 47 insertions(+), 43 deletions(-)

diff --git a/components/footer.tsx b/components/footer.tsx
index f6e9f85c..0fa68178 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -54,93 +54,97 @@ export default function Footer() {
   }
   return (
     <footer className="border-t border-border/40 bg-gradient-to-b from-background/95 via-background to-background/95">
-      <div className="container px-4 md:pl-12 py-12 md:py-16">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-12">
+      <div className="container px-4 sm:px-6 md:px-8 lg:pl-12 py-8 sm:py-10 md:py-12 lg:py-16">
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 sm:gap-10 lg:gap-12">
           {/* codeunia branding */}
-          <div className="space-y-4 md:space-y-6">
+          <div className="space-y-4">
             <CodeuniaLogo size="lg" showText={true} instanceId="footer" />
-            <p className="text-foreground/80 leading-relaxed text-sm md:text-base">
+            <p className="text-foreground/80 leading-relaxed text-sm">
               Empowering the next generation of coders through real-world projects, vibrant community, and continuous
               learning.
             </p>
-            <div className="flex items-center space-x-3 md:space-x-4">
+            <div className="flex items-center gap-3 pt-2">
               <Link
                 href="https://github.com/Codeunia"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
+                className="w-10 h-10 bg-gradient-to-br from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
+                aria-label="GitHub"
               >
-                <Github className="h-4 w-4 md:h-5 md:w-5" />
+                <Github className="h-5 w-5" />
               </Link>
               <Link
                 href="https://www.instagram.com/codeunia"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
+                className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
+                aria-label="Instagram"
               >
-                <Instagram className="h-4 w-4 md:h-5 md:w-5" />
+                <Instagram className="h-5 w-5" />
               </Link>
               <Link
                 href="https://x.com/codeunia"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-sky-500 to-sky-600 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
+                className="w-10 h-10 bg-gradient-to-br from-sky-500 to-sky-600 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
+                aria-label="Twitter"
               >
-                <Twitter className="h-4 w-4 md:h-5 md:w-5" />
+                <Twitter className="h-5 w-5" />
               </Link>
               <Link
                 href="https://www.linkedin.com/company/codeunia"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-blue-700 to-blue-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
+                className="w-10 h-10 bg-gradient-to-br from-blue-700 to-blue-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
+                aria-label="LinkedIn"
               >
-                <Linkedin className="h-4 w-4 md:h-5 md:w-5" />
+                <Linkedin className="h-5 w-5" />
               </Link>
             </div>
           </div>
 
           {/* quick links and community - 2 column layout on mobile */}
-          <div className="grid grid-cols-2 md:grid-cols-2 gap-8 md:gap-0 md:contents">
+          <div className="grid grid-cols-2 gap-8 lg:contents">
             {/* quick links of codeunia */}
-            <div className="space-y-4 md:space-y-6">
-              <h4 className="text-base md:text-lg font-bold text-foreground">Quick Links</h4>
-              <div className="space-y-3">
+            <div className="space-y-4">
+              <h4 className="text-base font-bold text-foreground">Quick Links</h4>
+              <nav className="space-y-2.5">
                 <Link
                   href="/about"
-                  className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
                 >
                   About Us
                 </Link>
                 <Link
                   href="/hackathons"
-                  className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
                 >
                   Events & Hackathons
                 </Link>
                 <Link
                   href="/blog"
-                  className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
                 >
                   Developer Blog
                 </Link>
                 <Link
                   href="/contact"
-                  className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
                 >
                   Contact Support
                 </Link>
-              </div>
+              </nav>
             </div>
 
             {/* community section of codeunia */}
-            <div className="space-y-4 md:space-y-6">
-              <h4 className="text-base md:text-lg font-bold text-foreground">Community</h4>
-              <div className="space-y-3">
+            <div className="space-y-4">
+              <h4 className="text-base font-bold text-foreground">Community</h4>
+              <nav className="space-y-2.5">
                 <Link
                   href="https://github.com/Codeunia"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
                 >
                   GitHub Projects
                 </Link>
@@ -148,7 +152,7 @@ export default function Footer() {
                   href="https://discord.gg/Mhn3tXnJ"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
                 >
                   Discord Server
                 </Link>
@@ -156,7 +160,7 @@ export default function Footer() {
                   href="https://x.com/codeunia"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
                 >
                   Twitter Community
                 </Link>
@@ -164,36 +168,36 @@ export default function Footer() {
                   href="https://www.linkedin.com/company/codeunia"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
+                  className="block text-sm text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
                 >
                   LinkedIn Network
                 </Link>
-              </div>
+              </nav>
             </div>
           </div>
 
           {/* codeunia newsletter */}
-          <div className="space-y-4 md:space-y-6 md:col-start-4">
-            <h4 className="text-base md:text-lg font-bold text-foreground">Stay Updated</h4>
-            <p className="text-foreground/80 text-sm md:text-base">
+          <div className="space-y-4">
+            <h4 className="text-base font-bold text-foreground">Stay Updated</h4>
+            <p className="text-foreground/80 text-sm leading-relaxed">
               Get the latest updates on events, new features, and community highlights.
             </p>
             <form onSubmit={handleNewsletterSubmit} className="space-y-3">
-              <div className="flex space-x-2">
+              <div className="flex flex-col xs:flex-row gap-2">
                 <Input
                   type="email"
                   placeholder="Enter your email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   disabled={status === "loading" || status === "success"}
-                  className="flex-1 bg-background/50 border-border/50 focus:border-primary/50"
+                  className="flex-1 bg-background/50 border-border/50 focus:border-primary/50 text-sm h-10"
                   required
                 />
                 <Button
                   type="submit"
                   size="sm"
                   disabled={status === "loading" || status === "success"}
-                  className="bg-primary/90 hover:bg-primary shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="bg-primary/90 hover:bg-primary shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed h-10 px-4"
                 >
                   {status === "loading" ? (
                     <Loader2 className="h-4 w-4 animate-spin" />
@@ -216,21 +220,21 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="mt-8 md:mt-12 pt-6 md:pt-8 border-t border-border/40 flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
-          <p className="text-xs md:text-sm text-foreground/80">
+        <div className="mt-8 sm:mt-10 md:mt-12 pt-6 md:pt-8 border-t border-border/40 flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-3">
+          <p className="text-xs sm:text-sm text-foreground/80 text-center sm:text-left">
             © {new Date().getFullYear()} Codeunia. All rights reserved. Built with ❤️ for developers.
           </p>
-          <div className="flex items-center space-x-4 md:space-x-6 text-xs md:text-sm text-foreground/80">
-            <Link href="/privacy" className="hover:text-primary transition-colors">
+          <nav className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 text-xs sm:text-sm text-foreground/80">
+            <Link href="/privacy" className="hover:text-primary transition-colors whitespace-nowrap">
               Privacy Policy
             </Link>
-            <Link href="/terms" className="hover:text-primary transition-colors">
+            <Link href="/terms" className="hover:text-primary transition-colors whitespace-nowrap">
               Terms of Service
             </Link>
-            <Link href="/refund" className="hover:text-primary transition-colors">
+            <Link href="/refund" className="hover:text-primary transition-colors whitespace-nowrap">
               Refund Policy
             </Link>
-          </div>
+          </nav>
         </div>
       </div>
     </footer>

From 847e00a72d027b4810e6b58a960bc26ec3d5b0cf Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Tue, 11 Nov 2025 09:14:06 +0530
Subject: [PATCH 2/4] style(about): Improve responsive design and layout for
 About page

- Adjust section padding for better responsiveness across device sizes
- Resize and reposition decorative background elements with responsive classes
- Update button and text sizes to be more adaptive on smaller screens
- Refine spacing and padding for user welcome section
- Optimize icon and button sizes for improved mobile experience
- Add responsive padding and margin adjustments to improve overall layout
- Enhance text readability with responsive font sizing
---
 app/about/page.tsx | 54 +++++++++++++++++++++++-----------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 93787122..bdfe657a 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -431,11 +431,11 @@ export default function AboutPage() {
             {(() => {
               if (loading) return null;
               return (
-                <section className="py-24 relative overflow-hidden bg-gradient-to-br from-primary/10 via-purple-500/10 to-background dark:from-primary/20 dark:via-purple-500/20 dark:to-background">
+                <section className="py-12 sm:py-16 md:py-20 lg:py-24 relative overflow-hidden bg-gradient-to-br from-primary/10 via-purple-500/10 to-background dark:from-primary/20 dark:via-purple-500/20 dark:to-background">
                   <div className="absolute inset-0">
-                      <div className="absolute top-10 left-10 w-32 h-32 bg-primary/20 dark:bg-primary/30 rounded-full blur-xl animate-float"></div>
+                      <div className="absolute top-5 sm:top-10 left-5 sm:left-10 w-24 h-24 sm:w-32 sm:h-32 bg-primary/20 dark:bg-primary/30 rounded-full blur-xl animate-float"></div>
                       <div
-                          className="absolute bottom-10 right-10 w-48 h-48 bg-purple-500/20 dark:bg-purple-500/30 rounded-full blur-xl animate-float"
+                          className="absolute bottom-5 sm:bottom-10 right-5 sm:right-10 w-32 h-32 sm:w-48 sm:h-48 bg-purple-500/20 dark:bg-purple-500/30 rounded-full blur-xl animate-float"
                           style={{ animationDelay: "3s" }}
                       ></div>
                   </div>
@@ -458,17 +458,17 @@ export default function AboutPage() {
                       whileInView={{ opacity: 1, y: 0 }}
                       transition={{ duration: 0.5 }}
                       viewport={{ once: true }}
-                      className="container px-4 mx-auto text-center relative z-10"
+                      className="container px-4 sm:px-6 mx-auto text-center relative z-10"
                   >
-                      <div className="max-w-3xl mx-auto space-y-8 p-8 rounded-3xl bg-background/50 dark:bg-background/80 backdrop-blur-md border border-primary/10 dark:border-primary/20 shadow-xl">
+                      <div className="max-w-3xl mx-auto space-y-6 sm:space-y-8 p-6 sm:p-8 md:p-10 rounded-2xl sm:rounded-3xl bg-background/50 dark:bg-background/80 backdrop-blur-md border border-primary/10 dark:border-primary/20 shadow-xl">
                         {user ? (
                           <>
-                            <div className="flex flex-col items-center justify-center gap-4">
-                                <button className="bg-slate-800 no-underline group cursor-default relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
+                            <div className="flex flex-col items-center justify-center gap-3 sm:gap-4">
+                                <button className="bg-slate-800 no-underline group cursor-default relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs sm:text-sm font-semibold leading-6 text-white inline-block">
                                     <span className="absolute inset-0 overflow-hidden rounded-full">
                                         <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                                     </span>
-                                    <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10">
+                                    <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-3 sm:px-4 ring-1 ring-white/10">
                                         <span>Welcome Back!</span>
                                         <span>
                                             <Sparkles className="w-3 h-3" />
@@ -481,9 +481,9 @@ export default function AboutPage() {
                                 initial={{ opacity: 0, y: 20 }}
                                 animate={{ opacity: 1, y: 0 }}
                                 transition={{ duration: 0.5, delay: 0.2 }}
-                                className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
+                                className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-2"
                             >
-                                Ready to Continue Your {" "}
+                                Ready to Continue Your{" "}
                                 <motion.span
                                     className="gradient-text inline-block"
                                     animate={{
@@ -509,29 +509,29 @@ export default function AboutPage() {
                                     Coding Journey?
                                 </motion.span>
                             </motion.h1>
-                            <p className="text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed">
+                            <p className="text-base sm:text-lg md:text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed px-2">
                               Continue your learning journey with personalized content, track your progress, and connect with our community.
                             </p>
-                            <div className="flex flex-col sm:flex-row gap-4 justify-center w-full">
+                            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center w-full px-2">
                               <Button
                                 size="sm"
                                 variant="default"
-                                className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-all duration-300"
+                                className="w-full sm:w-auto px-6 py-3 text-sm sm:text-base font-semibold hover:scale-105 transition-all duration-300"
                                 asChild
                               >
                                 <Link href="/protected/dashboard" className="h-full flex items-center justify-center gap-2">
-                                  <Rocket className="w-5 h-5" />
+                                  <Rocket className="w-4 h-4 sm:w-5 sm:h-5" />
                                   Go to Dashboard
                                 </Link>
                               </Button>
                               <Button
                                 size="sm"
                                 variant="outline"
-                                className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-transform duration-300"
+                                className="w-full sm:w-auto px-6 py-3 text-sm sm:text-base font-semibold hover:scale-105 transition-transform duration-300"
                                 asChild
                               >
                                 <Link href="/hackathons" className="h-full flex items-center justify-center gap-2">
-                                  <Globe className="w-5 h-5" />
+                                  <Globe className="w-4 h-4 sm:w-5 sm:h-5" />
                                   View Events
                                 </Link>
                               </Button>
@@ -539,12 +539,12 @@ export default function AboutPage() {
                           </>
                         ) : (
                           <>
-                            <div className="flex flex-col items-center justify-center gap-4">
-                                <button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
+                            <div className="flex flex-col items-center justify-center gap-3 sm:gap-4">
+                                <button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs sm:text-sm font-semibold leading-6 text-white inline-block">
                                     <span className="absolute inset-0 overflow-hidden rounded-full">
                                         <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                                     </span>
-                                    <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-4 ring-1 ring-white/10">
+                                    <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-3 sm:px-4 ring-1 ring-white/10">
                                         <span>Start Your Journey 🚀</span>
                                     </div>
                                     <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
@@ -554,9 +554,9 @@ export default function AboutPage() {
                                 initial={{ opacity: 0, y: 20 }}
                                 animate={{ opacity: 1, y: 0 }}
                                 transition={{ duration: 0.5, delay: 0.2 }}
-                                className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
+                                className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-2"
                             >
-                                Ready to Begin Your {" "}
+                                Ready to Begin Your{" "}
                                 <motion.span
                                     className="gradient-text inline-block"
                                     animate={{
@@ -582,29 +582,29 @@ export default function AboutPage() {
                                     Coding Adventure?
                                 </motion.span>
                             </motion.h1>
-                            <p className="text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed">
+                            <p className="text-base sm:text-lg md:text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed px-2">
                               Join thousands of developers who are already learning and growing with Codeunia. Transform your career with our comprehensive learning platform.
                             </p>
-                            <div className="flex flex-col sm:flex-row gap-4 justify-center w-full">
+                            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center w-full px-2">
                               <Button
                                 size="sm"
                                 variant="default"
-                                className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-all duration-300"
+                                className="w-full sm:w-auto px-6 py-3 text-sm sm:text-base font-semibold hover:scale-105 transition-all duration-300"
                                 asChild
                               >
                                 <Link href="/auth/signup" className="h-full flex items-center justify-center gap-2">
-                                  <UserPlus className="w-5 h-5" />
+                                  <UserPlus className="w-4 h-4 sm:w-5 sm:h-5" />
                                   Get Started
                                 </Link>
                               </Button>
                               <Button
                                 size="sm"
                                 variant="outline"
-                                className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-transform duration-300"
+                                className="w-full sm:w-auto px-6 py-3 text-sm sm:text-base font-semibold hover:scale-105 transition-transform duration-300"
                                 asChild
                               >
                                 <Link href="/contact" className="h-full flex items-center justify-center gap-2">
-                                  <Mail className="w-5 h-5" />
+                                  <Mail className="w-4 h-4 sm:w-5 sm:h-5" />
                                   Contact Us
                                 </Link>
                               </Button>

From 4e28a41d3f018e418d90613ecec8fa324bc12b03 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Tue, 11 Nov 2025 09:20:49 +0530
Subject: [PATCH 3/4] style(opportunities): Simplify card hover effects and
 remove gradient overlay

- Remove absolute gradient overlay div from opportunity cards
- Revert text color changes for card title and description
- Maintain existing card hover shadow effect
- Improve visual clarity and reduce visual complexity
---
 app/opportunities/page.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/opportunities/page.tsx b/app/opportunities/page.tsx
index 777d7176..a7e28c96 100644
--- a/app/opportunities/page.tsx
+++ b/app/opportunities/page.tsx
@@ -114,10 +114,6 @@ export default function OpportunitiesPage() {
                 <Card className={cn(
                   "group relative overflow-hidden border-0 shadow-xl card-hover bg-gradient-to-br from-background to-muted/20 flex flex-col h-full",
                   `hover:shadow-2xl`)}>
-                  <div className={cn(
-                    "absolute inset-0 opacity-0 group-hover:opacity-100 rounded-2xl",
-                    `bg-gradient-to-br ${item.gradient}`
-                  )}></div>
                   <CardHeader className="relative z-10 pb-2 flex flex-col items-center">
                     <div className={cn(
                       "w-14 h-14 rounded-2xl flex items-center justify-center mb-4 shadow-lg",
@@ -125,10 +121,10 @@ export default function OpportunitiesPage() {
                     )}>
                       <item.icon className="h-7 w-7 text-white drop-shadow-lg" />
                     </div>
-                    <CardTitle className="text-2xl font-bold text-center group-hover:text-white">
+                    <CardTitle className="text-2xl font-bold text-center">
                       {item.title}
                     </CardTitle>
-                    <CardDescription className="text-base text-muted-foreground text-center group-hover:text-white/90">
+                    <CardDescription className="text-base text-muted-foreground text-center">
                       {item.description}
                     </CardDescription>
                   </CardHeader>

From 217f327edd1206aa56414af6c0d80a6e4206723e Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Tue, 11 Nov 2025 09:27:15 +0530
Subject: [PATCH 4/4] style(opportunities): Improve responsive design for
 Opportunities page

- Adjust section padding and spacing for better mobile responsiveness
- Reduce font sizes and adjust layout for smaller screen sizes
- Optimize gradient and blur effect positioning for mobile views
- Resize icons, buttons, and card elements to scale appropriately
- Fine-tune text and button sizes across different breakpoints
- Enhance overall mobile and responsive layout for Opportunities page
---
 app/opportunities/page.tsx | 40 +++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/opportunities/page.tsx b/app/opportunities/page.tsx
index a7e28c96..f560f254 100644
--- a/app/opportunities/page.tsx
+++ b/app/opportunities/page.tsx
@@ -65,7 +65,7 @@ export default function OpportunitiesPage() {
     <div className="flex flex-col overflow-hidden bg-gradient-to-br from-background via-background to-muted/10 min-h-screen">
       <Header />
       {/* Hero Section */}
-      <section className="py-20 md:py-32 relative overflow-hidden">
+      <section className="py-32 sm:py-16 md:py-24 lg:py-32 relative overflow-hidden">
         <div
           className={cn(
             "absolute inset-0",
@@ -77,18 +77,18 @@ export default function OpportunitiesPage() {
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
         <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-purple-500/5"></div>
         <div className="absolute inset-0">
-          <div className="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl"></div>
-          <div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
+          <div className="absolute top-10 sm:top-20 left-5 sm:left-10 w-48 h-48 sm:w-72 sm:h-72 bg-primary/10 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-10 sm:bottom-20 right-5 sm:right-10 w-64 h-64 sm:w-96 sm:h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
         </div>
-        <div className="container px-4 mx-auto relative z-10">
-          <div className="max-w-4xl mx-auto text-center space-y-8">
+        <div className="container px-4 sm:px-6 mx-auto relative z-10">
+          <div className="max-w-4xl mx-auto text-center space-y-6 sm:space-y-8">
             <div>
-              <div className="flex flex-col items-center justify-center gap-4">
-                <button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block cursor-default">
+              <div className="flex flex-col items-center justify-center gap-3 sm:gap-4">
+                <button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs sm:text-sm font-semibold leading-6 text-white inline-block cursor-default">
                   <span className="absolute inset-0 overflow-hidden rounded-full">
                     <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 group-hover:opacity-100" />
                   </span>
-                  <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10">
+                  <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-3 sm:px-4 ring-1 ring-white/10">
                     <span>Opportunities Hub</span>
                     <Sparkles className="w-3 h-3" />
                   </div>
@@ -96,19 +96,19 @@ export default function OpportunitiesPage() {
                 </button>
               </div>
             </div>
-            <h1 className="text-5xl md:text-6xl font-bold tracking-tight leading-tight">
+            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-2">
               Unlock All Tech <span className="gradient-text">Opportunities</span> in One Place
             </h1>
-            <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+            <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed px-2">
               Navigate to events, hackathons, projects, tests, jobs, and internships curated for the tech community.
             </p>
           </div>
         </div>
       </section>
       {/* Opportunities Grid */}
-      <section className="py-16 bg-gradient-to-b from-muted/30 to-background relative">
-        <div className="container px-4 mx-auto relative z-10">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <section className="py-10 sm:py-12 md:py-16 bg-gradient-to-b from-muted/30 to-background relative">
+        <div className="container px-4 sm:px-6 mx-auto relative z-10">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
             {opportunities.map((item) => (
               <div key={item.title}>
                 <Card className={cn(
@@ -116,20 +116,20 @@ export default function OpportunitiesPage() {
                   `hover:shadow-2xl`)}>
                   <CardHeader className="relative z-10 pb-2 flex flex-col items-center">
                     <div className={cn(
-                      "w-14 h-14 rounded-2xl flex items-center justify-center mb-4 shadow-lg",
+                      "w-12 h-12 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl flex items-center justify-center mb-3 sm:mb-4 shadow-lg",
                       `bg-gradient-to-br ${item.gradient}`
                     )}>
-                      <item.icon className="h-7 w-7 text-white drop-shadow-lg" />
+                      <item.icon className="h-6 w-6 sm:h-7 sm:w-7 text-white drop-shadow-lg" />
                     </div>
-                    <CardTitle className="text-2xl font-bold text-center">
+                    <CardTitle className="text-xl sm:text-2xl font-bold text-center">
                       {item.title}
                     </CardTitle>
-                    <CardDescription className="text-base text-muted-foreground text-center">
+                    <CardDescription className="text-sm sm:text-base text-muted-foreground text-center">
                       {item.description}
                     </CardDescription>
                   </CardHeader>
                   <CardContent className="relative z-10 flex flex-col flex-1 justify-between">
-                    <div className="flex flex-wrap gap-2 justify-center mb-6 mt-2">
+                    <div className="flex flex-wrap gap-2 justify-center mb-4 sm:mb-6 mt-2">
                       {item.tags.map((tag) => (
                         <Badge key={tag} variant="outline" className="text-xs bg-background/50 backdrop-blur-sm border-primary/20 hover:bg-primary/10">
                           {tag}
@@ -139,10 +139,10 @@ export default function OpportunitiesPage() {
                     <Button
                       asChild
                       size="lg"
-                      className="w-full font-semibold px-6 py-2 rounded-full text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg focus:ring-2 focus:ring-primary/40"
+                      className="w-full font-semibold px-4 sm:px-6 py-2 rounded-full text-sm sm:text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg focus:ring-2 focus:ring-primary/40"
                     >
                       <Link href={item.href} className="flex items-center justify-center whitespace-nowrap">
-                        Explore <ArrowRight className="ml-2 h-5 w-5" />
+                        Explore <ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5" />
                       </Link>
                     </Button>
                   </CardContent>