[GSSoC]: Overlapping text and background elements in Hero section creates visual clutter

[codewithharshit17]

Discord Username

harshitjaiswar_82498

Task Description

The hero section of the landing page suffers from significant visual clutter due to overlapping text elements and the background node graph visualization. The headline "Understanding." is superimposed directly over the technical descriptions, network nodes, and lines, making both the text and the background graphics difficult to read and parse.

Implementation Plan

1. Fix the Layering (Visual Hierarchy)

• Send the Graph to the Background: Treat the node graph strictly as a background element rather than an interactive layout piece. Place it on a lower structural layer (z-index).
• Bring the Text to the Foreground: Keep the main headlines, description text, and buttons on a dedicated foreground layer so they stack naturally over the background without layout conflicts.

2. Reduce Visual Noise

• Lower Graph Opacity: Dim the entire node graph component significantly (e.g., down to 15% or 20% opacity). This ensures the background node text (like Webhook Rx and Normalizer) doesn't compete for readability with your main copy.
• Block Mouse Interactions: Disable pointer events on the background graph so it doesn't accidentally intercept hover effects or clicks intended for your primary call-to-action buttons.

3. Adjust Spacing and Scaling

• Add Breathing Room: Increase the vertical margins or padding between the main typography block and the interactive live stream panel below it to clear up the compressed space.
• Responsive Font Sizing: Ensure the large "Understanding." headline scales down proportionally on smaller screen sizes to prevent it from breaking awkwardly or spilling onto adjacent UI components.

GSSoC Agreements

• I have read the CONTRIBUTING.md file.
• I will not open a PR until a mentor assigns this issue to me.
• I understand that spam or trivial PRs will be rejected.

[codewithharshit17]

hi @probably-ABHINAV ,

I'd love to work on fixing this UI clutter. Can you please assign this issue to me?

[Xenon010101]

/assign