[FEATURE] Adding Background Image to Get Ticket Section

prashantrai-30 commented 2 weeks ago

Why do we need this improvement?

Replacing the solid background of the city ticket boxes with an image would create a more visually striking and immersive experience for users. This change would help users better connect with the event locations and make the ticket purchasing process more engaging.

How will this change help?

Incorporating a background image into the ticket boxes would:

Enhance the overall aesthetic and visual interest of the "Get Tickets" section
Provide a stronger sense of place and atmosphere for each event location
Potentially increase the likelihood of users purchasing tickets for specific cities by creating a more compelling visual representation

Screenshots

Screenshot 2024-11-05 194217

How could it be implemented/designed?

City Ticket Box with Background Image:

The entire ticket box would be turned into a canvas for the background image, with the city name, date, and "Get Your Ticket" button overlaid on top.
The image should be a high-quality, visually striking photograph that captures the essence of the city and the event.
The image should be responsive and scale appropriately on different screen sizes, maintaining the desired aspect ratio and ensuring the text elements remain readable.
The text elements (city name, date, and button) should have sufficient contrast against the background image to ensure readability.

Consistent Design Across Locations:

The layout and design of the ticket boxes, including the background images, should be consistent across all the city locations.
This will create a cohesive and recognizable experience for users as they navigate through the different event locations.

Accessibility Considerations:

Ensure the background image includes appropriate alt text to provide accessibility for users who may not be able to see the image.
Consider adding a caption or description below the ticket box that describes the visual elements of the background image.

🚧 Breaking changes

Yes

👀 Have you checked for similar open issues?

[X] I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

[X] I have read the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!

ashmit-coder commented 2 weeks ago

Hey @prashantrai-30 I think that this improvement will just make the cards difficult to read. What do you think @Mayaleeeee ?

prashantrai-30 commented 2 weeks ago

Screenshot 2024-11-08 155437 My suggestion is that we should do something like this.

Mayaleeeee commented 2 weeks ago

Thanks for the ping, @ashmit-coder!

Hi @prashantrai-30, Thanks for submitting this issue. Could you attach a wireframe or sketch to help clarify your idea? It’s a bit hard to visualize exactly what you’re proposing.

I agree that the card could use some improvement, but I’d like to understand more about your approach, especially with adding a background under the ticket card.

If you’re aiming for a style similar to the location card, that may not work well, as it could impact readability.

prashantrai-30 commented 1 week ago

Hi @Mayaleeeee,

https://github.com/user-attachments/assets/c5c108eb-f409-4509-856a-9bb1222c936d

I want to do something like this, what is your suggestion?

ashmit-coder commented 1 week ago

Hi @Mayaleeeee,

Screen.Recording.2024-11-10.111621.1.mp4 I want to do something like this, what is your suggestion?

that looks very overwhelming in my opinion @prashantrai-30 , can you think of something different maybe?

prashantrai-30 commented 1 week ago

Hey @ashmit-coder, I would like to know what is your suggestion, should we use GIF, Image only or some modern color gradient which is similar to our website?

Mayaleeeee commented 1 week ago

Hi @Mayaleeeee, Screen.Recording.2024-11-10.111621.1.mp4 I want to do something like this, what is your suggestion?

that looks very overwhelming in my opinion @prashantrai-30 , can you think of something different maybe?

I agree with @ashmit-coder the design will be too overwhelming.

@prashantrai-30 Could you search for inspiration on ticket designs and try to do something different instead?

prashantrai-30 commented 5 days ago

https://github.com/user-attachments/assets/240682d4-fc13-4ada-a25f-b427009cd9e8

https://github.com/user-attachments/assets/1bd4f84c-44ee-4958-a606-b31ff9257930

Hi @ashmit-coder, I just want to know which of the above two ideas should I pursue further :)

prashantrai-30 commented 2 days ago

Screen.Recording.2024-11-17.101905.mp4 Screen.Recording.2024-11-17.095909.mp4 Hi @ashmit-coder, I just want to know which of the above two ideas should I pursue further :)

Hey @Mayaleeeee, Can you help me out.

ashmit-coder commented 2 days ago

https://github.com/user-attachments/assets/240682d4-fc13-4ada-a25f-b427009cd9e8

https://github.com/user-attachments/assets/1bd4f84c-44ee-4958-a606-b31ff9257930

Hi @ashmit-coder, I just want to know which of the above two ideas should I pursue further :)

Hey @prashantrai-30 both of these designs look great to me, so I will leave it upon @Mayaleeeee to decide what to go ahead with.

ashmit-coder commented 2 days ago

https://github.com/user-attachments/assets/240682d4-fc13-4ada-a25f-b427009cd9e8

https://github.com/user-attachments/assets/1bd4f84c-44ee-4958-a606-b31ff9257930

Hi @ashmit-coder, I just want to know which of the above two ideas should I pursue further :)

Hey @prashantrai-30 both of these designs look great to me, so I will leave it upon @Mayaleeeee to decide what to go ahead with.

asyncapi / conference-website