Revamp “What We Do” Section with Interactive Expandable Cards#605
Open
rijulmenon wants to merge 1 commit into
Open
Revamp “What We Do” Section with Interactive Expandable Cards#605rijulmenon wants to merge 1 commit into
rijulmenon wants to merge 1 commit into
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThe About page's "What We Do" feature section evolves from a static hover-responsive grid into an interactive, click-driven experience. Feature data now includes nested detail objects. Clicking a card toggles its expanded state and reveals animated details with descriptions and bullet items below the grid. Only one feature expands at a time, and the component supports keyboard navigation. ChangesInteractive Feature Cards on About Page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @rijulmenon for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![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: 2
🤖 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/pages/About/About.tsx`:
- Around line 116-144: Replace the non-semantic motion.div used for each feature
card with a native button element (e.g., motion.button type="button") so browser
provides correct keyboard behavior; keep attributes like
id={`feature-card-${idx}`}, aria-expanded, aria-controls, onClick={() =>
handleCardClick(idx)}, className, and all Framer Motion props (initial,
whileInView, transition, whileHover) but remove role="button", tabIndex={0}, and
the custom onKeyDown handler (Enter/Space handling) since a native button
handles those natively; ensure the element still uses handleCardClick and
retains the same styling and motion props.
- Around line 51-65: The state updater in handleCardClick currently performs
side effects (setTimeout and detailRef.current.scrollIntoView) inside the
functional updater passed to setActiveIdx; move the timing/scroll logic out of
the updater and make the updater purely return the new index. Specifically: keep
handleCardClick only computing and calling setActiveIdx(prev => prev === idx ?
null : idx) and remove the setTimeout/scrollIntoView from it, then add a
useEffect that watches activeIdx and, when activeIdx is non-null, runs the
setTimeout and scrollIntoView against detailRef.current (and clears the timeout
on cleanup) so the side effect is scheduled idempotently outside the state
updater.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
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
1 participant
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.
Description
Enhanced the About page’s “What We Do” section by improving hover responsiveness and introducing fully interactive expandable feature cards for a more modern and engaging user experience.
Changes Implemented
Additional Improvements
Result
The section now behaves as a polished interactive feature showcase with smoother animations, better usability, improved accessibility, and responsive expandable content.
closes #604
Summary by CodeRabbit