YaleComputerSociety · Ragyudy · Apr 7, 2025 · Apr 13, 2025
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -34,7 +34,7 @@ const AboutPage: React.FC = () => {
           <h2 className="text-3xl font-bold mb-6">Meet the Team</h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
             {teamMembers.map((member) => (
-              <div key={member.name} className="bg-white p-6 rounded-lg shadow-md">
+              <div key={member.name} className="bg-white/70 backdrop-blur-lg p-6 rounded-lg shadow-md">
                 <MemberCard member={member}></MemberCard>
               </div>
             ))}

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -19,15 +19,119 @@ body {
 }
 
 @font-face {
-  font-family: 'Fira Sans';
-  src: url('/fonts/FiraSansCondensed-Medium.ttf') format('truetype');
+  font-family: "Fira Sans";
+  src: url("/fonts/FiraSansCondensed-Medium.ttf") format("truetype");
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Fira Sans';
-  src: url('/fonts/FiraSansCondensed-Bold.ttf') format('truetype');
+  font-family: "Fira Sans";
+  src: url("/fonts/FiraSansCondensed-Bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
-}
+}
+
+/* Floating balls animation */
+@keyframes blob {
+  0% {
+    transform: translate(0px, 0px) scale(1);
+  }
+  33% {
+    transform: translate(10px, -15px) scale(1.03);
+  }
+  66% {
+    transform: translate(-8px, 12px) scale(0.97);
+  }
+  100% {
+    transform: translate(0px, 0px) scale(1);
+  }
+}
+
+.animate-blob {
+  animation: blob 7s infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+
+/* Floating balls container */
+.floating-balls {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.floating-ball {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(64px);
+  opacity: 0.5;
+  mix-blend-mode: multiply;
+}
+
+.floating-ball-1 {
+  top: 5%;
+  left: 2%;
+  width: 600px;
+  height: 550px;
+  background-color: #cc88f9; /* clubPurple */
+  animation: blob 7s infinite;
+}
+
+.floating-ball-2 {
+  top: 2%;
+  right: 2%;
+  width: 500px;
+  height: 500px;
+  background-color: #cc88f9; /* clubTaro */
+  animation: blob 7s infinite;
+  animation-delay: 2s;
+}
+
+.floating-ball-3 {
+  bottom: -30%;
+  left: 40%;
+  width: 500px;
+  height: 500px;
+  background-color: #cc88f9; /* clubBlurple */
+  animation: blob 7s infinite;
+  animation-delay: 4s;
+}
+
+@media (max-width: 768px) {
+  .floating-ball {
+    filter: blur(80px);
+  }
+
+  .floating-ball-1 {
+    width: 300px;
+    height: 275px;
+    top: 10%;
+    left: 5%;
+  }
+
+  .floating-ball-2 {
+    width: 250px;
+    height: 250px;
+    top: 8%;
+    right: 5%;
+  }
+
+  .floating-ball-3 {
+    width: 250px;
+    height: 250px;
+    bottom: -20%;
+    left: 30%;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import CustomFont from "next/font/local";
 import "./globals.css";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import Providers from "./providers";
+import FloatingBalls from "@/components/FloatingBalls";
 
 const geistSans = CustomFont({
   src: "../../public/fonts/GeistVF.woff",
@@ -31,6 +32,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <FloatingBalls />
         <Providers>{children}</Providers>
       </body>
       <GoogleAnalytics gaId="G-XCG2T9LY5T" />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -58,7 +58,7 @@ export default function Home() {
     <main className=" flex flex-col min-h-screen">
       <div className="flex-grow">
         <Header />
-        <div className="flex flex-col w-full px-5 md:px-20">
+        <div className="bg-background flex flex-col w-full px-5 md:px-20">
           <div className="mt-20 md:mt-24"></div>
           <div className="flex flex-col md:flex-row justify-between items-start w-full mt-4 space-y-3 md:space-y-0 md:space-x-12 mb-4">
             <div className="flex flex-col">

diff --git a/src/components/FloatingBalls.tsx b/src/components/FloatingBalls.tsx
@@ -0,0 +1,11 @@
+const FloatingBalls = () => {
+  return (
+    <div className="floating-balls">
+      <div className="floating-ball floating-ball-1"></div>
+      <div className="floating-ball floating-ball-2"></div>
+      <div className="floating-ball floating-ball-3"></div>
+    </div>
+  );
+};
+
+export default FloatingBalls;
diff --git a/src/components/catalog/ClubCard.tsx b/src/components/catalog/ClubCard.tsx
@@ -124,7 +124,7 @@ const ClubCard = ({ club, onClick, followedClubs, setFollowedClubs, initialFollo
   return (
     <div className="relative w-full">
       <div
-        className={`bg-white rounded-xl flex flex-col justify-between w-full cursor-pointer h-full shadow-md  `}
+        className={`bg-white/60 backdrop-blur-lg rounded-xl flex flex-col justify-between w-full cursor-pointer h-full shadow-sm hover:shadow-md transition-shadow duration-300`}
         onClick={onClick}
       >
         {isNew() && (
@@ -179,7 +179,7 @@ const ClubCard = ({ club, onClick, followedClubs, setFollowedClubs, initialFollo
         </div>
         {hasApplicationStatus && (
           <div className="w-full overflow-hidden cursor-pointer" onClick={onClick}>
-            <div className="w-full bg-purple-50 py-2 px-3 md:px-4 rounded-b-xl">
+            <div className="w-full bg-purple-50/80 py-2 px-3 md:px-4 rounded-b-xl">
               <div className="flex items-center justify-center">
                 <span className="line-clamp-1 text-purple-800 text-xs sm:text-sm font-medium">{applicationStatus}</span>
               </div>

diff --git a/src/components/search/SearchControl.tsx b/src/components/search/SearchControl.tsx
@@ -145,7 +145,7 @@ const SearchControl = ({
 
   return (
     <div
-      className="search-control flex flex-wrap sm:gap-2 items-center pb-4 pt-2 bg-gray-100 w-full px-5 md:px-20"
+      className="search-control flex flex-wrap sm:gap-2 items-center pb-4 pt-4 bg-background w-full px-5 md:px-20"
       style={{
         position: "sticky",
         top: `84px`, // Adjust "80px" based on Header's height