(SP: 2) [Frontend] Update Code cards, button behavior, and layout#270
Merged
Conversation
Increase code cards size Ensure button text visible on initial load Update mobile position of online counter Make Q&A section full height
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for develop-devlovers ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughRemoved OnlineCounterPopup from locale layout and moved it into HeroSection (wired via a forwarded ctaRef); InteractiveCTAButton now forwards refs and manages hover text state; Footer accepts an optional footerRef; responsive sizing/typography added to home cards; unused CTA variant utilities removed. Changes
Sequence Diagram(s)sequenceDiagram
participant Layout as App Layout
participant Hero as HeroSection
participant CTA as InteractiveCTAButton
participant Popup as OnlineCounterPopup
participant Window as Window
Layout->>Hero: render HeroSection
Hero->>CTA: create InteractiveCTAButton with forwarded ref (ctaRef)
Hero->>Popup: render OnlineCounterPopup(ctaRef)
Popup->>CTA: read ctaRef position (useLayoutEffect) -> compute top/isMobile
Popup->>Popup: set position state -> apply inline styles
Window->>Popup: resize event
Popup->>Popup: recompute position (if mobile)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![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
🤖 Fix all issues with AI agents
In `@frontend/components/home/CodeCard.tsx`:
- Line 26: In the CodeCard component replace the malformed Tailwind token in the
status-dot span: find the span element with className containing "xl:w-2."
(inside CodeCard / the green status dot) and change that token to "xl:w-2.5" so
the width matches the xl height (keeping the rest of the className unchanged.
In `@frontend/components/home/InteractiveCTAButton.tsx`:
- Around line 46-49: The angle calculation for the particles in
InteractiveCTAButton.tsx is wrong: the particles array creates 12 items but the
angle uses (i * 360) / 8, causing overlaps; update the angle computation for the
particles constant (the `particles` initializer) to divide by 12 or, better, use
particles.length (e.g., (i * 360) / count) so each of the 12 items is evenly
spaced; change the divisor in the angle expression accordingly to fix the
distribution.
In `@frontend/components/shared/Footer.tsx`:
- Around line 21-31: The prop type for footerRef in the Footer component
currently uses React.RefObject which relies on the React namespace; import the
Ref type from 'react' and change the prop definition to use Ref<HTMLElement>
(e.g., update the Footer props signature that declares footerRef?:
React.RefObject<HTMLElement> to footerRef?: Ref<HTMLElement>) so the type is
available without the React namespace and supports callback refs; ensure the new
import (Ref) is added at the top of the file and update any references to
footerRef accordingly.
🧹 Nitpick comments (3)
frontend/components/shared/OnlineCounterPopup.tsx (1)
34-77: Consider extracting the duplicated position calculation logic.The position calculation logic is duplicated between
useLayoutEffect(lines 35-50) and the resize handler inuseEffect(lines 55-70). Extracting this into a shared function would improve maintainability.♻️ Proposed refactor
+ const calculatePosition = React.useCallback(() => { + const mobile = window.innerWidth < 768; + let newTop = 0; + + if (mobile && ctaRef.current) { + const rect = ctaRef.current.getBoundingClientRect(); + const desired = rect.bottom + window.scrollY + rect.height + 14; + const popupHeight = 56; + const safeBottom = 16; + const max = + window.scrollY + window.innerHeight - popupHeight - safeBottom; + newTop = Math.min(desired, max); + } + + setPosition({ top: newTop, isMobile: mobile }); + }, [ctaRef]); + useLayoutEffect(() => { - const calculatePosition = () => { - const mobile = window.innerWidth < 768; - let newTop = 0; - - if (mobile && ctaRef.current) { - const rect = ctaRef.current.getBoundingClientRect(); - const desired = rect.bottom + window.scrollY + rect.height + 14; - const popupHeight = 56; - const safeBottom = 16; - const max = - window.scrollY + window.innerHeight - popupHeight - safeBottom; - newTop = Math.min(desired, max); - } - - setPosition({ top: newTop, isMobile: mobile }); - }; - calculatePosition(); - }, [ctaRef]); + }, [calculatePosition]); + useEffect(() => { - const handleResize = () => { - const mobile = window.innerWidth < 768; - let newTop = 0; - - if (mobile && ctaRef.current) { - const rect = ctaRef.current.getBoundingClientRect(); - const desired = rect.bottom + window.scrollY + rect.height + 14; - const popupHeight = 56; - const safeBottom = 16; - const max = - window.scrollY + window.innerHeight - popupHeight - safeBottom; - newTop = Math.min(desired, max); - } - - setPosition({ top: newTop, isMobile: mobile }); - }; - - window.addEventListener('resize', handleResize); - + window.addEventListener('resize', calculatePosition); return () => { - window.removeEventListener('resize', handleResize); + window.removeEventListener('resize', calculatePosition); }; - }, [ctaRef]); + }, [calculatePosition]);frontend/components/home/InteractiveCTAButton.tsx (2)
10-11: Consider adding a displayName for better debugging.When using
forwardRef, setting adisplayNamehelps with React DevTools debugging.♻️ Proposed addition after the component
} ); + +InteractiveCTAButton.displayName = 'InteractiveCTAButton';Also applies to: 163-165
19-28:textVariantsarray is recreated on every render.Since this array depends on translations that don't change during the component's lifecycle, consider memoizing it.
♻️ Proposed optimization
- const textVariants = [ + const textVariants = React.useMemo(() => [ t('ctaVariants.1'), t('ctaVariants.2'), t('ctaVariants.3'), t('ctaVariants.4'), t('ctaVariants.5'), t('ctaVariants.6'), t('ctaVariants.7'), t('ctaVariants.8'), - ]; + ], [t]);
| <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm" /> | ||
| <span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" /> | ||
| <span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" /> | ||
| <span className="xl:w-2. h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5" /> |
Contributor
There was a problem hiding this comment.
Typo in Tailwind class: xl:w-2. should be xl:w-2.5.
The green status dot has a malformed class. Based on the pattern from the adjacent dots (lines 24-25), this should be xl:w-2.5 to match the height.
🐛 Proposed fix
- <span className="xl:w-2. h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5" />
+ <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" />📝 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
| <span className="xl:w-2. h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5" /> | |
| <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" /> |
🤖 Prompt for AI Agents
In `@frontend/components/home/CodeCard.tsx` at line 26, In the CodeCard component
replace the malformed Tailwind token in the status-dot span: find the span
element with className containing "xl:w-2." (inside CodeCard / the green status
dot) and change that token to "xl:w-2.5" so the width matches the xl height
(keeping the rest of the className unchanged.
Fix particle angle distribution Correct malformed Tailwind width class Use Ref type instead of React.RefObject in Footer
ViktorSvertoka
approved these changes
Feb 4, 2026
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
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR improves the Home page.
Changes
Summary by CodeRabbit
New Features
Bug Fixes
Style