fix: center event image and fix Join Now button navigation #7623

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>

Author: ankitrewar11

src/components/UpcomingEventCard/EventCard.style.js

@@ -21,9 +21,20 @@ const UpcomingEventsWrapper = styled.div`
 	.blog-slider_img{
 		max-height: 25rem; 
 		object-fit: cover;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
 		.gatsby-image-wrapper {
+		    width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			img {
 				 max-height: 25rem;
+				 object-fit: cover;
+				 width: 100%;
 			 }
 	   }
 	}
@@ -111,4 +122,4 @@ const UpcomingEventsWrapper = styled.div`
 	}
 `;
 
-export default UpcomingEventsWrapper;
+export default UpcomingEventsWrapper;

src/components/UpcomingEventCard/index.js

@@ -37,7 +37,7 @@ const UpcomingEvents = ({ data }) => {
                       <h3 className="blog-slider_title">{item.frontmatter.title}</h3>
                       <p className="blog-slider_date">{item.frontmatter.date}</p>
                       <p className="blog-slider_description">{item.frontmatter.abstract}</p>
-                      <Button $secondary className="blog-slider_button" $url={item.frontmatter.eurl} title="Join Now" $external={true} />
+                      <Button $secondary className="blog-slider_button" $url={item.frontmatter.eurl || `/community/events/${slugify(item.frontmatter.title)}`} title="Join Now" $external={!!item.frontmatter.eurl} />
                     </div>
                   </div>
                 </SwiperSlide>
@@ -51,4 +51,4 @@ const UpcomingEvents = ({ data }) => {
   );
 };
 
-export default UpcomingEvents;
+export default UpcomingEvents;