Created landing page

[ghost]

Description

This PR fixes #257

[ghost]

@codecShivam this is how it looks

[A91y]

Background element seem to overlap with the nav.

Same here too.

[ghost]

@A91y overlapping fixed

[ghost]

@codecShivam check I've added responsiveness to the page

[codecShivam]

Issue 1: Padding Adjustment

Needs some padding adjustment in the x-direction to enhance the visual spacing.

---

Issue 2: Overlapping Content

The content looks overlapped. Please add some gap between the elements to prevent overlapping.

---

Issue 3: Background Image Visibility

The background image is not visible on smaller screens. Ensure the background image is responsive and visible across different screen sizes.

---

Issue 4: Responsive Layout

Wrap the elements in a way that, on decreasing the screen size, one element should go below and be aligned to the center. Also, adjust the text size for different screen sizes to maintain readability and alignment.

---

Issue 5: Text Visibility

The text is not visible. Improve the text alignment or background to enhance visibility.

---

General Suggestions for Improvement

• Breakpoints: Focus on creating three breakpoints to handle different screen sizes. Adjust sizes, alignments, and spacing accordingly.
• Text Size: Ensure text sizes are responsive and legible on all devices.
• Alignment: Maintain proper alignment to ensure elements do not overlap and are visually appealing.

---

Additional Suggestion

To ensure the design is properly viewed on all screens and devices, use the extension available at https://mobileview.io/.

Excellent work, @piyusesh!

[ghost]

@codecShivam lmk if more improvements are needed

[Mr-Sunglasses]

@codecShivam lmk if more improvements are needed

@codecShivam Review it ASAP

[codecShivam]

@codecShivam lmk if more improvements are needed

@codecShivam Review it ASAP

Yeah, will review it by today.

[codecShivam]

@codecShivam lmk if more improvements are needed

everything lgm!!
Just use the next/Image and remove this warning by providing width and height to it

[codecShivam]

lgm!!
but the warning is not resolved yet
take ref from here: https://nextjs.org/docs/pages/building-your-application/optimizing/images
cc: @piyusesh

[ghost]

@codecShivam done

[codecShivam]

@codecShivam done

fix this in hero component as well

[codecShivam]

Thanks! @piyusesh
cc: @A91y