Landing Page Layout Issue and Missing Key Validation

[Suman-Jyoti-Phukan]

Problem Description

In the landing page, several issues have been identified that need to be addressed to improve the user experience and adhere to best practices.

1. Image Overlapping Parent Div: The image on the landing page is overflowing with the parent container and producing a scrollable window and a white gap at the bottom because you have specified a margin botton at 8rem.

2. Layout Structure: The overall layout of the landing page is not properly structured, which affects its visual appeal and usability.

3. Missing Alt Attributes: Image elements on the landing page are missing the 'alt' attribute, which is essential for accessibility and SEO.

4. Missing Key Validation : List is missing key validation

Environment

• Browser: [Google Chrome]
• Operating System: [Windows 11]

You can assign me this under #hactoberfest tag

[DNA5769]

Layout Structure: The overall layout of the landing page is not properly structured, which affects its visual appeal and usability.

Could you elaborate more on this

[Suman-Jyoti-Phukan]

Layout Structure: The overall layout of the landing page is not properly structured, which affects its visual appeal and usability.

Could you elaborate more on this

The main div in landing page have" grid grid-cols-12" and you are manually placing the items using grid column start and col-span in the child element, which is okay but not efficient. Instead you can simple use "grid grid-row-[20fr, 80fr] 100dvh", this will divide the two child with a 20% and 80% of the screen and 100dvh will make sure the screen always adapt to the different screens. The image section has "col-span-12 inset-0 h-[100vh] w-full object-fill object-right" , if you specify 100vh in the image it will take the 100vh of the total viewport size of the screen not the parents and as the parents has no defiend height it will simply take 100% of viewport because of this the screen is overflowing and creating a scrollable window. We can use other methods to simply make it fit it to the screen at different screen sizes. Hope you understand ask if you need more information.

[Suman-Jyoti-Phukan]

@arcVaishali You can assign me this issue, I have already fixed the issue.

[arcVaishali]

@Suman-Jyoti-Phukan do not work on the landing page for now, other than that all the other points that you have mentioned above ⬆️, you can work on that. Make sure to follow the contributing guidelines.