Fix loading and polish pages

Co-authored-by: Alien69Flow <111972684+Alien69Flow@users.noreply.github.com>

Author: lovable-dev[bot]

src/pages/Clubs.tsx

@@ -613,23 +613,29 @@ const Clubs: React.FC = () => {
           </div>
 
           {/* Search & Filter Bar */}
-          <div className="mb-12 space-y-4">
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="mb-12 space-y-4"
+          >
             <div className="relative max-w-md mx-auto">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-alien-gold/50" />
               <input
                 type="text"
                 placeholder="Search clubs..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full px-5 py-3 bg-alien-space-dark/80 backdrop-blur-md border border-alien-gold/30 rounded-full text-alien-gold placeholder:text-alien-gold/40 font-exo focus:outline-none focus:border-alien-green/60 focus:ring-1 focus:ring-alien-green/30 transition-all"
+                className="w-full pl-11 pr-5 py-3 bg-black/50 backdrop-blur-md border border-alien-gold/30 rounded-full text-alien-gold placeholder:text-alien-gold/40 font-exo focus:outline-none focus:border-alien-green/60 focus:ring-1 focus:ring-alien-green/30 focus:shadow-[0_0_15px_rgba(57,255,20,0.15)] transition-all"
               />
             </div>
             <div className="flex flex-wrap justify-center gap-2">
               <button
                 onClick={() => setActiveCategory(null)}
                 className={`px-3 py-1.5 rounded-full text-xs font-nasalization transition-all border ${
                   !activeCategory
-                    ? 'bg-alien-green/20 border-alien-green/60 text-alien-green'
-                    : 'border-alien-gold/20 text-alien-gold/60 hover:border-alien-gold/40'
+                    ? 'bg-alien-green/20 border-alien-green/60 text-alien-green shadow-[0_0_10px_rgba(57,255,20,0.2)]'
+                    : 'border-alien-gold/20 text-alien-gold/60 hover:border-alien-gold/40 hover:bg-alien-gold/5'
                 }`}
               >
                 All
@@ -640,15 +646,15 @@ const Clubs: React.FC = () => {
                   onClick={() => setActiveCategory(activeCategory === cat ? null : cat)}
                   className={`px-3 py-1.5 rounded-full text-xs font-nasalization transition-all border ${
                     activeCategory === cat
-                      ? 'bg-alien-green/20 border-alien-green/60 text-alien-green'
-                      : 'border-alien-gold/20 text-alien-gold/60 hover:border-alien-gold/40'
+                      ? 'bg-alien-green/20 border-alien-green/60 text-alien-green shadow-[0_0_10px_rgba(57,255,20,0.2)]'
+                      : 'border-alien-gold/20 text-alien-gold/60 hover:border-alien-gold/40 hover:bg-alien-gold/5'
                   }`}
                 >
                   {cat}
                 </button>
               ))}
             </div>
-          </div>
+          </motion.div>
 
           {filteredFeatured.length > 0 && (
             <section id="featured" className="mb-16">

src/pages/CoNetWorKing.tsx

@@ -28,22 +28,33 @@ type PartnerSectionProps = {
 };
 
 const ServiceCard = ({
-  service
+  service,
+  index
 }: {
   service: ServiceProps;
-}) => <Card className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300 hover:scale-105">
-    <CardHeader className="text-center">
-      <div className={`mx-auto mb-4 p-3 rounded-full ${service.color}`}>
-        {service.icon}
-      </div>
-      <CardTitle className="text-alien-gold font-nasalization text-xl">{service.title}</CardTitle>
-    </CardHeader>
-    <CardContent>
-      <CardDescription className="text-gray-300 font-[Exo] text-center leading-relaxed">
-        {service.description}
-      </CardDescription>
-    </CardContent>
-  </Card>;
+  index: number;
+}) => (
+  <motion.div
+    initial={{ opacity: 0, y: 30 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true }}
+    transition={{ duration: 0.4, delay: index * 0.05 }}
+  >
+    <Card className="bg-black/50 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/50 transition-all duration-300 hover:scale-[1.02]">
+      <CardHeader className="text-center">
+        <div className={`mx-auto mb-4 p-3 rounded-full ${service.color}`}>
+          {service.icon}
+        </div>
+        <CardTitle className="text-alien-gold font-nasalization text-xl">{service.title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <CardDescription className="text-gray-300 font-[Exo] text-center leading-relaxed">
+          {service.description}
+        </CardDescription>
+      </CardContent>
+    </Card>
+  </motion.div>
+);
 
 const PartnerSection: React.FC<PartnerSectionProps> = ({ title, partners, color, icon, delay = 0 }) => {
   const getColorClasses = () => {