Skip to content

feat: redesign landing page UI and improve UX#477

Open
mahigautam-ops wants to merge 2 commits into
Eswaramuthu:mainfrom
mahigautam-ops:feat/ui-modernization-landing-page
Open

feat: redesign landing page UI and improve UX#477
mahigautam-ops wants to merge 2 commits into
Eswaramuthu:mainfrom
mahigautam-ops:feat/ui-modernization-landing-page

Conversation

@mahigautam-ops
Copy link
Copy Markdown

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?

  • Redesigned the hero section with improved layout and call-to-action buttons
  • Added modern responsive UI components and improved spacing
  • Enhanced typography and visual hierarchy across sections
  • Improved feature showcase section with a cleaner card-based design
  • Added interactive and animated UI elements to improve engagement
  • Refactored the landing page structure for better organization
  • Improved responsiveness across mobile, tablet, and desktop devices
  • Enhanced overall user experience and visual consistency

Are these changes tested?

Yes.

  • Verified the application runs successfully in the local development environment
  • Tested homepage rendering across different screen sizes
  • Verified navigation links and page sections function correctly
  • Confirmed responsiveness and layout consistency after UI changes

Are there any user-facing changes?

Yes.

Users will experience:

  • A redesigned and more visually appealing landing page
  • Improved navigation and content hierarchy
  • Better responsiveness on mobile and tablet devices
  • More engaging interactive UI elements and animations
  • Improved readability and accessibility

@vercel
Copy link
Copy Markdown

vercel Bot commented May 24, 2026

@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.

@github-actions
Copy link
Copy Markdown

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

}

to {
transform: translateX(-50%);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MAJOR BUG 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.

Suggested change
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.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the landing page by fixing the marquee loop and restoring the contact/footer details.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@entelligence-ai-pr-reviews
Copy link
Copy Markdown
Contributor


Confidence Score: 3/5 - Review Recommended

Not safe to merge without review — the marquee animation in static/css/landing-page.css contains a logic bug where translateX(-50%) will only produce a seamless loop if the .signal-track element contains duplicated content, but this duplication appears to be missing, resulting in a visible blank space mid-animation. This PR achieves a meaningful landing page redesign and UX improvement, but this animation bug would be immediately visible to end users. The fix requires either duplicating the marquee content in the HTML or adjusting the CSS transform value and animation approach to match the actual DOM structure.

Key Findings:

  • The translateX(-50%) loop technique in landing-page.css requires the .signal-track to contain two identical copies of the scrolling content so the second copy seamlessly replaces the first; without this duplication, the animation reaches a blank/empty state before resetting, producing a jarring visual glitch.
  • This is a runtime/visual correctness issue — not a style nit — that would be immediately apparent to any visitor during the marquee scroll cycle, directly impacting the UX goal this PR aims to improve.
  • The rest of the redesign work across the 4 changed files appears to have no flagged issues, suggesting the core layout and structural changes are sound, making this a targeted fix rather than a broad rework.
Files requiring special attention
  • static/css/landing-page.css

@entelligence-ai-pr-reviews
Copy link
Copy Markdown
Contributor

EntelligenceAI PR Summary

This PR overhauls the landing page contact section and footer layout with new grid-based designs and updated HTML structure.

  • Replaced the old #contact section with a two-column contact grid containing a contact details card and a platform info card with login CTAs
  • Reassigned the #contact id to a new standalone section; rewrote final CTA copy
  • Restructured the footer from a two-element flex layout to a three-column grid (landing-footer-grid) with brand, Quick Links, and Contact columns
  • Added anchor links (Home, About, Features, FAQ) and phone/location info to the footer
  • Introduced .contact-grid, .contact-card, .contact-card-label, .contact-list, and .contact-actions CSS classes
  • Replaced .landing-footer flex styles with .landing-footer-grid and sub-components (.landing-footer-column, .landing-footer-links, .landing-footer-contact, .landing-footer-actions)
  • Added responsive breakpoints to collapse .contact-grid and .landing-footer-grid to a single column on smaller screens
  • Duplicated scrolling ticker spans to enable a seamless CSS marquee loop

Confidence Score: 3/5 - Review Recommended

Review 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 static/css/landing-page.css regarding the marquee animation producing blank space due to missing content duplication has not been addressed. While this visual bug was not introduced by this PR, it remains open and unresolved, meaning merging continues to ship a known defect. The UI restructuring work itself (two-column contact grid, three-column landing-footer-grid, updated CTAs) appears structurally sound based on the current review pass.

Key Findings:

  • A pre-existing MAJOR bug in static/css/landing-page.css (L1-L735) where the marquee animation produces blank space due to missing content duplication remains unresolved — this is a visible rendering defect that affects user experience on the landing page.
  • The current review pass found no new issues across both changed files, suggesting the HTML restructuring (contact grid, footer grid columns for brand/Quick Links/Contact) was implemented cleanly without introducing regressions.
  • The marquee animation blank-space issue, while pre-existing, is in the same CSS file being modified by this PR, making this an opportune moment to fix it before merging rather than continuing to defer it.
Files requiring special attention
  • static/css/landing-page.css

@mahigautam-ops
Copy link
Copy Markdown
Author

Before

Screenshot 2026-05-23 221150

(old screenshot)

After

(new redesigned screenshot)

Screenshot 2026-05-24 125334

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI Enhancement] Modernize Landing Page Design and Introduce Interactive Visual Elements

1 participant