feat: redesign Hypersense Cost Observability landing page#4877
Open
muditbhutani wants to merge 1 commit into
Open
feat: redesign Hypersense Cost Observability landing page#4877muditbhutani wants to merge 1 commit into
muditbhutani wants to merge 1 commit into
Conversation
|
Review changes with |
XyneSpaces
approved these changes
May 28, 2026
XyneSpaces
left a comment
XyneSpaces
left a comment
Collaborator
There was a problem hiding this comment.
Review Summary
Clean redesign implementation aligning Hypersense landing page with Figma specifications. Code follows established patterns.
Changes Analysis
Visual/Structural improvements:
- Properly constrained hero illustration with
h-[360px] w-auto object-containto match design aspect ratio - Removed
PageUtils.PageHeadingcomponent dependency in favor of direct element composition, fixing spacing override issues - Updated typography to use design tokens:
text-fs-24,text-fs-16,text-fs-14 - Button sizing corrected from
LargetoMedium - Feature tiles properly sized with consistent icon containers (32px), 16px icons, 14px text
- Fixed feature icons:
nd-piggy-bankreplaces missingvertical_slider,nd-analyticsfor forecast section
Component structure:
- New
FeatureBlockcomponent extracted for reusability across 4 feature tiles - Responsive grid layout with
md:grid-cols-2for larger screens - Proper gap spacing following design tokens throughout
Analytics:
- Mixpanel events preserved:
cost_observability_exploreandcost_observability-redirect
Verification Checklist
- Tailwind classes use design system tokens
- Typography follows module patterns
- Icon names verified against sprite
- Mixpanel events tracked
- No unused imports or bindings
- Component extraction is justified (4 usages)
LGTM - ready to merge.
XyneSpaces
approved these changes
May 28, 2026
XyneSpaces
left a comment
XyneSpaces
left a comment
Collaborator
There was a problem hiding this comment.
Review Summary
Clean redesign of the Hypersense landing page with proper component abstraction and consistent styling patterns.
Changes Analysis
New FeatureBlock component:
- Well-structured sub-module with clear prop interface
- Consistent Tailwind class ordering
- Proper icon sizing (16px) and container constraints (h-8 w-8)
- Semantic HTML structure with proper text hierarchy
Layout improvements:
- Switched from
h-screentomin-h-screenwithoverflow-y-auto— better for varying content heights - Proper max-width constraints (
max-w-[933px],max-w-[877px]) matching Figma specs - Grid layout with responsive breakpoint (
md:grid-cols-2) - Removed
PageUtils.PageHeadingdependency in favor of direct composition
Typography:
- Consistent use of
text-fs-*scale classes - Proper font-weight pairing (semibold for titles, medium for descriptions)
- Color tokens following design system (
text-nd_gray-700,text-nd_gray-500, etc.)
Event tracking:
- Mixpanel event preserved:
cost_observability_explore - Additional redirect event:
cost_observability-redirect(existing)
Findings
None. The implementation follows established patterns and the PR description accurately reflects the changes.
Verification Checklist
- Component structure follows ReScript conventions
- Tailwind classes are valid and consistently ordered
- Icon names verified (
clock,file-icon,nd-piggy-bank,nd-analytics) - Mixpanel events properly instrumented
- Responsive layout with proper breakpoints
- No new dependencies introduced
- SVG asset updated and referenced correctly
10 tasks
| <Icon name=iconName size=16 /> | ||
| </div> | ||
| <div className="flex flex-col gap-0.5"> | ||
| <p className="text-fs-14 leading-5 font-semibold text-nd_gray-600"> |
| <p className="text-fs-14 leading-5 font-semibold text-nd_gray-600"> | ||
| {title->React.string} | ||
| </p> | ||
| <p className="text-fs-14 leading-5 font-medium text-nd_gray-400"> |
| <div className="mx-auto flex w-full max-w-[933px] flex-col items-center gap-16 px-4 py-12"> | ||
| <div className="flex w-full max-w-[877px] flex-col items-center gap-5"> | ||
| <object | ||
| className="h-[360px] w-auto object-contain" |
Collaborator
There was a problem hiding this comment.
add height config to tailwind
| {"Cost Observability"->React.string} | ||
| <div className="min-h-screen w-full overflow-y-auto bg-white"> | ||
| <div className="mx-auto flex w-full max-w-[933px] flex-col items-center gap-16 px-4 py-12"> | ||
| <div className="flex w-full max-w-[877px] flex-col items-center gap-5"> |
| className="border rounded-md text-nd_green-200 border-nd_green-200 font-semibold p-1.5 text-sm w-fit"> | ||
| {"Cost Observability"->React.string} | ||
| <div className="min-h-screen w-full overflow-y-auto bg-white"> | ||
| <div className="mx-auto flex w-full max-w-[933px] flex-col items-center gap-16 px-4 py-12"> |
| /> | ||
| <div className="flex w-full flex-col items-center gap-10"> | ||
| <div className="flex flex-col items-center gap-2.5 text-center"> | ||
| <p className="text-fs-24 font-semibold text-nd_gray-700"> |
| <p className="text-fs-24 font-semibold text-nd_gray-700"> | ||
| {"Gain Control & Optimize Payment Costs"->React.string} | ||
| </p> | ||
| <p className="text-fs-16 font-medium text-nd_gray-500"> |
| /> | ||
| </div> | ||
| </div> | ||
| <div className="grid w-full max-w-[877px] grid-cols-1 gap-10 px-7 md:grid-cols-2"> |
Comment on lines
+80
to
+89
| iconClass="bg-orange-50 text-orange-600" | ||
| title="Track Every Dollar" | ||
| description="Access a unified, drill-down view of your payment costs. Compare costs across Providers, payment methods, regions and uncover what's driving your spend" | ||
| /> | ||
| <FeatureBlock | ||
| iconName="file-icon" | ||
| iconClass="bg-purple-50 text-purple-600" | ||
| title="Audit Your Invoices" | ||
| description="Perform integrity check on your invoices seamlessly, verify your fee markups and contractual discounts with providers" | ||
| /> |
Contributor
There was a problem hiding this comment.
Please use new nd_ colors.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Type of Change
Description
Redesigns the Hypersense / Cost Observability landing screen (
HypersenseHome.res) to align with the latest Figma spec.DefaultHomeHypersenseCard.svg) and constrains the<object>to the design's intended aspect ratio (previously rendered at ~896×650 because the SVG was stretched tomax-w-4xl).PageUtils.PageHeadingfor the title block in favor of plain elements.PageHeadingwas overriding the custom spacing and applyingopacity-50to the subtitle, which is why the hierarchy looked off even with the right gap classes.text-fs-24 font-semibold text-nd_gray-700, subtitletext-fs-16 font-medium text-nd_gray-500.Large→Mediumto match the design.nd-piggy-bankfor Optimize Your Payment Fees (previousvertical_sliderwasn't in the sprite, so the slot was blank) andnd-analyticsfor Forecast Impact of Network Changes.Motivation and Context
The previous implementation didn't match the Figma — the hero illustration was oversized and dominated the viewport, two feature icons were missing/wrong, and spacing tokens passed to
PageHeadingwere being silently swallowed by the component's baked-inmb-6,mt-2, andopacity-50. This brings the screen back in line with the agreed design.How did you test it?
Manually on the local dev server against the Figma reference. Verified hero proportions, type sizes and colors, button size, feature tile icon rendering, and overall spacing rhythm.
Where to test it?
Backend Dependency
Backend PR URL:
Feature Flag
Feature flag name(s):
Checklist
npm run re:build