feat: Homepage card animation

[Doraemon012]

Is your feature request related to a problem? Please describe.

Currently, there is one image of all the event cards, and there is no animation in it. Card images should be separate (but fitted into one div, looking exactly like the image) and it must have animation.

The event card images should display one by one with fading animation, one time load, each comes with fade animation and then stays there.

When the user hovers over the card, the z-index of it must increase, i.e., the card must come above others (as there will be corners overlapping (intentional)) slowly with animation.

On smaller devices, it must adjust itself according to the screen width.

Describe the solution you'd like

1. The event card images should display one by one with fading animation, one time load, each comes with fade animation and then stays there.

2. When the user hovers over the card, the z-index of it must increase, i.e., the card must come above others (as there will be corners overlapping (intentional)) slowly with animation.

3. On smaller devices, it must adjust itself according to the screen width.

Describe alternatives you've considered

None

Additional context

Here is the zip file of card images:

cards.zip

[Ayushmaanagarwal1211]

@Doraemon012 Can i work on it

[Tanay-ErrorCode]

@Ayushmaanagarwal1211 Go ahead.

[Tanay-ErrorCode]

@Ayushmaanagarwal1211 Complete it ASAP as the deadline of the program is near.

[Ayushmaanagarwal1211]

@Tanay-ErrorCode Sure

[Ayushmaanagarwal1211]

@Tanay-ErrorCode Hlo actually the zip file doesn't contains the all image so should i aligned it like that

[Tanay-ErrorCode]

@Ayushmaanagarwal1211 Use photoshop or any other software and extract the components from image on website.