ui: fix layout breaking in hero section due to prematurely closed hero-visual-main div tag

[komalharshita]

Description

In the hero section of the home page, the mock code editor window frame is empty, and the code lines float below it on the page background. This happens because the wrapper div <div class="hero-visual-main"> is closed prematurely with a trailing slash/closing tag (</div>) at line 547 of index.html. As a result, the code block header (hvm-header) and the code contents (hvm-code) render outside of the editor frame.

We should correct the div structure so that all inner elements are correctly wrapped inside the hero-visual-main editor mockup.

Current Behavior

The mock code visualizer renders as a blank black rectangle, with the code details pushed below it on a plain background.

Proposed Solution

1. Remove the closing </div> tag immediately following <div class="hero-visual-main" style="cursor: default;"> on line 547.
2. Ensure the closing tag on line 565 correctly closes the hero-visual-main section.

Implementation Guidance

• Modify src/templates/index.html (lines 547-565).

Acceptance Criteria

• The mock code editor header (expense_tracker.py) and code details render inside the black editor frame.
• Visual appearance conforms to the screenshot design (nice rounded editor box with green/yellow/red dots and code lines nested inside).
• No unclosed or dangling HTML tags are left in the hero section structure.

Contributor Guidelines

Interested in working on this issue?

1. Comment /assign to request assignment.
2. Wait until the issue shows you as the assignee.
3. Create a new branch for your changes.
4. Submit a Pull Request referencing this issue.

Please do not begin working on an issue already assigned to another contributor unless a maintainer confirms it is available.

[pisum-sativum]

/assign

[github-actions]

Hey @pisum-sativum, this issue is already assigned to @komalharshita. Please find another open issue!