fix(ui): resolve blue box overlap on CodeExampleSection

[JituRewar]

Fixes #628

Concisely describe the change

The blue info boxes on the homepage were overlapping the terminal
code block text, making it hard to read. This happened because
both the code block and the blue boxes were placed in overlapping
CSS Grid columns (code block: cols 1–11, blue boxes: cols 9–12),
and a -z-50 z-index hack was used to hide this overlap.

Fixed by giving each element its own dedicated columns:

• Code block → columns 1 to 8
• Blue info boxes → columns 9 to 12

No more overlap, no more z-index hacks.

Before-

After-

Checklist

• Certify you wrote the patch (signed all commits with -s)
• Referenced issues using Fixes: #628 in commit message
• PR description is human-written per LLM Policy
• PR description, commit message, and GitHub comments are human-written, per LLM Policy

[JituRewar]

Now i successfully restore previous design of blue boxes and make functional to scrollbar by keeping blue boxes at their same position as @MuhammadAashirAslam suggested.