From f734d888d6f135f661533c860985c8930170c17a Mon Sep 17 00:00:00 2001
From: nitin mohan <mohannitin494@gmail.com>
Date: Sat, 27 Jun 2026 22:46:59 +0530
Subject: [PATCH] refactor: refine footer, creators, and universities UI

---
 app/(public)/creators/page.tsx    | 12 ++++-----
 components/footer.tsx             | 44 +++++++++++++------------------
 features/landing/universities.tsx | 16 +++++------
 3 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/app/(public)/creators/page.tsx b/app/(public)/creators/page.tsx
index 1d1173e..43b06ef 100644
--- a/app/(public)/creators/page.tsx
+++ b/app/(public)/creators/page.tsx
@@ -196,7 +196,7 @@ export default function TeamPage() {
                           href={member.socials.github}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-white/10 hover:text-white hover:shadow-lg"
+                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-white/10 hover:text-white hover:shadow-md hover:shadow-white/5"
                           aria-label="GitHub"
                         >
                           <FaGithub size={20} />
@@ -208,7 +208,7 @@ export default function TeamPage() {
                           href={member.socials.linkedin}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-[#0A66C2] hover:text-white hover:shadow-lg hover:shadow-[#0A66C2]/30"
+                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-[#0A66C2]/15 hover:text-[#0A66C2] hover:shadow-md hover:shadow-[#0A66C2]/15"
                           aria-label="LinkedIn"
                         >
                           <FaLinkedin size={20} />
@@ -220,7 +220,7 @@ export default function TeamPage() {
                           href={member.socials.twitter}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-black hover:text-white hover:shadow-lg hover:shadow-white/10"
+                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-white/10 hover:text-white hover:shadow-md hover:shadow-white/5"
                           aria-label="X (Twitter)"
                         >
                           <FaTwitter size={20} />
@@ -232,7 +232,7 @@ export default function TeamPage() {
                           href={member.socials.instagram}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-gradient-to-tr hover:from-[#f09433] hover:via-[#dc2743] hover:to-[#bc1888] hover:text-white hover:shadow-lg hover:shadow-[#E1306C]/30"
+                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-[#E1306C]/15 hover:text-[#E1306C] hover:shadow-md hover:shadow-[#E1306C]/15"
                           aria-label="Instagram"
                         >
                           <FaInstagram size={20} />
@@ -244,7 +244,7 @@ export default function TeamPage() {
                           href={member.socials.portfolio}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-[#10B981] hover:text-white hover:shadow-lg hover:shadow-[#10B981]/30"
+                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-[#10B981]/15 hover:text-[#10B981] hover:shadow-md hover:shadow-[#10B981]/15"
                           aria-label="Portfolio"
                         >
                           <Globe className="h-4 w-4" />
@@ -254,7 +254,7 @@ export default function TeamPage() {
                       {member.socials.email && (
                         <a
                           href={member.socials.email}
-                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-2 hover:bg-[#EA4335] hover:text-white hover:shadow-lg hover:shadow-[#EA4335]/30"
+                          className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-[#EA4335]/15 hover:text-[#EA4335] hover:shadow-md hover:shadow-[#EA4335]/15"
                           aria-label="Email"
                         >
                           <Mail className="h-4 w-4" />
diff --git a/components/footer.tsx b/components/footer.tsx
index d490fa8..6c66e49 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -41,7 +41,7 @@ export default function Footer() {
             <div className="mt-6 flex items-center gap-3">
               <a
                 href="mailto:contact@hyperlearning.tech"
-                className="group flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/60 transition-all duration-300 hover:border-[#EA4335] hover:bg-[#EA4335] hover:text-white hover:shadow-[0_0_15px_rgba(234,67,53,0.4)]"
+                className="group flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/60 transition-all duration-300 hover:border-[#EA4335]/50 hover:bg-[#EA4335]/10 hover:text-[#EA4335] hover:shadow-[0_0_12px_rgba(234,67,53,0.15)]"
               >
                 <Mail className="h-4 w-4 transition-transform group-hover:scale-110" />
               </a>
@@ -72,10 +72,10 @@ export default function Footer() {
 
           {/* Platform */}
           <div>
-            <h3 className="mb-4 text-xs font-bold uppercase tracking-widest text-white/90">
+            <h3 className="mb-6 text-[13px] font-bold uppercase tracking-[0.2em] text-white/80">
               Platform
             </h3>
-            <ul className="space-y-3">
+            <ul className="space-y-4">
               {["Subjects", "Universities", "Dashboard", "Student Login"].map(
                 (item, i) => (
                   <li key={i}>
@@ -87,10 +87,10 @@ export default function Footer() {
                             ? "/sign-in"
                             : `/${item.toLowerCase()}`
                       }
-                      className="group flex w-fit items-center text-[15px] font-medium text-slate-300 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_12px_rgba(96,165,250,0.4)]"
+                      className="group relative flex w-fit items-center text-[15px] font-medium text-slate-400 transition-all duration-300 hover:text-white"
                     >
-                      <span className="relative mr-3 flex h-1.5 w-1.5 items-center justify-center">
-                        <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:animate-ping group-hover:opacity-100" />
+                      <span className="relative mr-3 flex h-1.5 w-1.5 shrink-0 items-center justify-center">
+                        <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:scale-[2.5] group-hover:opacity-20" />
                         <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-white/30 transition-colors duration-300 group-hover:bg-blue-400" />
                       </span>
                       <span className="transition-transform duration-300 group-hover:translate-x-1">
@@ -105,30 +105,22 @@ export default function Footer() {
 
           {/* Learning */}
           <div>
-            <h3 className="mb-4 text-xs font-bold uppercase tracking-widest text-white/90">
+            <h3 className="mb-6 text-[13px] font-bold uppercase tracking-[0.2em] text-white/80">
               Learning
             </h3>
-            <ul className="space-y-3">
-              {[
-                { name: "AI Notes", icon: BookOpen },
-                { name: "PYQs", icon: GraduationCap },
-                { name: "AI Tutor" },
-                { name: "Syllabus" },
-              ].map((item, i) => (
+            <ul className="space-y-4">
+              {["AI Notes", "PYQs", "AI Tutor", "Syllabus"].map((item, i) => (
                 <li key={i}>
                   <Link
                     href="/rgpv"
-                    className="group flex w-fit items-center text-[15px] font-medium text-slate-300 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_12px_rgba(96,165,250,0.4)]"
+                    className="group relative flex w-fit items-center text-[15px] font-medium text-slate-400 transition-all duration-300 hover:text-white"
                   >
-                    <span className="relative mr-3 flex h-1.5 w-1.5 items-center justify-center">
-                      <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:animate-ping group-hover:opacity-100" />
+                    <span className="relative mr-3 flex h-1.5 w-1.5 shrink-0 items-center justify-center">
+                      <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:scale-[2.5] group-hover:opacity-20" />
                       <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-white/30 transition-colors duration-300 group-hover:bg-blue-400" />
                     </span>
-                    {item.icon && (
-                      <item.icon className="mr-2 h-4 w-4 transition-transform duration-300 group-hover:-translate-y-0.5" />
-                    )}
                     <span className="transition-transform duration-300 group-hover:translate-x-1">
-                      {item.name}
+                      {item}
                     </span>
                   </Link>
                 </li>
@@ -138,18 +130,18 @@ export default function Footer() {
 
           {/* Company */}
           <div>
-            <h3 className="mb-4 text-xs font-bold uppercase tracking-widest text-white/90">
+            <h3 className="mb-6 text-[13px] font-bold uppercase tracking-[0.2em] text-white/80">
               Company
             </h3>
-            <ul className="space-y-3">
+            <ul className="space-y-4">
               {["About", "Contact", "Creators", "Privacy"].map((item, i) => (
                 <li key={i}>
                   <Link
                     href={item === "Privacy" ? "/" : `/${item.toLowerCase()}`}
-                    className="group flex w-fit items-center text-[15px] font-medium text-slate-300 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_12px_rgba(96,165,250,0.4)]"
+                    className="group relative flex w-fit items-center text-[15px] font-medium text-slate-400 transition-all duration-300 hover:text-white"
                   >
-                    <span className="relative mr-3 flex h-1.5 w-1.5 items-center justify-center">
-                      <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:animate-ping group-hover:opacity-100" />
+                    <span className="relative mr-3 flex h-1.5 w-1.5 shrink-0 items-center justify-center">
+                      <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:scale-[2.5] group-hover:opacity-20" />
                       <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-white/30 transition-colors duration-300 group-hover:bg-blue-400" />
                     </span>
                     <span className="transition-transform duration-300 group-hover:translate-x-1">
diff --git a/features/landing/universities.tsx b/features/landing/universities.tsx
index f0888bf..32fb948 100644
--- a/features/landing/universities.tsx
+++ b/features/landing/universities.tsx
@@ -62,8 +62,7 @@ export default function Universities() {
 
   return (
     <section className="relative flex min-h-[115vh] flex-col justify-center overflow-hidden border-none bg-background pt-16 pb-32">
-      {/* Background Glows & Patterns */}
-      <div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
+      {/* Background Glows */}
       <div className="absolute inset-0 -z-10">
         <div className="absolute left-[-10%] top-20 h-[500px] w-[500px] rounded-full bg-blue-500/10 blur-[120px]" />
         <div className="absolute right-[-10%] bottom-0 h-[500px] w-[500px] rounded-full bg-indigo-500/10 blur-[120px]" />
@@ -122,10 +121,9 @@ export default function Universities() {
               placeholder="Search universities by name, branch, or location..."
               className="w-full bg-transparent px-6 py-3 text-base text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
             />
-            <div className="group/lens relative mr-1 flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-white/5 bg-white/[0.02] text-white/50 backdrop-blur-2xl transition-all duration-500 hover:scale-110 hover:border-white/20 hover:bg-white/10 hover:text-white hover:shadow-[0_0_30px_rgba(255,255,255,0.15)] cursor-pointer active:scale-95 overflow-hidden">
+            <div className="group/lens relative mr-1 flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-white/5 bg-white/[0.02] text-white/50 backdrop-blur-2xl transition-all duration-500 hover:scale-[1.03] hover:border-white/20 hover:bg-white/10 hover:text-white hover:shadow-[0_0_10px_rgba(255,255,255,0.05)] cursor-pointer active:scale-95 overflow-hidden">
               <div className="absolute inset-0 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] pointer-events-none" />
-              <div className="absolute inset-0 -translate-x-[150%] bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-700 ease-out group-hover/lens:translate-x-[150%]" />
-              <Search className="relative z-10 h-[18px] w-[18px] drop-shadow-md transition-transform duration-300 group-hover/lens:scale-110" />
+              <Search className="relative z-10 h-[18px] w-[18px] drop-shadow-md transition-transform duration-300 group-hover/lens:scale-[1.05]" />
             </div>
           </div>
         </motion.div>
@@ -147,14 +145,14 @@ export default function Universities() {
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 0.9 }}
                   transition={{ duration: 0.3 }}
-                  className={`group relative flex flex-col overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-white/5 to-transparent p-5 shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-2 hover:border-blue-500/30 hover:shadow-blue-500/20 dark:from-white/5 dark:to-transparent ${
+                  className={`group relative flex flex-col overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-white/5 to-transparent p-5 shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-[5.5px] hover:border-blue-500/20 hover:shadow-[0_10px_40px_-10px_rgba(59,130,246,0.15)] dark:from-white/5 dark:to-transparent ${
                     university.status === "Available" ? "cursor-pointer" : ""
                   }`}
                 >
-                  <div className="absolute inset-0 rounded-3xl border border-white/5 transition-colors pointer-events-none group-hover:border-blue-500/20" />
+                  <div className="absolute inset-0 rounded-3xl border border-white/5 transition-colors pointer-events-none group-hover:border-blue-500/15" />
                   {/* Hover Glow */}
                   <div className="absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
-                    <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-blue-500/20 blur-3xl dark:bg-blue-500/20" />
+                    <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-blue-500/15 blur-3xl dark:bg-blue-500/15" />
                   </div>
 
                   {/* Badge */}
@@ -205,7 +203,7 @@ export default function Universities() {
 
                     <div className="mt-auto pt-6">
                       {university.status === "Available" ? (
-                        <div className="group/btn relative flex w-full items-center justify-center gap-2 rounded-xl border border-blue-400/30 bg-gradient-to-r from-blue-600 via-indigo-600 to-blue-700 px-4 py-3.5 text-sm font-bold text-white shadow-[0_0_30px_rgba(37,99,235,0.3)] transition-all duration-500 hover:-translate-y-1 hover:border-blue-400/50 hover:from-blue-500 hover:via-indigo-500 hover:to-blue-600 hover:shadow-[0_0_40px_rgba(37,99,235,0.5)] active:translate-y-0 active:shadow-[0_0_36px_rgba(37,99,235,0.45)] overflow-hidden">
+                        <div className="group/btn relative flex w-full items-center justify-center gap-2 rounded-xl border border-blue-400/30 bg-gradient-to-r from-blue-600 via-indigo-600 to-blue-700 px-4 py-3.5 text-sm font-bold text-white shadow-[0_0_15px_rgba(37,99,235,0.15)] transition-all duration-500 hover:-translate-y-1 hover:border-blue-400/50 hover:from-blue-500 hover:via-indigo-500 hover:to-blue-600 hover:shadow-[0_0_20px_rgba(37,99,235,0.25)] active:translate-y-0 active:shadow-[0_0_15px_rgba(37,99,235,0.2)] overflow-hidden">
                           <div className="absolute inset-0 rounded-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.3)] pointer-events-none" />
                           <span className="relative z-10 flex items-center gap-2">
                             Explore University