feat: redesign landing page UI and improve UX#477
Conversation
|
@mahigautam-ops is attempting to deploy a commit to the 007's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for creating a PR for your Issue!
|
| } | ||
|
|
||
| to { | ||
| transform: translateX(-50%); |
There was a problem hiding this comment.
Marquee animation produces blank space due to missing content duplication
translateX(-50%) only loops seamlessly when the .signal-track element contains two identical copies of the items, so -50% lands exactly on the start of the second copy. home.html supplies only one copy, so the second half of every 20s cycle shows blank space before the animation snaps back.
| transform: translateX(-50%); | |
| to { | |
| transform: translateX(-100%); | |
| } |
Prompt to fix with AI
Copy this prompt into your AI coding assistant to fix this issue.
In `static/css/landing-page.css` at line 460, the marquee keyframe ends at `translateX(-50%)`. This only works for a seamless infinite loop when the `.signal-track` element's HTML content is duplicated (two identical sets of items). The HTML in `templates/home.html` (lines 131–142) has only one set of items inside `.signal-track`, so half of every animation cycle shows blank space.
Fix option A (CSS-only): Change line 460 from `transform: translateX(-50%);` to `transform: translateX(-100%);` — this scrolls the entire single-copy content off-screen and then loops. There will be a brief blank flash at the loop point, but it avoids HTML changes.
Fix option B (preferred, seamless): In `templates/home.html`, duplicate all 9 `<span>` items inside `.signal-track` so the element contains them twice, then keep the CSS end value at `translateX(-50%)`. This is the standard CSS marquee pattern.
There was a problem hiding this comment.
Updated the landing page by fixing the marquee loop and restoring the contact/footer details.
There was a problem hiding this comment.
The marquee animation has been fixed by changing the CSS to transform from translateX(-50%) to translateX(-100%), ensuring the single set of items in .signal-track scrolls completely off-screen before looping. This resolves the blank space issue without requiring HTML changes. Contact and footer details have also been restored as noted.
The fix addresses the core issue identified in the review: the original translateX(-50%) assumed duplicated content in .signal-track for a seamless loop, but since only one set of spans is present in home.html, half the animation cycle displayed blank space. By shifting to -100%, the entire content scrolls out of view before restarting, eliminating the gap. This is a valid CSS-only solution per Fix Option A in the review suggestion. No further changes are needed unless a seamless loop (no blank flash) is required, which would involve duplicating the markup as per Fix Option B.
Confidence Score: 3/5 - Review RecommendedNot safe to merge without review — the marquee animation in Key Findings:
Files requiring special attention
|
EntelligenceAI PR SummaryThis PR overhauls the landing page contact section and footer layout with new grid-based designs and updated HTML structure.
Confidence Score: 3/5 - Review RecommendedReview recommended — this PR successfully overhauls the landing page contact section and footer into a cleaner grid-based layout, but a pre-existing unresolved bug in Key Findings:
Files requiring special attention
|
Before
(old screenshot) After(new redesigned screenshot)
Hi @Eswaramuthu, I have completed the implementation for this issue and submitted a PR with the proposed UI/UX enhancements for the landing page. PR: #477 The changes include a modernized landing page design, improved visual hierarchy, enhanced responsiveness, and interactive UI improvements. Looking forward to your review. Thank you! |


Which issue does this PR close?
Closes #450
Rationale for this change
The current landing page lacked visual hierarchy, modern UI components, and engaging interactions. The homepage appeared outdated and relied heavily on large text blocks with minimal visual elements, which affected user engagement and overall user experience.
This enhancement aims to provide a more modern, responsive, and visually appealing landing page while improving accessibility, readability, and navigation.
What changes are included in this PR?
Are these changes tested?
Yes.
Are there any user-facing changes?
Yes.
Users will experience: