Removed the UI Inconsistencies in Testimonials and FAQs Pages#1290
Removed the UI Inconsistencies in Testimonials and FAQs Pages#1290iaadillatif wants to merge 4 commits intorecodehive:mainfrom
Conversation
|
@iaadillatif is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
|
✅ Synchronized metadata from Issue #1287:
|
There was a problem hiding this comment.
Pull request overview
This PR addresses UI/UX inconsistencies on the Testimonials and FAQs pages by refining avatar rendering and restructuring/styling the FAQ accordion cards while keeping the existing interaction/animation behavior.
Changes:
- Updated testimonial avatar presentation so images fill the circular container with improved visual treatment.
- Refactored FAQ accordion items so question + answer render within a single consistent card container and added clearer open/closed header styling.
- Adjusted large-screen FAQ layout constraints (max widths/padding) and centered header text.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/components/testimonials/TestimonialCard.tsx |
Updates avatar sizing/fill behavior and adds improved decorative styling for consistent testimonial card visuals. |
src/components/faqs/faqs.tsx |
Reworks FAQ accordion structure into unified cards, refines header/expanded styling, and improves large-screen layout constraints. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <motion.div | ||
| key={index} | ||
| className="accordion mb-4 h-fit break-inside-avoid overflow-hidden rounded-xl border pb-0 shadow-sm transition-all duration-300 dark:border-gray-700" |
There was a problem hiding this comment.
The outer accordion container now has overflow-hidden, but the header button uses an outer focus-visible:ring-* + ring-offset-*. This can cause the focus indicator to be clipped at the card edges for keyboard users. Consider moving overflow-hidden to a lower wrapper (only around the collapsing content) or switching the button to an inset focus style (e.g., inset ring / no ring-offset) so the focus indicator remains fully visible.
| className="accordion mb-4 h-fit break-inside-avoid overflow-hidden rounded-xl border pb-0 shadow-sm transition-all duration-300 dark:border-gray-700" | |
| className="accordion mb-4 h-fit break-inside-avoid rounded-xl border pb-0 shadow-sm transition-all duration-300 dark:border-gray-700" |
| > | ||
| <div | ||
| className={`border-t px-4 pb-4 pt-3 text-base transition-colors duration-200 ${ | ||
| isDark ? "text-gray-300" : "text-gray-900" | ||
| }`} | ||
| style={{ | ||
| borderColor: isDark | ||
| ? "rgba(139, 92, 246, 0.22)" | ||
| : "rgba(139, 92, 246, 0.24)", | ||
| color: isDark ? "#d1d5db" : "#111827", | ||
| }} | ||
| dangerouslySetInnerHTML={{ | ||
| __html: faq.answer | ||
| .replace( | ||
| /<strong>/g, | ||
| `<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`, | ||
| ) | ||
| .replace( | ||
| /<a /g, | ||
| `<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `, | ||
| ), | ||
| }} | ||
| /> |
There was a problem hiding this comment.
When the accordion is collapsed, the answer panel is still present in the DOM (height/opacity animated) and can contain focusable elements (e.g., the links in faq.answer). Those links can remain reachable via keyboard tab even when the panel is visually collapsed. To avoid hidden-focus traps, consider disabling focus when collapsed (e.g., hidden/conditional rendering with AnimatePresence, or applying inert/aria-hidden plus a focus management approach).
| > | |
| <div | |
| className={`border-t px-4 pb-4 pt-3 text-base transition-colors duration-200 ${ | |
| isDark ? "text-gray-300" : "text-gray-900" | |
| }`} | |
| style={{ | |
| borderColor: isDark | |
| ? "rgba(139, 92, 246, 0.22)" | |
| : "rgba(139, 92, 246, 0.24)", | |
| color: isDark ? "#d1d5db" : "#111827", | |
| }} | |
| dangerouslySetInnerHTML={{ | |
| __html: faq.answer | |
| .replace( | |
| /<strong>/g, | |
| `<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`, | |
| ) | |
| .replace( | |
| /<a /g, | |
| `<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `, | |
| ), | |
| }} | |
| /> | |
| aria-hidden={!isExpanded} | |
| > | |
| {isExpanded && ( | |
| <div | |
| className={`border-t px-4 pb-4 pt-3 text-base transition-colors duration-200 ${ | |
| isDark ? "text-gray-300" : "text-gray-900" | |
| }`} | |
| style={{ | |
| borderColor: isDark | |
| ? "rgba(139, 92, 246, 0.22)" | |
| : "rgba(139, 92, 246, 0.24)", | |
| color: isDark ? "#d1d5db" : "#111827", | |
| }} | |
| dangerouslySetInnerHTML={{ | |
| __html: faq.answer | |
| .replace( | |
| /<strong>/g, | |
| `<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`, | |
| ) | |
| .replace( | |
| /<a /g, | |
| `<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `, | |
| ), | |
| }} | |
| /> | |
| )} |
This PR resolves the visual and structural inconsistencies identified in the Testimonials and FAQs pages.
The goal was to improve layout alignment, visual hierarchy, and container consistency while keeping all existing animation logic and functionality unchanged.
Fixes #1287
Type of Change
Changes Made
1. Testimonials Page
AvatarImagestyling to properly fill the circular container.Preview
Below is a visual reference of the updated Testimonials avatar rendering.
2. FAQs Page Structural Fix
3. FAQs Header Refinement
4. Large Screen Layout Improvements
lg:max-w-6xlandxl:max-w-7xl.Preview
Below is a visual reference of the updated FAQs layout after resolving the alignment and structural inconsistencies. This reflects the improved avatar rendering and refined large screen spacing.
Dependencies
Checklist
npm run buildand attached screenshot(s) in this PR.