[UI/UX]: The hero section's heading, body texts and icons have colour contrast, padding and responsiveness issues #713
Description
Problems:
- From md (768px) to lg (1024px) viewport, the landing page structure is in such a way that if a user with tablet devices or devices within the given viewports, would not be able to even read the heading "We Educate We Innovate", especially in light mode.
- The heading "We Educate We Innovate" currently lies at the edge of its background. It would be very suitable to to let it have some bottom padding.
- The current applied colour for body text and icons is text-zinc-500, which lacks sufficient contrast with its background, causing accessibility issues. According to WCAG Compliance, the ratio should be at least 4.5:1
Solutions:
- Either bring enough contrast in the heading or let it have consistenet background within the viewports
- Provide padding below "We Educate We Innovate"
- Replace text-zinc-500 with text-zinc-800 in only over lg (because its background is yellow). text-zinc-500 have enough contrast with white