Fix responsiveness of Footer and card component

[Rajgupta36]

Describe the bug

The Card and Footer components are not responsive yet. I want to create a new design for the footer that works well on mobile devices.

Expected Behavior

• The Card and Footer should be responsive on all screen sizes.
• Add customization to the Footer for a better mobile design.

Screenshots

Current design of the Card and Footer:

[Tusharjamdade]

Hey @Rajgupta36,
I can work on this. I can make the card and footer responsive for all breakpoints (i.e., mobile, tablet, laptop, and so on). Could you please assign it to me?

[arkid15r]

@Tusharjamdade thank you for helping w/ this. I've assigned it to you as requested.

[Tusharjamdade]

Hi @arkid15r @Rajgupta36,
I have redesigned the Header and Footer.
I added a hamburger menu to create a dropdown for small screen devices, such as mobile phones.

Additionally, I redesigned the Footer to make it more responsive for mobile devices. Please let me know if it needs any further improvements.
If everything looks good, I will proceed to open the PR. Thank you!

Nest.Frontend.2.mp4

[arkid15r]

Looks cool, thank you @Tusharjamdade
Could you make sure the leaders' avatars look okay too and create a PR?

[Tusharjamdade]

@arkid15r Sorry, what do you mean by "leaders' avatars"? I am not familiar with this term.

[arkid15r]

@arkid15r Sorry, what do you mean by "leaders' avatars"? I am not familiar with this term.

Technically it's contributors' avatars -- images between Leaders and tags blocks that looks squeezed

[Rajgupta36]

looks cool, @Tusharjamdade . i also created one design for mobile. can you implement it.
and one small suggestion for hamburger menu . add small animation like when we click it doesn't appear suddenly.
like this dropdown

Recording.2024-12-20.114542.mp4

[Tusharjamdade]

I followed the instructions from OWASP Nest's README, but I am unable to fetch the data. Is there something wrong with my setup, or am I missing something obvious during the setup?

[Tusharjamdade]

looks cool, @Tusharjamdade . i also created one design for mobile. can you implement it. and one small suggestion for hamburger menu . add small animation like when we click it doesn't appear suddenly. like this dropdown

Recording.2024-12-20.114542.mp4

@Rajgupta36 This looks great! I will try to implement it.

[Rajgupta36]

@Tusharjamdade run make load data cmd in root folder
and also use bash terminal

[Tusharjamdade]

@Rajgupta36 @arkid15r

I am still encountering an error.
The make run command executes successfully, but the error occurs when running make load-data.

[Tusharjamdade]

@arkid15r @Rajgupta36 I think I have an error in my Docker setup. The Nest-backend stopped forcefully.
I tried recloning the repo and setting it up again, but the error still exists.
Can you please help me fix it?

[Rajgupta36]

@Rajgupta36 @arkid15r

I am still encountering an error.
The make run command executes successfully, but the error occurs when running make load-data.

Pls restore the nest data file which is missing using git restore cmd. Then run

[Tusharjamdade]

Hi @Rajgupta36 @arkid15r,

As mentioned, I have fixed the header, footer, and leaders' avatars, and I have created a pull request.

Thank you for the opportunity!!

Here are some screenshots and screen recordings of the working code.

Header.and.Card.mp4

Footer.mp4

[Rajgupta36]

nice work @Tusharjamdade