fix: ticket section render issue using slider component

components/Slider/slider.js

@@ -31,7 +31,7 @@ function ReactSlider({ children }) {
 		(<Slider ref={slider} {...settings}>
 			{children}
 		</Slider>):(
-	       <div className='flex m-2 justify-center'>{children}</div>)}
+	       <div className='flex m-4 overflow-x-scroll overflow-y-hidden' style={{scrollbarWidth:"none"}}>{children}</div>)}
 	    </>
 	);
 }

components/Tickets/ticketCards.js

@@ -8,10 +8,11 @@ function TicketCards({ className, city }) {
   const buttonText = city.isFree ? 'Get Your Free Ticket' : 'Buy Now';
 
   return (
-    <div className={`w-[300px] lg:w-full ${cardOpacity} hoverEffect h-[400px] cursor-pointer flex flex-col text-white justify-between rounded-lg card bg-white ${className}`}>
-      <div className='p-4'>
+    <div className={`w-[300px] lg:w-full ${cardOpacity} hoverEffect h-[400px] cursor-pointer flex flex-col text-white justify-between rounded-lg card mx-2 my-6 bg-white ${className}`}>
+      <div className='p-4 overflow-hidden'>
         <div className='text-xl font-bold text-gradient'>{city.name}, {city.country}</div>
         <div className='mt-2 text-lg'>{city.date}</div>
+        <p className='border-t pt-2 '>{city.description}</p>
       </div>
       <div className='flex justify-center border-t h-20 border-dashed p-4 text-center'>
         {/* Show a button based on the event status */}

cypress/e2e/Landing.cy.js

@@ -28,6 +28,20 @@ describe("Landing Page Tests", () => {
   it("Should contain Ticket section", () => {
     cy.getTestData("ticket-section").should("be.visible");
   });
+
+  it("Should contain Ticket container section",() => {
+    cy.getTestData("ticket-card-container").should("be.visible");
+  })
+
+  it("Should render Slider for small screen devices", () => {
+    cy.viewport(0,590);
+    cy.getTestData("ticket-card-container").find("div.slick-slider")
+  });
+
+  it("Should verify that the container has a child with overflow-x-scroll for medium and large screen", () => {
+    cy.viewport(591,1500);
+    cy.getTestData("ticket-card-container").find("div.overflow-x-scroll")
+  });
 
   it("Should contain Sponsor component", () => {
     cy.getTestData("sponsor-section").should("be.visible");