Feature/no ref/landing page performance optimizations#26
Merged
urjitc merged 11 commits intoJan 16, 2026
Conversation
…dd prefetch to Get Started links
…ove priority from footer logo
…API; add dynamic imports for below-fold sections
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughLanding page refactor: adds a shared BackgroundCard component, converts below-the-fold sections to dynamic SSR imports, adds Next.js metadata export, introduces a fixed decorative grid background layer, and applies image loading/size optimizations across landing components. Changes
Sequence Diagram(s)(omitted — changes are presentational and component composition; no multi-actor control flow requiring sequence diagrams) Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
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
Comment |
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Important
Looks good to me! 👍
Reviewed everything up to 6610672 in 2 minutes and 56 seconds. Click for details.
- Reviewed
933lines of code in9files - Skipped
0files when reviewing. - Skipped posting
8draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. src/app/page.tsx:9
- Draft comment:
Dynamic imports use { ssr: true } which renders these components on the server. Confirm if SSR is needed for below‐the‐fold components for the desired performance benefits. - Reason this comment was not posted:
Comment did not seem useful. Confidence is useful =0%<= threshold50%The comment is asking the PR author to confirm if SSR is needed for below-the-fold components. This falls under asking the author to confirm their intention, which is against the rules. The comment does not provide a specific suggestion or point out a clear issue with the code.
2. src/components/landing/BackgroundCard.tsx:20
- Draft comment:
If BackgroundCard is purely decorative, consider adding aria-hidden='true' to improve accessibility. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 35% vs. threshold = 50% This is a new file being added, so all the code is technically "changed". The comment is about accessibility, which is a valid concern. However, I need to consider the rules: "Do NOT comment unless there is clearly a code change required" and "Do NOT make comments that are obvious or unimportant." The comment is conditional ("If... is purely decorative, consider..."), which makes it somewhat speculative. However, looking at the evidence, it does appear to be decorative. The suggestion is actionable and would improve accessibility. This seems like a legitimate code quality improvement that is clear and actionable. The comment uses conditional language "If... consider..." which could be seen as speculative rather than definitive. The rules state not to make speculative comments. Also, whether something is "purely decorative" might require understanding the broader context of how this component is used, which I don't have access to. While the comment uses conditional language, the evidence strongly suggests this is decorative (placeholder content, background positioning, opacity, component name). The suggestion is a clear, actionable accessibility improvement. However, the conditional phrasing does make it less definitive than ideal, and it's possible the author intentionally left it without aria-hidden for a reason I can't see. This is a borderline case. The accessibility suggestion is valid and actionable, but the conditional phrasing makes it somewhat speculative. Given the rule to err on the side of deleting comments when unsure, and the fact that this requires assumptions about the component's purpose, I'll give it a moderate-low score.
3. src/components/landing/FourWays.tsx:95
- Draft comment:
The numbered badge wrapper has been removed. Verify this UI change is intentional as it alters the visual indicator for each step. - Reason this comment was not posted:
Comment looked like it was already resolved.
4. src/components/landing/FourWays.tsx:121
- Draft comment:
The Image component uses a sizes attribute with a fallback of '0vw'. Verify this value as it may lead to suboptimal image sizing on larger screens. - Reason this comment was not posted:
Comment looked like it was already resolved.
5. src/components/landing/Hero.tsx:114
- Draft comment:
The demo Image’s sizes attribute uses a fallback value of '0vw' for desktop. Confirm this is intended since it might result in an unexpectedly small computed size. - Reason this comment was not posted:
Comment looked like it was already resolved.
6. src/components/landing/Navbar.tsx:60
- Draft comment:
For improved accessibility, consider adding a role='navigation' to the element. - Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.
7. src/components/landing/Pricing.tsx:25
- Draft comment:
Consider externalizing the pricingTiers data into a separate configuration file to enhance maintainability as the pricing structure evolves. - Reason this comment was not posted:
Comment was not on a location in the diff, so it can't be submitted as a review comment.
8. src/components/landing/FourWays.tsx:120
- Draft comment:
The value in the sizes attribute is set as "(max-width: 768px) 100vw, 0vw". Please double-check if "0vw" is intended, as it might be a typo. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% The comment asks the author to "double-check" if 0vw is intended, suggesting it "might be a typo". However, this is clearly intentional - the mobile image (line 114-132) is hidden on desktop with md:hidden, so setting sizes to 0vw for desktop viewports is the correct optimization to prevent loading the image when it won't be displayed. The desktop image (line 134-153) has the inverse pattern. This is a standard Next.js Image optimization pattern. The comment is asking the author to verify something that is clearly correct, which violates the rule about not asking authors to confirm their intention or double-check things. Could there be a scenario where the md:hidden class isn't working as expected, making the 0vw problematic? Perhaps the comment author knows something about the responsive design that I'm missing from just this file. Even if there were edge cases with md:hidden, the comment doesn't identify a specific issue - it just asks the author to double-check. The pattern used here (0vw for hidden breakpoints) is a standard Next.js optimization. The comment is speculative and asks for confirmation rather than identifying a clear problem. This comment should be deleted. It asks the author to "double-check" and verify intent on code that is clearly correct - using 0vw in sizes for viewports where the image is hidden (md:hidden) is a standard Next.js optimization pattern. This violates the rule against asking authors to confirm their intention.
Workflow ID: wflow_bytizW5hcbC3GHLi
You can customize 
Contributor
Greptile SummaryThis PR implements comprehensive performance optimizations for the landing page:
Minor Issues:
Confidence Score: 4/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant Browser
participant NextServer as Next.js Server
participant PageTSX as page.tsx (Server Component)
participant Hero as Hero Component
participant Navbar as Navbar Component
participant Dynamic as Dynamic Components
Note over Browser,Dynamic: Initial Page Load with Performance Optimizations
Browser->>NextServer: GET / (landing page)
NextServer->>PageTSX: Render Server Component
Note over PageTSX: Generate SEO metadata via Metadata API<br/>(no client-side JS needed)
PageTSX->>Navbar: Render (static import - above fold)
PageTSX->>Hero: Render (static import - above fold)
Note over Hero: Images with priority attribute<br/>and responsive sizes
PageTSX->>Dynamic: Prepare dynamic imports (SSR: true)
Note over Dynamic: FourWays, ThreeSteps, Comparison,<br/>Pricing, FinalCTA, Footer
NextServer-->>Browser: HTML with above-fold content<br/>+ prefetch hints for critical links
Note over Browser: Browser displays Hero immediately<br/>with optimized images
par Parallel Asset Loading
Browser->>Browser: Load priority images (Hero demo)
Browser->>Browser: Prefetch /guest-setup, /dashboard
end
Browser->>Browser: Parse HTML for below-fold components
par Below-fold Component Hydration
Browser->>Dynamic: Hydrate FourWays (lazy images)
Browser->>Dynamic: Hydrate ThreeSteps (lazy images)
Browser->>Dynamic: Hydrate Comparison
Browser->>Dynamic: Hydrate Pricing
Browser->>Dynamic: Hydrate FinalCTA
Browser->>Dynamic: Hydrate Footer (lazy logo)
end
Note over Browser: Below-fold images load with<br/>loading="lazy" as user scrolls
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| import Image from "next/image"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { getCardColorCSS } from "@/lib/workspace-state/colors"; | ||
| import { getCardAccentColor } from "@/lib/workspace-state/colors"; |
Contributor
There was a problem hiding this comment.
syntax: unused import - getCardAccentColor is not used anywhere in this file
Suggested change
| import { getCardAccentColor } from "@/lib/workspace-state/colors"; | |
| import type { CardColor } from "@/lib/workspace-state/colors"; |
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/landing/Hero.tsx
Line: 6:6
Comment:
**syntax:** unused import - `getCardAccentColor` is not used anywhere in this file
```suggestion
import type { CardColor } from "@/lib/workspace-state/colors";
```
How can I resolve this? If you propose a fix, please make it concise.![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
2 issues found across 9 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="src/components/landing/BackgroundCard.tsx">
<violation number="1" location="src/components/landing/BackgroundCard.tsx:31">
P2: `isMobileOnly` currently hides the card on mobile and shows it on desktop (`hidden md:block`). If the intent is to show this card only on mobile, it should be visible on small screens and hidden on md+ (e.g., `md:hidden`).</violation>
</file>
<file name="src/components/landing/FourWays.tsx">
<violation number="1" location="src/components/landing/FourWays.tsx:141">
P2: The sizes media query treats 768px as `0vw`, but the image becomes visible at the md breakpoint (min-width 768px). This makes the browser pick a tiny srcset candidate at 768px and upscale it. Adjust the breakpoint so the visible range gets a non‑zero size.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| transform: `rotate(${card.rotation}deg)`, | ||
| opacity: 0.5, | ||
| }} | ||
| className={`rounded-md border border-foreground/20 shadow-xl ${isMobileOnly ? 'hidden md:block' : ''}`} |
Contributor
There was a problem hiding this comment.
P2: isMobileOnly currently hides the card on mobile and shows it on desktop (hidden md:block). If the intent is to show this card only on mobile, it should be visible on small screens and hidden on md+ (e.g., md:hidden).
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/landing/BackgroundCard.tsx, line 31:
<comment>`isMobileOnly` currently hides the card on mobile and shows it on desktop (`hidden md:block`). If the intent is to show this card only on mobile, it should be visible on small screens and hidden on md+ (e.g., `md:hidden`).</comment>
<file context>
@@ -0,0 +1,49 @@
+ transform: `rotate(${card.rotation}deg)`,
+ opacity: 0.5,
+ }}
+ className={`rounded-md border border-foreground/20 shadow-xl ${isMobileOnly ? 'hidden md:block' : ''}`}
+ >
+ {/* Card content placeholder */}
</file context>
![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
🤖 Fix all issues with AI agents
In `@src/components/landing/BackgroundCard.tsx`:
- Around line 18-32: In BackgroundCard, the isMobileOnly prop is currently
applying the inverted Tailwind classes (`hidden md:block`) which hides the card
on mobile; update the class logic in BackgroundCard to use the correct
visibility classes for mobile-only (e.g., `block md:hidden`) or rename the prop
to isDesktopOnly and keep the existing classes—adjust the className expression
around the isMobileOnly prop accordingly so the intent matches the applied
Tailwind classes.
In `@src/components/landing/Navbar.tsx`:
- Around line 66-92: The animated motion.div currently sets borderWidth and
borderColor but not a border style, so the border won't render; update the
motion.div (the animate prop on the div with className "relative flex h-16
items-center justify-between px-6") to include a borderStyle of "solid" (e.g.,
set borderStyle: isScrolled ? "solid" : "solid" or only when isScrolled) so the
animated borderColor/borderWidth becomes visible.
🧹 Nitpick comments (1)
src/components/landing/Navbar.tsx (1)
126-154: Avoid nested interactive elements in CTA links.
LinkwrappingButtonnests interactive elements. PreferButton asChildwithLinkinside to preserve semantics (also applies to the same CTA pattern inHero.tsxandFinalCTA.tsx).♻️ Suggested refactor
- <Link href="/guest-setup" prefetch> - <Button - onClick={() => posthog.capture('navbar-get-started-clicked', { location: 'desktop' })} - size="sm" - className="rounded-md bg-foreground font-medium text-background transition-all hover:bg-foreground/90" - > - Get Started - </Button> - </Link> + <Button + asChild + onClick={() => posthog.capture('navbar-get-started-clicked', { location: 'desktop' })} + size="sm" + className="rounded-md bg-foreground font-medium text-background transition-all hover:bg-foreground/90" + > + <Link href="/guest-setup" prefetch> + Get Started + </Link> + </Button>- <Link href="/dashboard" prefetch> - <Button - onClick={() => posthog.capture('navbar-dashboard-clicked', { location: 'desktop' })} - size="sm" - variant="outline" - className="rounded-md font-medium transition-all hover:bg-foreground/5" - > - Dashboard - </Button> - </Link> + <Button + asChild + onClick={() => posthog.capture('navbar-dashboard-clicked', { location: 'desktop' })} + size="sm" + variant="outline" + className="rounded-md font-medium transition-all hover:bg-foreground/5" + > + <Link href="/dashboard" prefetch> + Dashboard + </Link> + </Button>
Contributor
There was a problem hiding this comment.
Important
Looks good to me! 👍
Reviewed 1955a3c in 1 minute and 5 seconds. Click for details.
- Reviewed
22lines of code in1files - Skipped
0files when reviewing. - Skipped posting
2draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. src/components/landing/FourWays.tsx:120
- Draft comment:
Mobile image: Using sizes="100vw" is simpler now. Confirm that the container is actually full-width to avoid loading an oversized image. - Reason this comment was not posted:
Confidence changes required:33%<= threshold50%None
2. src/components/landing/FourWays.tsx:141
- Draft comment:
Desktop image: Simplified sizes="50vw" works if the image consistently occupies half the viewport. Verify this matches the layout’s rendered width. - Reason this comment was not posted:
Confidence changes required:33%<= threshold50%None
Workflow ID: wflow_nPnWXwCJdlZVKDOl
You can customize
|
Contributor
There was a problem hiding this comment.
Important
Looks good to me! 👍
Reviewed a5e873b in 37 seconds. Click for details.
- Reviewed
13lines of code in1files - Skipped
0files when reviewing. - Skipped posting
1draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. src/components/landing/Hero.tsx:122
- Draft comment:
Updated container's max-width from 5xl to 6xl. Please confirm this matches the intended design and maintains consistency with other containers. - Reason this comment was not posted:
Confidence changes required:33%<= threshold50%None
Workflow ID: wflow_NEMPbYGvgtfcM7E5
You can customize
urjitc
deleted the
feature/no-ref/landing-page-performance-optimizations
branch
January 16, 2026 22:22
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/landing/Hero.tsx (1)
103-133: Avoid eager-loading both demo images.Both variants are marked
priority, causing unnecessary downloads regardless of CSS visibility. Next.js'spriorityprop preloads images independent of display properties, so both/demo.pngrequests occur even though only one is visible at any breakpoint, wasting bandwidth and degrading LCP.Replace with a single responsive image using dynamic Tailwind classes and a
sizesquery, or removepriorityfrom the hidden variant.💡 Refactor to single responsive image
- {/* Mobile Demo Image - Only visible on mobile */} - <div className="relative w-full md:hidden"> - <div className="relative w-full max-w-md mx-auto px-4"> - <div className="relative aspect-[4/3] w-full overflow-hidden rounded-md border border-foreground/20 shadow-2xl"> - <Image - src="/demo.png" - alt="ThinkEx Demo" - fill - priority - sizes="100vw" - className="object-cover" - /> - </div> - </div> - </div> - - {/* Desktop Demo Image - Hidden on mobile */} - <div className="relative w-full hidden md:block"> - <div className="relative w-full max-w-5xl mx-auto px-4"> - <div className="relative aspect-[16/9] w-full overflow-hidden rounded-md border border-foreground/20 shadow-2xl"> - <Image - src="/demo.png" - alt="ThinkEx Demo" - fill - priority - sizes="80vw" - className="object-cover" - /> - </div> - </div> - </div> + {/* Responsive Demo Image */} + <div className="relative w-full"> + <div className="relative w-full max-w-md md:max-w-5xl mx-auto px-4"> + <div className="relative aspect-[4/3] md:aspect-[16/9] w-full overflow-hidden rounded-md border border-foreground/20 shadow-2xl"> + <Image + src="/demo.png" + alt="ThinkEx Demo" + fill + priority + sizes="(max-width: 768px) 100vw, 80vw" + className="object-cover" + /> + </div> + </div> + </div>
This was referenced Jan 17, 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
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.
Important
Optimizes landing page performance with dynamic imports, lazy loading, and enhances SEO using Next.js Metadata API.
page.tsxto improve initial load time.Footer.tsx,FourWays.tsx,Hero.tsx, andThreeSteps.tsx.FinalCTA.tsx,Hero.tsx,Navbar.tsx, andPricing.tsxfor faster navigation.page.tsxfor better SEO management.BackgroundCardcomponent inBackgroundCard.tsxfor decorative background elements.FinalCTA.tsx,Hero.tsx, andNavbar.tsxto useBackgroundCardfor improved styling.This description was created by
for a5e873b. You can customize this summary. It will automatically update as commits are pushed.
Summary by CodeRabbit
New Features
Performance Improvements
Style
✏️ Tip: You can customize this high-level summary in your review settings.