Fix landing UI #177
Fix landing UI #177
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughVisual and UI updates across the landing page: FAQ background and accordion visuals refactored with layered images/gradients, hero badge redesigned with SVG decorations, navbar switched to use a SecondaryButton and Link-wrapped logo, brand count shadows removed, and a new SecondaryButton component added. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ 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 |
|
|
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
apps/web/src/components/ui/accordion.tsx (2)
31-31: Optional: Remove extra space in className.There's an extra space between
"items-center"and"justify-between"in the className string.Apply this diff:
- "flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180", + "flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
37-37: Optional: Remove trailing space in className.There's a trailing space after
"duration-200"in the className string.Apply this diff:
- <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 " /> + <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />apps/web/src/components/ui/custom-button.tsx (1)
23-37: Extract duplicated transition configuration.The
transitionobject is defined identically in bothPrimaryButton(lines 8-11) andSecondaryButton. Extract this to a shared constant to reduce code duplication.Apply this diff:
+const BUTTON_TRANSITION = { + duration: 0.1, + ease: "easeInOut", +} as const + const PrimaryButton = ({ children, animate = true, classname, onClick }: { children: React.ReactNode, animate?: boolean, classname?: string, onClick?: () => void }) => { - const transition = { - duration: 0.1, - ease: "easeInOut", - } return ( <motion.button onClick={onClick} className={cn("flex gap-2 border-x border-t-2 border-[#6348fc] items-center justify-center bg-gradient-to-b from-[#5728f4] to-[#5100FF] px-5 py-3 rounded-[16px] relative [box-shadow:0px_-2px_0px_-0px_#2c04b1_inset] hover:opacity-90 transition-opacity duration-100 text-white font-medium", classname)} - transition={animate ? transition : undefined} + transition={animate ? BUTTON_TRANSITION : undefined} > {children} </motion.button> ) } export const SecondaryButton = ({ children, animate = true, classname, onClick }: { children: React.ReactNode, animate?: boolean, classname?: string, onClick?: () => void }) => { - const transition = { - duration: 0.1, - ease: "easeInOut", - } return ( <motion.button onClick={onClick} className={cn("flex gap-2 border-[#eaeaea] items-center justify-center px-5 py-3 rounded-[16px] relative [box-shadow:0px_0px_13px_0px_#eaeaea90_inset] hover:[box-shadow:0px_0px_13px_0px_#eaeaeaaa_inset] transition-all duration-100 text-white font-medium", classname)} - transition={animate ? transition : undefined} + transition={animate ? BUTTON_TRANSITION : undefined} > {children} </motion.button> ) }apps/web/src/components/landing-sections/navbar.tsx (1)
97-107: Remove unnecessary empty className.Line 101 has an empty
className=""attribute that serves no purpose and can be removed.Apply this diff:
<Link href="https://github.com/apsinghdev/opensox" target="_blank" rel="noopener noreferrer" - className="" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/web/src/components/faq/FaqSection.tsx(3 hunks)apps/web/src/components/landing-sections/Brands.tsx(0 hunks)apps/web/src/components/landing-sections/Hero.tsx(2 hunks)apps/web/src/components/landing-sections/navbar.tsx(4 hunks)apps/web/src/components/ui/accordion.tsx(1 hunks)apps/web/src/components/ui/custom-button.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/web/src/components/landing-sections/Brands.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
apps/web/src/components/faq/FaqSection.tsx (4)
apps/web/src/components/faq/faqData.ts (1)
faqs(6-42)apps/web/src/components/ui/features.tsx (3)
props(64-75)props(21-32)props(42-55)apps/web/src/components/ui/overlay.tsx (1)
div(3-10)apps/web/src/components/landing-sections/Bento.tsx (1)
div(42-150)
apps/web/src/components/ui/custom-button.tsx (1)
apps/web/src/lib/utils.ts (1)
cn(4-6)
apps/web/src/components/landing-sections/navbar.tsx (1)
apps/web/src/components/ui/custom-button.tsx (1)
SecondaryButton(23-37)
🔇 Additional comments (5)
apps/web/src/components/landing-sections/Hero.tsx (1)
24-40: LGTM: Badge design enhanced with gradient and decorative elements.The badge redesign with gradient borders and decorative SVG elements creates a more polished visual appearance. The structure is clean and the layout is well-organized.
apps/web/src/components/faq/FaqSection.tsx (2)
42-51: LGTM: Background layers create depth and visual interest.The layered background approach with the masked image and gradient overlays creates a polished visual effect that draws attention to the FAQ content.
55-119: LGTM: Accordion styling and layering well-structured.The z-index adjustments and rounded styling create proper visual hierarchy. The trigger (z-30) and content (z-50) are correctly layered above the decorative SVG (z-0).
apps/web/src/components/landing-sections/navbar.tsx (2)
67-77: LGTM: Logo now navigable to home.Wrapping the logo area in a Link component provides intuitive navigation back to the home page, which is a standard UX pattern.
103-106: LGTM: SecondaryButton integrated correctly.The new
SecondaryButtoncomponent is used appropriately for the secondary action (Contribute link), with clear icon and label.
| <svg width="894" height="126" viewBox="0 0 894 126" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute top-0 left-0 z-0 pointer-events-none opacity-30"> | ||
| <g clip-path="url(#clip0_288_24)"> | ||
| <g filter="url(#filter0_n_288_24)"> | ||
| <g filter="url(#filter1_f_288_24)"> | ||
| <ellipse cx="570.829" cy="-239.222" rx="814.829" ry="819.778" fill="#A556FB" /> | ||
| </g> | ||
| <g filter="url(#filter2_f_288_24)"> | ||
| <ellipse cx="571.517" cy="-239.221" rx="685.036" ry="689.298" fill="#4922E5" /> | ||
| </g> | ||
| <g filter="url(#filter3_f_288_24)"> | ||
| <ellipse cx="386" cy="-239" rx="585" ry="585.5" fill="#101010" /> | ||
| </g> | ||
| </g> | ||
| </g> | ||
| <defs> | ||
| <filter id="filter0_n_288_24" x="-244" y="-1059" width="1629.66" height="1639.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> | ||
| <feFlood flood-opacity="0" result="BackgroundImageFix" /> | ||
| <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> | ||
| <feTurbulence type="fractalNoise" baseFrequency="0.1428571492433548 0.1428571492433548" stitchTiles="stitch" numOctaves="3" result="noise" seed="3305" /> | ||
| <feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" /> | ||
| <feComponentTransfer in="alphaNoise" result="coloredNoise1"> | ||
| <feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 " /> | ||
| </feComponentTransfer> | ||
| <feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" /> | ||
| <feFlood flood-color="rgba(0, 0, 0, 0.12)" result="color1Flood" /> | ||
| <feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" /> | ||
| <feMerge result="effect1_noise_288_24"> | ||
| <feMergeNode in="shape" /> | ||
| <feMergeNode in="color1" /> | ||
| </feMerge> | ||
| </filter> | ||
| <filter id="filter1_f_288_24" x="-324" y="-1139" width="1789.66" height="1799.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> | ||
| <feFlood flood-opacity="0" result="BackgroundImageFix" /> | ||
| <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> | ||
| <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_288_24" /> | ||
| </filter> | ||
| <filter id="filter2_f_288_24" x="-273.518" y="-1088.52" width="1690.07" height="1698.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> | ||
| <feFlood flood-opacity="0" result="BackgroundImageFix" /> | ||
| <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> | ||
| <feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_288_24" /> | ||
| </filter> | ||
| <filter id="filter3_f_288_24" x="-399" y="-1024.5" width="1570" height="1571" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> | ||
| <feFlood flood-opacity="0" result="BackgroundImageFix" /> | ||
| <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> | ||
| <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_288_24" /> | ||
| </filter> | ||
| <clipPath id="clip0_288_24"> | ||
| <rect width="1512" height="864" fill="white" transform="translate(-337 -467)" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> |
There was a problem hiding this comment.
Fix SVG attribute naming and consider extracting to component.
This inline SVG has two issues:
-
Major: SVG attributes must be camelCase in React JSX (e.g.,
clip-path→clipPath,color-interpolation-filters→colorInterpolationFilters,flood-opacity→floodOpacity,flood-color→floodColor, etc.) -
Recommended refactor: The 51-line SVG could be extracted to a separate component for reusability and maintainability, similar to the
SvgLinescomponent in Hero.tsx.
For issue #1, convert all hyphenated SVG attributes to camelCase. Here are the key conversions needed:
clip-path→clipPathcolor-interpolation-filters→colorInterpolationFiltersflood-opacity→floodOpacityflood-color→floodColor
For issue #2, consider extracting to a component:
const FaqDecorativeSvg = ({ className }: { className?: string }) => {
return (
<svg width="894" height="126" viewBox="0 0 894 126" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
{/* SVG content with corrected camelCase attributes */}
</svg>
)
}Then use it as:
<FaqDecorativeSvg className="absolute top-0 left-0 z-0 pointer-events-none opacity-30" />🤖 Prompt for AI Agents
In apps/web/src/components/faq/FaqSection.tsx around lines 60-110, the inline
SVG uses hyphenated SVG attributes that break in React JSX (e.g., clip-path,
color-interpolation-filters, flood-opacity, flood-color and others); update all
hyphenated SVG attribute names to their camelCase React equivalents (clipPath,
colorInterpolationFilters, floodOpacity, floodColor, etc.) throughout the <svg>
and <defs>, and then extract the full corrected SVG into a new reusable
component (e.g., FaqDecorativeSvg.tsx) that accepts a className prop; replace
the inline SVG with an imported <FaqDecorativeSvg className="absolute top-0
left-0 z-0 pointer-events-none opacity-30" /> and export/import it in
FaqSection.tsx.
| const SvgLines = ({ ...props }) => { | ||
| return ( | ||
| <svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > | ||
| <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" /> | ||
| <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" stroke-width="0.733333" /> | ||
| <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" stroke-width="0.733333" /> | ||
| <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" stroke-width="0.733333" /> | ||
| <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" stroke-width="0.733333" /> | ||
| <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" stroke-width="0.733333" /> | ||
| <defs> | ||
| <linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse"> | ||
| <stop stop-color="#8D49E2" /> | ||
| <stop offset="1" stop-color="#411FC6" /> | ||
| </linearGradient> | ||
| <linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse"> | ||
| <stop stop-color="#411FC6" /> | ||
| <stop offset="1" stop-color="#8D49E2" /> | ||
| </linearGradient> | ||
| <linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse"> | ||
| <stop stop-color="#411FC6" /> | ||
| <stop offset="1" stop-color="#8D49E2" /> | ||
| </linearGradient> | ||
| <linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse"> | ||
| <stop stop-color="#411FC6" /> | ||
| <stop offset="1" stop-color="#8D49E2" /> | ||
| </linearGradient> | ||
| <linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse"> | ||
| <stop stop-color="#8D49E2" /> | ||
| <stop offset="0.5" stop-color="#411FC6" /> | ||
| <stop offset="1" stop-color="#6734D4" /> | ||
| </linearGradient> | ||
| <linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse"> | ||
| <stop stop-color="#8D49E2" /> | ||
| <stop offset="1" stop-color="#411FC6" /> | ||
| </linearGradient> | ||
| </defs> | ||
| </svg> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Fix SVG attribute naming to use camelCase.
React JSX requires SVG attributes to be written in camelCase. The hyphenated attributes stroke-width and clip-path will cause React warnings in development and may not work as expected.
Apply this diff to fix the SVG attributes:
const SvgLines = ({ ...props }) => {
return (
<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} >
- <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" />
- <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" stroke-width="0.733333" />
- <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" stroke-width="0.733333" />
- <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" stroke-width="0.733333" />
- <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" stroke-width="0.733333" />
- <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" stroke-width="0.733333" />
+ <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" strokeWidth="0.733333" />
+ <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" strokeWidth="0.733333" />
+ <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" strokeWidth="0.733333" />
+ <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" strokeWidth="0.733333" />
+ <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" strokeWidth="0.733333" />
+ <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" strokeWidth="0.733333" />
<defs>
<linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse">
- <stop stop-color="#8D49E2" />
- <stop offset="1" stop-color="#411FC6" />
+ <stop stopColor="#8D49E2" />
+ <stop offset="1" stopColor="#411FC6" />
</linearGradient>
<linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse">
- <stop stop-color="#411FC6" />
- <stop offset="1" stop-color="#8D49E2" />
+ <stop stopColor="#411FC6" />
+ <stop offset="1" stopColor="#8D49E2" />
</linearGradient>
<linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse">
- <stop stop-color="#411FC6" />
- <stop offset="1" stop-color="#8D49E2" />
+ <stop stopColor="#411FC6" />
+ <stop offset="1" stopColor="#8D49E2" />
</linearGradient>
<linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse">
- <stop stop-color="#411FC6" />
- <stop offset="1" stop-color="#8D49E2" />
+ <stop stopColor="#411FC6" />
+ <stop offset="1" stopColor="#8D49E2" />
</linearGradient>
<linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse">
- <stop stop-color="#8D49E2" />
- <stop offset="0.5" stop-color="#411FC6" />
- <stop offset="1" stop-color="#6734D4" />
+ <stop stopColor="#8D49E2" />
+ <stop offset="0.5" stopColor="#411FC6" />
+ <stop offset="1" stopColor="#6734D4" />
</linearGradient>
<linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse">
- <stop stop-color="#8D49E2" />
- <stop offset="1" stop-color="#411FC6" />
+ <stop stopColor="#8D49E2" />
+ <stop offset="1" stopColor="#411FC6" />
</linearGradient>
</defs>
</svg>
)
}📝 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.
| const SvgLines = ({ ...props }) => { | |
| return ( | |
| <svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > | |
| <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" /> | |
| <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" stroke-width="0.733333" /> | |
| <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" stroke-width="0.733333" /> | |
| <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" stroke-width="0.733333" /> | |
| <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" stroke-width="0.733333" /> | |
| <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" stroke-width="0.733333" /> | |
| <defs> | |
| <linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#8D49E2" /> | |
| <stop offset="1" stop-color="#411FC6" /> | |
| </linearGradient> | |
| <linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#411FC6" /> | |
| <stop offset="1" stop-color="#8D49E2" /> | |
| </linearGradient> | |
| <linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#411FC6" /> | |
| <stop offset="1" stop-color="#8D49E2" /> | |
| </linearGradient> | |
| <linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#411FC6" /> | |
| <stop offset="1" stop-color="#8D49E2" /> | |
| </linearGradient> | |
| <linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#8D49E2" /> | |
| <stop offset="0.5" stop-color="#411FC6" /> | |
| <stop offset="1" stop-color="#6734D4" /> | |
| </linearGradient> | |
| <linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#8D49E2" /> | |
| <stop offset="1" stop-color="#411FC6" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| ) | |
| } | |
| const SvgLines = ({ ...props }) => { | |
| return ( | |
| <svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > | |
| <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" strokeWidth="0.733333" /> | |
| <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" strokeWidth="0.733333" /> | |
| <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" strokeWidth="0.733333" /> | |
| <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" strokeWidth="0.733333" /> | |
| <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" strokeWidth="0.733333" /> | |
| <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" strokeWidth="0.733333" /> | |
| <defs> | |
| <linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse"> | |
| <stop stopColor="#8D49E2" /> | |
| <stop offset="1" stopColor="#411FC6" /> | |
| </linearGradient> | |
| <linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse"> | |
| <stop stopColor="#411FC6" /> | |
| <stop offset="1" stopColor="#8D49E2" /> | |
| </linearGradient> | |
| <linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse"> | |
| <stop stopColor="#411FC6" /> | |
| <stop offset="1" stopColor="#8D49E2" /> | |
| </linearGradient> | |
| <linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse"> | |
| <stop stopColor="#411FC6" /> | |
| <stop offset="1" stopColor="#8D49E2" /> | |
| </linearGradient> | |
| <linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse"> | |
| <stop stopColor="#8D49E2" /> | |
| <stop offset="0.5" stopColor="#411FC6" /> | |
| <stop offset="1" stopColor="#6734D4" /> | |
| </linearGradient> | |
| <linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse"> | |
| <stop stopColor="#8D49E2" /> | |
| <stop offset="1" stopColor="#411FC6" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| ) | |
| } |
🤖 Prompt for AI Agents
In apps/web/src/components/landing-sections/Hero.tsx around lines 89 to 127, the
SVG uses hyphenated SVG attributes (e.g., stroke-width, stop-color, clip-path)
which must be converted to React JSX camelCase names; update all hyphenated
attributes in this SVG to their camelCase equivalents (strokeWidth, stopColor,
clipPath, etc.), ensure any other dashed attributes are converted, and keep the
rest of the element structure and props spread intact.
|
hey @zzzzshawn could you please fix the code rabbit reviews and also make it upstream |
apsinghdev
force-pushed
the
fix-landing-ui
branch
from
b83eedc to
d5378e4
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/src/components/faq/FaqSection.tsx (2)
19-26: Replace hardcoded hex values with design token classes.Lines 19, 20, and 22 use hardcoded
#252525directly in inline styles. As per coding guidelines, you must always reference colors from the design token system using Tailwind classes instead of hardcoded hex values.Based on coding guidelines, replace inline styles with Tailwind classes that reference the design system (e.g.,
border-surface-secondary,bg-pattern-fg, etc.). If#252525isn't in the design tokens, add it there first.
30-40: Replace hardcoded hex values with design token classes.Lines 33 and 35 use hardcoded
#252525. This violates the coding guideline that prohibits hardcoded hex values in components.As per coding guidelines, use Tailwind classes that reference the design token system instead of inline styles with hardcoded colors.
♻️ Duplicate comments (2)
apps/web/src/components/faq/FaqSection.tsx (1)
60-110: Fix SVG attribute naming - already flagged in previous review.This inline SVG uses hyphenated attributes (e.g.,
clip-path,color-interpolation-filters,flood-opacity,flood-color) that are invalid in React JSX and will cause runtime errors. Additionally, the SVG contains hardcoded hex values (#A556FB,#4922E5,#101010) that violate the coding guidelines.This issue was already identified in the previous review. Please refer to the earlier comment for the complete fix, which includes:
- Converting all hyphenated SVG attributes to camelCase (e.g.,
clipPath,colorInterpolationFilters,floodOpacity,floodColor)- Extracting the SVG to a separate reusable component
- Replacing hardcoded color values with design token references
apps/web/src/components/landing-sections/Hero.tsx (1)
116-154: fix svg attribute casing and type theSvgLinescomponentthis svg still uses hyphenated attribute names (
stroke-width,stop-color), which was already flagged in an earlier review; in jsx these should be camelCased (strokeWidth,stopColor) to match react’s svg prop naming and typings.also,
SvgLinesis currently untyped and destructures({ ...props }). typing the props asReact.SVGProps<SVGSVGElement>and passingpropsthrough directly will improve type safety and clarity.you can apply something along these lines:
-const SvgLines = ({ ...props }) => { - return ( - <svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > - <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" /> - <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" stroke-width="0.733333" /> - <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" stroke-width="0.733333" /> - <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" stroke-width="0.733333" /> - <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" stroke-width="0.733333" /> - <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" stroke-width="0.733333" /> - <defs> - <linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse"> - <stop stop-color="#8D49E2" /> - <stop offset="1" stop-color="#411FC6" /> - </linearGradient> - <linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse"> - <stop stop-color="#411FC6" /> - <stop offset="1" stop-color="#8D49E2" /> - </linearGradient> - <linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse"> - <stop stop-color="#411FC6" /> - <stop offset="1" stop-color="#8D49E2" /> - </linearGradient> - <linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse"> - <stop stop-color="#411FC6" /> - <stop offset="1" stop-color="#8D49E2" /> - </linearGradient> - <linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse"> - <stop stop-color="#8D49E2" /> - <stop offset="0.5" stop-color="#411FC6" /> - <stop offset="1" stop-color="#6734D4" /> - </linearGradient> - <linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse"> - <stop stop-color="#8D49E2" /> - <stop offset="1" stop-color="#411FC6" /> - </linearGradient> - </defs> - </svg> - ) -} +type SvgLinesProps = React.SVGProps<SVGSVGElement>; + +const SvgLines: React.FC<SvgLinesProps> = (props) => { + return ( + <svg + width="37" + height="22" + viewBox="0 0 37 22" + fill="none" + xmlns="http://www.w3.org/2000/svg" + {...props} + > + <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" strokeWidth="0.733333" /> + <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" strokeWidth="0.733333" /> + <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" strokeWidth="0.733333" /> + <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" strokeWidth="0.733333" /> + <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" strokeWidth="0.733333" /> + <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" strokeWidth="0.733333" /> + <defs> + <linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse"> + <stop stopColor="#8D49E2" /> + <stop offset="1" stopColor="#411FC6" /> + </linearGradient> + <linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse"> + <stop stopColor="#411FC6" /> + <stop offset="1" stopColor="#8D49E2" /> + </linearGradient> + <linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse"> + <stop stopColor="#411FC6" /> + <stop offset="1" stopColor="#8D49E2" /> + </linearGradient> + <linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse"> + <stop stopColor="#411FC6" /> + <stop offset="1" stopColor="#8D49E2" /> + </linearGradient> + <linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse"> + <stop stopColor="#8D49E2" /> + <stop offset="0.5" stopColor="#411FC6" /> + <stop offset="1" stopColor="#6734D4" /> + </linearGradient> + <linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse"> + <stop stopColor="#8D49E2" /> + <stop offset="1" stopColor="#411FC6" /> + </linearGradient> + </defs> + </svg> + ); +};(optionally, you can also later align the hex colors inside the gradients with your design-token palette, e.g. via css variables, but that’s secondary to fixing the jsx props and typing.)
in react 18+ jsx, what is the recommended casing for svg attributes such as `stroke-width` and `stop-color`? should these be written as `strokeWidth` and `stopColor` to satisfy @types/react?
🧹 Nitpick comments (3)
apps/web/src/components/ui/accordion.tsx (2)
31-31: Remove extra space for consistent formatting.There's a double space between "items-center" and "justify-between" in the className string.
Apply this diff to fix the formatting:
- "flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180", + "flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
37-37: Remove trailing space.There's a trailing space after "duration-200" in the className string.
Apply this diff:
- <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 " /> + <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />apps/web/src/components/faq/FaqSection.tsx (1)
42-48: Improve alt text for accessibility.The alt text "background" is too generic. Consider a more descriptive alternative like "decorative gradient mask background" or an empty string if purely decorative.
Based on learnings, proper alt text for images is required for accessibility.
Apply this diff:
- alt="background" + alt="decorative gradient mask background"Or use an empty string if the image is purely decorative:
- alt="background" + alt=""
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/web/src/components/faq/FaqSection.tsx(3 hunks)apps/web/src/components/landing-sections/Brands.tsx(0 hunks)apps/web/src/components/landing-sections/Hero.tsx(2 hunks)apps/web/src/components/landing-sections/navbar.tsx(4 hunks)apps/web/src/components/ui/accordion.tsx(1 hunks)apps/web/src/components/ui/custom-button.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/web/src/components/landing-sections/Brands.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/web/src/components/landing-sections/navbar.tsx
- apps/web/src/components/ui/custom-button.tsx
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
apps/web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
apps/web/src/**/*.{ts,tsx}: Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
NEVER use hardcoded hex values (e.g.,#5519f7) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Use semantic color names that describe purpose, not appearance
Usefont-sansfor standard UI text (Geist Sans) andfont-monofor code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale (0.25rem increments); for section padding use mobilep-4(1rem) and desktopp-[60px]
Use appropriate border radius: small elementsrounded-lg, mediumrounded-xl, largerounded-2xl, buttonsrounded-[16px]
Use animation durations: fastduration-100(0.1s), normalduration-300(0.3s), slowduration-600(0.6s)
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,ts}: Prefer functional components with TypeScript and use proper TypeScript types, avoidany
Extract reusable logic into custom hooks
Use descriptive prop names and define prop types using TypeScript interfaces or types
Prefer controlled components over uncontrolled
Use zustand for global state (located insrc/store/)
Use absolute imports from@/prefix when available
Include proper aria labels for accessibility
Ensure keyboard navigation works
Maintain proper heading hierarchy
Provide alt text for images
Avoid unnecessary re-renders
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Organize imports: react → third-party → local components → utils → types
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
**/*[A-Z]*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Use PascalCase for component file names (e.g.,
UserProfile.tsx)
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Memoize expensive computations
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
apps/web/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Optimize images using next/image
apps/web/src/**/*.{tsx,ts}: Use Zustand for global state, located insrc/store/
Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Optimize images using next/image
Memoize expensive computations
Define a type when defining const functions
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}
📄 CodeRabbit inference engine (.cursor/rules/general_rules.mdc)
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
apps/web/src/components/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/components/**/*.{tsx,ts,jsx,js}: Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Use font-sans for standard UI text (Geist Sans) and font-mono for code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale for section padding: p-4 (1rem) on mobile, p-[60px] on desktop
Use rounded-lg (0.5rem) for small elements, rounded-xl (1rem) for medium elements, rounded-2xl (1.5rem) for large elements, and rounded-[16px] for buttons
Use duration-100 (0.1s) for fast transitions, duration-300 (0.3s) for normal transitions, and duration-600 (0.6s) for slow transitions
Use available custom animations: animate-accordion-down, animate-accordion-up, animate-scrollRight, animate-scrollLeft, animate-customspin, animate-spin-slow, animate-spin-slow-reverse, animate-marquee, animate-marquee-vertical, animate-shine
Prefer functional components with TypeScript
Extract reusable logic into custom hooks
Prefer controlled components over uncontrolled
Include proper aria labels for accessibility
Ensure keyboard navigation works in interactive components
Maintain proper heading hierarchy in page components
Provide alt text for images
Use 'class:' instead of the ternary operator in class tags whenever possible
Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
apps/web/src/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/components/**/*.{tsx,ts}: Use proper TypeScript types and avoid usinganytype
Use descriptive prop names and define prop types using TypeScript interfaces or types
Name components using PascalCase (e.g., UserProfile.tsx)
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
apps/web/src/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/**/*.{tsx,ts,jsx,js}: Organize imports in order: React → third-party → local components → utils → types
Use absolute imports from@/prefix when available
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Use const with arrow functions instead of function declarations (e.g., 'const toggle = () =>')
Files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
🧠 Learnings (17)
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : NEVER use hardcoded hex values (e.g., `#5519f7`) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Applied to files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts} : Maintain proper heading hierarchy
Applied to files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts} : Use descriptive prop names and define prop types using TypeScript interfaces or types
Applied to files:
apps/web/src/components/landing-sections/Hero.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts} : Include proper aria labels for accessibility
Applied to files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Include proper aria labels for accessibility
Applied to files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use 'class:' instead of the ternary operator in class tags whenever possible
Applied to files:
apps/web/src/components/landing-sections/Hero.tsxapps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Applied to files:
apps/web/src/components/landing-sections/Hero.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Applied to files:
apps/web/src/components/landing-sections/Hero.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Optimize images using next/image
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Maintain proper heading hierarchy in page components
Applied to files:
apps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Applied to files:
apps/web/src/components/faq/FaqSection.tsxapps/web/src/components/ui/accordion.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*[Cc]omponent.{tsx,ts} : Keep components focused and single-responsibility
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use rounded-lg (0.5rem) for small elements, rounded-xl (1rem) for medium elements, rounded-2xl (1.5rem) for large elements, and rounded-[16px] for buttons
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use available custom animations: animate-accordion-down, animate-accordion-up, animate-scrollRight, animate-scrollLeft, animate-customspin, animate-spin-slow, animate-spin-slow-reverse, animate-marquee, animate-marquee-vertical, animate-shine
Applied to files:
apps/web/src/components/ui/accordion.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Remove unused imports
Applied to files:
apps/web/src/components/ui/accordion.tsx
🔇 Additional comments (2)
apps/web/src/components/faq/FaqSection.tsx (1)
113-115: Layering context looks good.The addition of
z-30properly establishes the stacking order for the trigger above the decorative SVG background.apps/web/src/components/landing-sections/Hero.tsx (1)
50-53: badge animation refactor looks goodswitching this badge to an explicit
initial/animate/transitionsetup with blur is clear and consistent with the rest of the motion usage; no issues spotted here.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
apps/web/src/components/faq/FaqSection.tsx (2)
14-14: replace hardcoded top border color with a design-token class
border-b border-[#252525]still uses a hardcoded hex color. to align with the design system, switch this to a semantic border token (e.g.border-borderor another appropriate surface/border token) and drop the hex-based class.
69-240: fix svg attribute naming for react/tsx and consider extracting to a componentthis inline svg still uses hyphenated svg attributes (
clip-path,color-interpolation-filters,flood-opacity,flood-color), which are not valid in react’s tsx typings and will raise type errors / warnings. they need to be converted to their camelCase equivalents:
clip-path→clipPathcolor-interpolation-filters→colorInterpolationFiltersflood-opacity→floodOpacityflood-color→floodColoralso, given the svg’s size and complexity, extracting it into a dedicated component (e.g.
FaqDecorativeSvg) that accepts aclassNameprop would improve readability and reuse, similar to other decorative svgs in the codebase.for example (abbreviated):
- <g clip-path="url(#clip0_288_24)"> + <g clipPath="url(#clip0_288_24)"> ... - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" ... - <feFlood flood-opacity="0" result="BackgroundImageFix" /> + <feFlood floodOpacity="0" result="BackgroundImageFix" /> ... - <feFlood - flood-color="rgba(0, 0, 0, 0.12)" + <feFlood + floodColor="rgba(0, 0, 0, 0.12)" result="color1Flood" />then move the full, corrected svg into a new
FaqDecorativeSvg.tsxcomponent and render it here as:<FaqDecorativeSvg className="absolute top-0 left-0 z-0 pointer-events-none opacity-30" />
🧹 Nitpick comments (2)
apps/web/src/components/faq/FaqSection.tsx (2)
1-10: reorder imports to follow project guidelinesimports currently go
react→ local modules →next/image. per the repo guidelines it should bereact→ third-party (next/image) → local components/utils/types. consider moving thenext/imageimport directly after thereactimport.
18-29: avoid hardcoded hex colors and redundant inline styles on side railsboth side-rail divs use inline styles with repeated
#252525values and an unused css variable--pattern-fg, plusheight: "100%"even though the elements could useh-fullvia tailwind.to better follow the design system and tailwind-first styling:
- replace
#252525with a semantic token (e.g. via a css variable bound to a design token in tailwind, then referenced in therepeating-linear-gradient).- remove the unused
--pattern-fgor actually use it inside the gradient instead of repeating the literal color.- prefer
h-fullin the className overheight: "100%"to keep layout styling in tailwind utilities.Also applies to: 33-45
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/components/faq/FaqSection.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Files:
apps/web/src/components/faq/FaqSection.tsx
apps/web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
apps/web/src/**/*.{ts,tsx}: Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
NEVER use hardcoded hex values (e.g.,#5519f7) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Use semantic color names that describe purpose, not appearance
Usefont-sansfor standard UI text (Geist Sans) andfont-monofor code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale (0.25rem increments); for section padding use mobilep-4(1rem) and desktopp-[60px]
Use appropriate border radius: small elementsrounded-lg, mediumrounded-xl, largerounded-2xl, buttonsrounded-[16px]
Use animation durations: fastduration-100(0.1s), normalduration-300(0.3s), slowduration-600(0.6s)
Files:
apps/web/src/components/faq/FaqSection.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,ts}: Prefer functional components with TypeScript and use proper TypeScript types, avoidany
Extract reusable logic into custom hooks
Use descriptive prop names and define prop types using TypeScript interfaces or types
Prefer controlled components over uncontrolled
Use zustand for global state (located insrc/store/)
Use absolute imports from@/prefix when available
Include proper aria labels for accessibility
Ensure keyboard navigation works
Maintain proper heading hierarchy
Provide alt text for images
Avoid unnecessary re-renders
Files:
apps/web/src/components/faq/FaqSection.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Organize imports: react → third-party → local components → utils → types
Files:
apps/web/src/components/faq/FaqSection.tsx
**/*[A-Z]*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Use PascalCase for component file names (e.g.,
UserProfile.tsx)
Files:
apps/web/src/components/faq/FaqSection.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Memoize expensive computations
Files:
apps/web/src/components/faq/FaqSection.tsx
apps/web/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Optimize images using next/image
apps/web/src/**/*.{tsx,ts}: Use Zustand for global state, located insrc/store/
Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Optimize images using next/image
Memoize expensive computations
Define a type when defining const functions
Files:
apps/web/src/components/faq/FaqSection.tsx
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}
📄 CodeRabbit inference engine (.cursor/rules/general_rules.mdc)
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Files:
apps/web/src/components/faq/FaqSection.tsx
apps/web/src/components/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/components/**/*.{tsx,ts,jsx,js}: Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Use font-sans for standard UI text (Geist Sans) and font-mono for code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale for section padding: p-4 (1rem) on mobile, p-[60px] on desktop
Use rounded-lg (0.5rem) for small elements, rounded-xl (1rem) for medium elements, rounded-2xl (1.5rem) for large elements, and rounded-[16px] for buttons
Use duration-100 (0.1s) for fast transitions, duration-300 (0.3s) for normal transitions, and duration-600 (0.6s) for slow transitions
Use available custom animations: animate-accordion-down, animate-accordion-up, animate-scrollRight, animate-scrollLeft, animate-customspin, animate-spin-slow, animate-spin-slow-reverse, animate-marquee, animate-marquee-vertical, animate-shine
Prefer functional components with TypeScript
Extract reusable logic into custom hooks
Prefer controlled components over uncontrolled
Include proper aria labels for accessibility
Ensure keyboard navigation works in interactive components
Maintain proper heading hierarchy in page components
Provide alt text for images
Use 'class:' instead of the ternary operator in class tags whenever possible
Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
Files:
apps/web/src/components/faq/FaqSection.tsx
apps/web/src/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/components/**/*.{tsx,ts}: Use proper TypeScript types and avoid usinganytype
Use descriptive prop names and define prop types using TypeScript interfaces or types
Name components using PascalCase (e.g., UserProfile.tsx)
Files:
apps/web/src/components/faq/FaqSection.tsx
apps/web/src/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/**/*.{tsx,ts,jsx,js}: Organize imports in order: React → third-party → local components → utils → types
Use absolute imports from@/prefix when available
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Use const with arrow functions instead of function declarations (e.g., 'const toggle = () =>')
Files:
apps/web/src/components/faq/FaqSection.tsx
🧠 Learnings (15)
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Optimize images using next/image
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts} : Maintain proper heading hierarchy
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use 'class:' instead of the ternary operator in class tags whenever possible
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : NEVER use hardcoded hex values (e.g., `#5519f7`) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts} : Include proper aria labels for accessibility
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*[Cc]omponent.{tsx,ts} : Keep components focused and single-responsibility
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Include proper aria labels for accessibility
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use semantic color names that describe purpose, not appearance
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use appropriate border radius: small elements `rounded-lg`, medium `rounded-xl`, large `rounded-2xl`, buttons `rounded-[16px]`
Applied to files:
apps/web/src/components/faq/FaqSection.tsx
🔇 Additional comments (4)
apps/web/src/components/faq/FaqSection.tsx (4)
57-62: accordion container structure looks goodusing a centered, constrained
max-w-4xlcontainer withspace-y-4and responsive padding keeps the faq list readable and matches the existing layout patterns.
64-67: nice use of rounded-2xl and tokenized borderthe accordion item now uses
rounded-2xlandborder border-border, which aligns with the radius and border-token guidance and removes the previous hardcoded border hex.
242-245: accordion trigger/content styling aligns with design tokens
AccordionTriggerandAccordionContentnow use token-based typography and colors (text-text-primary, responsive text sizes) with appropriate z-index layering, which matches the design system and keeps content above decorative layers.
255-255: component definition looks good
FaqSectionremains a simple functional component with a clear responsibility and no prop surface changes, which keeps the public api stable.
|
@zzzzshawn can you pls accept the CLA? |
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.