Improve homepage layout and typography hierarchy

[srinithivijayakumars139-wq]

What this PR does

This PR improves the typography hierarchy on the homepage for the modern theme. The changes adjust font sizes and spacing to create a clearer visual structure and improve readability for the standard browser zoom level (100%).

### Changes Made

1. Adjusted the layout and typography of the homepage to improve readability and to maintain visual consistency at the standard browser zoom level (100%).
2. Fixed the promo card layout using max-width to prevent it from stretching excessively towards the right side of the screen.
3. Aligned topic headers to the left to improve readability and maintain consistency with overall layout.
4. Updated spacing and layout properties including:

• width
• padding
• line-height
• min-height
• margin-bottom
• font-size

These adjustments aims to improve the visual balance of the homepage while keeping the existence layout structure intact.

### Why this Change?

The previous typography styling made some sections feel visually dense by large headings, hero images and promo cards, this reduced the distinction between headings and body text. These changes improve clarity and readability while keeping the existing layout and design intact.

### Testing

• Ran the project locally and verified the homepage layout.
• Confirmed that typography changes render correctly for the standard browser zoom level.

### Before:

• 
• 
• 
• 
• 
• 

### After:

• 
• 
• 
• 
• 
• 

### AI Assistance

All the changes are manually done with the help of developer tools. I have used AI (ChatGPT) as a helper for checking the grammatical and spelling errors in the description. The changes were completely reviewed by me and tested locally.