Improved the UI of the targetted section#239
Open
Shayan-Bhowmik wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThe HowItWorks component is refactored from static CSS-class-based layout to a theme-aware, interactive component. Steps are enriched with icons and rendered as styled article cards. The layout now includes responsive connector visuals (desktop arrows, mobile vertical line), and new CSS animations provide animated flow-line effects in both light and dark themes. ChangesHowItWorks Theme-Aware Interactive Enhancement
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
UI/UX redesign of the landing page “How It Works” section to better match the site’s visual style across light/dark themes (per #223), while keeping the existing 3-step content unchanged.
Changes:
- Rebuilt
HowItWorksinto a three-card layout with step indicators, lucide icons, hover effects, and responsive (desktop/mobile) connector visuals. - Added global CSS keyframes/classes for animated dashed connector lines, with light/dark variants.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/index.css |
Adds keyframes and utility classes for animated dashed connector lines used by the How It Works section. |
src/components/HowItWorks.tsx |
Updates the How It Works UI to a themed card-based layout with icons and animated flow connectors. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+25
to
+38
| .how-it-works-flow-line { | ||
| display: block; | ||
| height: 2px; | ||
| border-radius: 9999px; | ||
| background-image: repeating-linear-gradient( | ||
| 90deg, | ||
| rgba(96, 165, 250, 0.78) 0, | ||
| rgba(96, 165, 250, 0.78) 14px, | ||
| rgba(96, 165, 250, 0.08) 14px, | ||
| rgba(96, 165, 250, 0.08) 26px | ||
| ); | ||
| background-size: 28px 2px; | ||
| animation: how-it-works-dash-flow 10s linear infinite; | ||
| box-shadow: 0 0 18px rgba(59, 130, 246, 0.24); |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/components/HowItWorks.tsx (1)
41-43: ⚡ Quick winRespect reduced-motion preferences for animated/hovered UI.
Line 85 introduces motion on hover, and the flow-line class is animation-driven. Add reduced-motion fallbacks to avoid forced motion for users with
prefers-reduced-motion.Proposed fix
- className={`group relative rounded-3xl border p-8 text-center backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/30 hover:shadow-[0_24px_60px_rgba(46,89,255,0.18)] ${cardBorderClass} ${cardSurfaceClass} ${mode === 'dark' ? 'hover:bg-white/[0.06]' : 'hover:bg-white'}`} + className={`group relative rounded-3xl border p-8 text-center backdrop-blur-sm transition-all duration-300 motion-reduce:transition-none motion-reduce:transform-none hover:-translate-y-1 motion-reduce:hover:translate-y-0 hover:border-blue-400/30 hover:shadow-[0_24px_60px_rgba(46,89,255,0.18)] ${cardBorderClass} ${cardSurfaceClass} ${mode === 'dark' ? 'hover:bg-white/[0.06]' : 'hover:bg-white'}`}/* src/index.css */ `@media` (prefers-reduced-motion: reduce) { .how-it-works-flow-line, .how-it-works-flow-line.vertical { animation: none; } }Also applies to: 85-85
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/HowItWorks.tsx` around lines 41 - 43, The animated connector line and hover motion do not respect users' prefers-reduced-motion setting; update the stylesheet to add a `@media` (prefers-reduced-motion: reduce) rule that disables animations/transitions for the how-it-works flow classes (e.g., .how-it-works-flow-line and .how-it-works-flow-line.vertical) and any related hover transform/transition rules used by the connectorLineClass, so animation: none and transition/transform: none are applied under that media query.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/HowItWorks.tsx`:
- Around line 56-74: The decorative connector arrow wrappers are being announced
by screen readers; mark the two outer wrapper divs that contain the
ArrowRight/ArrowDown elements as presentational by adding accessibility
attributes (e.g., aria-hidden="true" and role="presentation") to the divs that
wrap the arrows (the divs with classes "pointer-events-none absolute left-0
right-0 top-28 hidden md:block" and "pointer-events-none absolute left-1/2
top-24 bottom-24 flex -translate-x-1/2 flex-col items-center justify-between
md:hidden") so the spans using connectorLineClass/connectorBubbleClass and the
ArrowRight/ArrowDown icons are ignored by assistive tech.
In `@src/index.css`:
- Around line 5-23: The keyframes how-it-works-dash-flow and
how-it-works-dash-flow-vertical currently move background-position by 72px which
doesn't align with the pattern repeat of 28px; update the "to" values to use a
multiple of 28px (recommended 56px) so the animation loops seamlessly (e.g.,
change background-position: 72px 0 to 56px 0 in how-it-works-dash-flow and 0
72px to 0 56px in how-it-works-dash-flow-vertical), keeping the rest of the
keyframe definitions unchanged.
- Around line 25-74: The animated repeating gradients (.how-it-works-flow-line
and .how-it-works-flow-line.vertical) use infinite animations
(how-it-works-dash-flow and how-it-works-dash-flow-vertical) which should be
disabled for users who set prefers-reduced-motion; add a media query `@media`
(prefers-reduced-motion: reduce) that targets .how-it-works-flow-line,
.how-it-works-flow-line.light, .how-it-works-flow-line.vertical and
.how-it-works-flow-line.vertical.light and set animation: none !important;
transition: none !important; and optionally reduce or remove strong visual
effects like box-shadow (e.g., box-shadow: none) to fully respect the user
preference while keeping the same selectors and keyframe names referenced.
---
Nitpick comments:
In `@src/components/HowItWorks.tsx`:
- Around line 41-43: The animated connector line and hover motion do not respect
users' prefers-reduced-motion setting; update the stylesheet to add a `@media`
(prefers-reduced-motion: reduce) rule that disables animations/transitions for
the how-it-works flow classes (e.g., .how-it-works-flow-line and
.how-it-works-flow-line.vertical) and any related hover transform/transition
rules used by the connectorLineClass, so animation: none and
transition/transform: none are applied under that media query.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: bce03872-0004-4cc1-81df-5f5616be7233
📒 Files selected for processing (2)
src/components/HowItWorks.tsxsrc/index.css
Comment on lines
+56
to
+74
| <div className="pointer-events-none absolute left-0 right-0 top-28 hidden md:block"> | ||
| <div className="relative mx-auto h-10 max-w-6xl"> | ||
| <span className={`${connectorLineClass} absolute left-16 right-16 top-1/2 -translate-y-1/2`} /> | ||
| <span className={`absolute left-1/3 top-1/2 -translate-x-1/2 -translate-y-1/2 ${connectorBubbleClass}`}> | ||
| <ArrowRight className="h-4 w-4" /> | ||
| </span> | ||
| <span className={`absolute left-2/3 top-1/2 -translate-x-1/2 -translate-y-1/2 ${connectorBubbleClass}`}> | ||
| <ArrowRight className="h-4 w-4" /> | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className="pointer-events-none absolute left-1/2 top-24 bottom-24 flex -translate-x-1/2 flex-col items-center justify-between md:hidden"> | ||
| <span className={connectorBubbleClass}> | ||
| <ArrowDown className="h-4 w-4" /> | ||
| </span> | ||
| <span className={connectorBubbleClass}> | ||
| <ArrowDown className="h-4 w-4" /> | ||
| </span> |
Contributor
There was a problem hiding this comment.
Hide decorative connector arrows from assistive technologies.
These connector arrows are purely visual. Mark their wrapper blocks as presentational so screen readers don’t announce extra non-content graphics.
Proposed fix
- <div className="pointer-events-none absolute left-0 right-0 top-28 hidden md:block">
+ <div aria-hidden="true" className="pointer-events-none absolute left-0 right-0 top-28 hidden md:block">
@@
- <div className="pointer-events-none absolute left-1/2 top-24 bottom-24 flex -translate-x-1/2 flex-col items-center justify-between md:hidden">
+ <div aria-hidden="true" className="pointer-events-none absolute left-1/2 top-24 bottom-24 flex -translate-x-1/2 flex-col items-center justify-between md:hidden">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div className="pointer-events-none absolute left-0 right-0 top-28 hidden md:block"> | |
| <div className="relative mx-auto h-10 max-w-6xl"> | |
| <span className={`${connectorLineClass} absolute left-16 right-16 top-1/2 -translate-y-1/2`} /> | |
| <span className={`absolute left-1/3 top-1/2 -translate-x-1/2 -translate-y-1/2 ${connectorBubbleClass}`}> | |
| <ArrowRight className="h-4 w-4" /> | |
| </span> | |
| <span className={`absolute left-2/3 top-1/2 -translate-x-1/2 -translate-y-1/2 ${connectorBubbleClass}`}> | |
| <ArrowRight className="h-4 w-4" /> | |
| </span> | |
| </div> | |
| ))} | |
| </div> | |
| <div className="pointer-events-none absolute left-1/2 top-24 bottom-24 flex -translate-x-1/2 flex-col items-center justify-between md:hidden"> | |
| <span className={connectorBubbleClass}> | |
| <ArrowDown className="h-4 w-4" /> | |
| </span> | |
| <span className={connectorBubbleClass}> | |
| <ArrowDown className="h-4 w-4" /> | |
| </span> | |
| <div aria-hidden="true" className="pointer-events-none absolute left-0 right-0 top-28 hidden md:block"> | |
| <div className="relative mx-auto h-10 max-w-6xl"> | |
| <span className={`${connectorLineClass} absolute left-16 right-16 top-1/2 -translate-y-1/2`} /> | |
| <span className={`absolute left-1/3 top-1/2 -translate-x-1/2 -translate-y-1/2 ${connectorBubbleClass}`}> | |
| <ArrowRight className="h-4 w-4" /> | |
| </span> | |
| <span className={`absolute left-2/3 top-1/2 -translate-x-1/2 -translate-y-1/2 ${connectorBubbleClass}`}> | |
| <ArrowRight className="h-4 w-4" /> | |
| </span> | |
| </div> | |
| </div> | |
| <div aria-hidden="true" className="pointer-events-none absolute left-1/2 top-24 bottom-24 flex -translate-x-1/2 flex-col items-center justify-between md:hidden"> | |
| <span className={connectorBubbleClass}> | |
| <ArrowDown className="h-4 w-4" /> | |
| </span> | |
| <span className={connectorBubbleClass}> | |
| <ArrowDown className="h-4 w-4" /> | |
| </span> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/HowItWorks.tsx` around lines 56 - 74, The decorative connector
arrow wrappers are being announced by screen readers; mark the two outer wrapper
divs that contain the ArrowRight/ArrowDown elements as presentational by adding
accessibility attributes (e.g., aria-hidden="true" and role="presentation") to
the divs that wrap the arrows (the divs with classes "pointer-events-none
absolute left-0 right-0 top-28 hidden md:block" and "pointer-events-none
absolute left-1/2 top-24 bottom-24 flex -translate-x-1/2 flex-col items-center
justify-between md:hidden") so the spans using
connectorLineClass/connectorBubbleClass and the ArrowRight/ArrowDown icons are
ignored by assistive tech.
Comment on lines
+5
to
+23
| @keyframes how-it-works-dash-flow { | ||
| from { | ||
| background-position: 0 0; | ||
| } | ||
|
|
||
| to { | ||
| background-position: 72px 0; | ||
| } | ||
| } | ||
|
|
||
| @keyframes how-it-works-dash-flow-vertical { | ||
| from { | ||
| background-position: 0 0; | ||
| } | ||
|
|
||
| to { | ||
| background-position: 0 72px; | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
Fix animation distance to ensure seamless looping.
The animation moves background-position by 72px, but the pattern repeats every 28px (from background-size). Since 72 ÷ 28 = 2.57, the pattern won't align when the animation loops, causing a visible jump.
For seamless animation, use a multiple of 28px:
- 56px (2 full patterns) – recommended
- 84px (3 full patterns) – alternative if slower flow is preferred
🔄 Proposed fix for seamless looping
`@keyframes` how-it-works-dash-flow {
from {
background-position: 0 0;
}
to {
- background-position: 72px 0;
+ background-position: 56px 0;
}
}
`@keyframes` how-it-works-dash-flow-vertical {
from {
background-position: 0 0;
}
to {
- background-position: 0 72px;
+ background-position: 0 56px;
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| @keyframes how-it-works-dash-flow { | |
| from { | |
| background-position: 0 0; | |
| } | |
| to { | |
| background-position: 72px 0; | |
| } | |
| } | |
| @keyframes how-it-works-dash-flow-vertical { | |
| from { | |
| background-position: 0 0; | |
| } | |
| to { | |
| background-position: 0 72px; | |
| } | |
| } | |
| `@keyframes` how-it-works-dash-flow { | |
| from { | |
| background-position: 0 0; | |
| } | |
| to { | |
| background-position: 56px 0; | |
| } | |
| } | |
| `@keyframes` how-it-works-dash-flow-vertical { | |
| from { | |
| background-position: 0 0; | |
| } | |
| to { | |
| background-position: 0 56px; | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/index.css` around lines 5 - 23, The keyframes how-it-works-dash-flow and
how-it-works-dash-flow-vertical currently move background-position by 72px which
doesn't align with the pattern repeat of 28px; update the "to" values to use a
multiple of 28px (recommended 56px) so the animation loops seamlessly (e.g.,
change background-position: 72px 0 to 56px 0 in how-it-works-dash-flow and 0
72px to 0 56px in how-it-works-dash-flow-vertical), keeping the rest of the
keyframe definitions unchanged.
Comment on lines
+25
to
+74
| .how-it-works-flow-line { | ||
| display: block; | ||
| height: 2px; | ||
| border-radius: 9999px; | ||
| background-image: repeating-linear-gradient( | ||
| 90deg, | ||
| rgba(96, 165, 250, 0.78) 0, | ||
| rgba(96, 165, 250, 0.78) 14px, | ||
| rgba(96, 165, 250, 0.08) 14px, | ||
| rgba(96, 165, 250, 0.08) 26px | ||
| ); | ||
| background-size: 28px 2px; | ||
| animation: how-it-works-dash-flow 10s linear infinite; | ||
| box-shadow: 0 0 18px rgba(59, 130, 246, 0.24); | ||
| } | ||
|
|
||
| .how-it-works-flow-line.light { | ||
| background-image: repeating-linear-gradient( | ||
| 90deg, | ||
| rgba(59, 130, 246, 0.6) 0, | ||
| rgba(59, 130, 246, 0.6) 12px, | ||
| rgba(59, 130, 246, 0.12) 12px, | ||
| rgba(59, 130, 246, 0.12) 24px | ||
| ); | ||
| box-shadow: 0 0 14px rgba(59, 130, 246, 0.14); | ||
| } | ||
|
|
||
| .how-it-works-flow-line.vertical { | ||
| width: 2px; | ||
| height: 100%; | ||
| background-image: repeating-linear-gradient( | ||
| 180deg, | ||
| rgba(96, 165, 250, 0.78) 0, | ||
| rgba(96, 165, 250, 0.78) 14px, | ||
| rgba(96, 165, 250, 0.08) 14px, | ||
| rgba(96, 165, 250, 0.08) 26px | ||
| ); | ||
| background-size: 2px 28px; | ||
| animation: how-it-works-dash-flow-vertical 10s linear infinite; | ||
| } | ||
|
|
||
| .how-it-works-flow-line.vertical.light { | ||
| background-image: repeating-linear-gradient( | ||
| 180deg, | ||
| rgba(59, 130, 246, 0.6) 0, | ||
| rgba(59, 130, 246, 0.6) 12px, | ||
| rgba(59, 130, 246, 0.12) 12px, | ||
| rgba(59, 130, 246, 0.12) 24px | ||
| ); | ||
| } |
Contributor
There was a problem hiding this comment.
Add prefers-reduced-motion support for accessibility.
The infinite animations can cause discomfort for users with vestibular disorders or motion sensitivity. Respect the user's motion preference setting to comply with WCAG accessibility guidelines.
♿ Proposed fix to disable animations for users who prefer reduced motion
+@media (prefers-reduced-motion: reduce) {
+ .how-it-works-flow-line {
+ animation: none;
+ }
+}
+
.how-it-works-flow-line {
display: block;
height: 2px;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .how-it-works-flow-line { | |
| display: block; | |
| height: 2px; | |
| border-radius: 9999px; | |
| background-image: repeating-linear-gradient( | |
| 90deg, | |
| rgba(96, 165, 250, 0.78) 0, | |
| rgba(96, 165, 250, 0.78) 14px, | |
| rgba(96, 165, 250, 0.08) 14px, | |
| rgba(96, 165, 250, 0.08) 26px | |
| ); | |
| background-size: 28px 2px; | |
| animation: how-it-works-dash-flow 10s linear infinite; | |
| box-shadow: 0 0 18px rgba(59, 130, 246, 0.24); | |
| } | |
| .how-it-works-flow-line.light { | |
| background-image: repeating-linear-gradient( | |
| 90deg, | |
| rgba(59, 130, 246, 0.6) 0, | |
| rgba(59, 130, 246, 0.6) 12px, | |
| rgba(59, 130, 246, 0.12) 12px, | |
| rgba(59, 130, 246, 0.12) 24px | |
| ); | |
| box-shadow: 0 0 14px rgba(59, 130, 246, 0.14); | |
| } | |
| .how-it-works-flow-line.vertical { | |
| width: 2px; | |
| height: 100%; | |
| background-image: repeating-linear-gradient( | |
| 180deg, | |
| rgba(96, 165, 250, 0.78) 0, | |
| rgba(96, 165, 250, 0.78) 14px, | |
| rgba(96, 165, 250, 0.08) 14px, | |
| rgba(96, 165, 250, 0.08) 26px | |
| ); | |
| background-size: 2px 28px; | |
| animation: how-it-works-dash-flow-vertical 10s linear infinite; | |
| } | |
| .how-it-works-flow-line.vertical.light { | |
| background-image: repeating-linear-gradient( | |
| 180deg, | |
| rgba(59, 130, 246, 0.6) 0, | |
| rgba(59, 130, 246, 0.6) 12px, | |
| rgba(59, 130, 246, 0.12) 12px, | |
| rgba(59, 130, 246, 0.12) 24px | |
| ); | |
| } | |
| `@media` (prefers-reduced-motion: reduce) { | |
| .how-it-works-flow-line, | |
| .how-it-works-flow-line.vertical { | |
| animation: none; | |
| } | |
| } | |
| .how-it-works-flow-line { | |
| display: block; | |
| height: 2px; | |
| border-radius: 9999px; | |
| background-image: repeating-linear-gradient( | |
| 90deg, | |
| rgba(96, 165, 250, 0.78) 0, | |
| rgba(96, 165, 250, 0.78) 14px, | |
| rgba(96, 165, 250, 0.08) 14px, | |
| rgba(96, 165, 250, 0.08) 26px | |
| ); | |
| background-size: 28px 2px; | |
| animation: how-it-works-dash-flow 10s linear infinite; | |
| box-shadow: 0 0 18px rgba(59, 130, 246, 0.24); | |
| } | |
| .how-it-works-flow-line.light { | |
| background-image: repeating-linear-gradient( | |
| 90deg, | |
| rgba(59, 130, 246, 0.6) 0, | |
| rgba(59, 130, 246, 0.6) 12px, | |
| rgba(59, 130, 246, 0.12) 12px, | |
| rgba(59, 130, 246, 0.12) 24px | |
| ); | |
| box-shadow: 0 0 14px rgba(59, 130, 246, 0.14); | |
| } | |
| .how-it-works-flow-line.vertical { | |
| width: 2px; | |
| height: 100%; | |
| background-image: repeating-linear-gradient( | |
| 180deg, | |
| rgba(96, 165, 250, 0.78) 0, | |
| rgba(96, 165, 250, 0.78) 14px, | |
| rgba(96, 165, 250, 0.08) 14px, | |
| rgba(96, 165, 250, 0.08) 26px | |
| ); | |
| background-size: 2px 28px; | |
| animation: how-it-works-dash-flow-vertical 10s linear infinite; | |
| } | |
| .how-it-works-flow-line.vertical.light { | |
| background-image: repeating-linear-gradient( | |
| 180deg, | |
| rgba(59, 130, 246, 0.6) 0, | |
| rgba(59, 130, 246, 0.6) 12px, | |
| rgba(59, 130, 246, 0.12) 12px, | |
| rgba(59, 130, 246, 0.12) 24px | |
| ); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/index.css` around lines 25 - 74, The animated repeating gradients
(.how-it-works-flow-line and .how-it-works-flow-line.vertical) use infinite
animations (how-it-works-dash-flow and how-it-works-dash-flow-vertical) which
should be disabled for users who set prefers-reduced-motion; add a media query
`@media` (prefers-reduced-motion: reduce) that targets .how-it-works-flow-line,
.how-it-works-flow-line.light, .how-it-works-flow-line.vertical and
.how-it-works-flow-line.vertical.light and set animation: none !important;
transition: none !important; and optionally reduce or remove strong visual
effects like box-shadow (e.g., box-shadow: none) to fully respect the user
preference while keeping the same selectors and keyframe names referenced.
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
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.
Related Issue
Description
UI/UX improvements to the "How It Works" section based on screenshot feedback and theme compatibility review. The section was redesigned with a cleaner three-card layout, improved spacing, animated flow connectors, and theme-aware styling so it blends properly in both light and dark modes without changing any content or behavior.
Changes Made
Updated
HowItWorks.tsxto improve the section layout and visual hierarchy:Kept the same 3-step content:
Replaced the plain numbered circles with larger, stylized step indicators featuring a soft blue glow.
Added small relevant icons for each step using
lucide-react.Wrapped each step inside a polished card with:
Added animated dashed flow connectors between steps to visually show progression.
Improved spacing and alignment throughout the section for a cleaner visual flow.
Made the section theme-aware so the light theme blends naturally with the rest of the site instead of appearing overly dark.
Kept all copy, routing, and application behavior unchanged.
Dependencies
How Has This Been Tested?
1. Development Setup
Open the app in the browser (usually
http://localhost:3000).2. Desktop Verification
Verified that:
3. Mobile Verification
Using browser DevTools responsive mode and mobile testing:
4. Production Build Verification
Verified that the production build completes successfully without warnings or errors.
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit
New Features
Style