updated UI and logics

RIT-EVENT-MANAGEMENT--main/components/SpecialEventsBanner.tsx

@@ -108,34 +108,38 @@ const SpecialEventsBanner: React.FC<SpecialEventsBannerProps> = ({ specialEvents
                 </p>
               </motion.div>
 
-              <div className="grid grid-cols-1 gap-6 pt-4">
-                {specialEvents.map((event, index) => (
-                  <motion.div
-                    key={event.id}
-                    variants={{
-                      closed: { opacity: 0, scale: 0.95 },
-                      open: { opacity: 1, scale: 1 }
-                    }}
-                    transition={{ delay: isOpen ? 0.3 + (index * 0.1) : 0 }}
-                    whileHover={{ scale: 1.02 }}
-                    className="group cursor-pointer relative"
-                    onClick={() => handleRedirect(event.link)}
-                  >
-                    <div className="border border-[#8d6e63]/15 bg-[#8d6e63]/5 p-5 rounded-lg backdrop-blur-[1px] transition-all duration-300 group-hover:bg-[#8d6e63]/10 group-hover:border-[#8d6e63]/30">
-                      <h3 className="font-medieval text-xl md:text-2xl text-[#3e2723] mb-2 group-hover:text-[#795548] transition-colors">
+              <div className="relative w-full h-64 overflow-hidden rounded-lg">
+                {/* Slideshow container */}
+                <style>{`
+                  .animate-slideshow {
+                    display: flex;
+                    width: ${specialEvents.length * 100}%;
+                    animation: slide ${specialEvents.length * 8}s linear infinite;
+                  }
+                  @keyframes slide {
+                    0% { transform: translateX(0); }
+                    100% { transform: translateX(-${((specialEvents.length - 1) / specialEvents.length) * 100}%); }
+                  }
+                `}</style>
+                <div className="animate-slideshow">
+                  {specialEvents.map((event) => (
+                    <div
+                      key={event.id}
+                      className="flex-shrink-0 w-full h-full cursor-pointer flex items-end bg-cover bg-center"
+                      onClick={() => handleRedirect(event.link)}
+                      style={{
+                        backgroundImage: event.coverImage ? `url(${event.coverImage})` : "url('/parchment_texture.png')",
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        backgroundColor: event.coverImage ? undefined : '#6b5b95',
+                      }}
+                    >
+                      <div className="w-full bg-black/40 text-center py-2 text-white text-sm font-medieval">
                         {event.title}
-                      </h3>
-                      <p className="font-parchment text-xs md:text-sm text-[#5d4037] line-clamp-2 opacity-80">
-                        {event.description}
-                      </p>
-                      <div className="mt-3 flex justify-end">
-                        <span className="text-[9px] font-medieval uppercase tracking-[0.2em] text-[#8d6e63] group-hover:text-[#3e2723] flex items-center gap-2">
-                          Behold <i className="fas fa-feather-pointed"></i>
-                        </span>
                       </div>
                     </div>
-                  </motion.div>
-                ))}
+                  ))}
+                </div>
               </div>
 
               {hasEvents && (