Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR adds four new marketing components, refactors multiple marketing UI components (Hero, Features, PricingSection), updates marketing copy and FAQ content, and applies widespread light/dark theme and typography (Instrument Serif) styling changes across the web app. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/pages/index.tsx (1)
92-149:⚠️ Potential issue | 🟡 MinorJSON-LD FAQ schema is out of sync with the FAQ component.
The structured data includes questions that differ from the FAQ component at
apps/web/components/marketing/faq.tsx:In JSON-LD but not in FAQ component:
- "Do I need to enter a credit card to create a page?"
- "Do you support custom domains?"
In FAQ component but not in JSON-LD:
- "Do I need the CLI to use Changes.page?"
- "Is Changes.page reliable?"
This discrepancy can harm SEO if search engines detect a mismatch between the structured data and visible page content.
Proposed fix to align with FAQ component
{ "@type": "Question", - name: "Do I need to enter a credit card to create a page?", + name: "Do I need the CLI to use Changes.page?", acceptedAnswer: { "@type": "Answer", - text: "No, you don't need to enter a credit card to create a page.", + text: "No. The web interface provides full functionality. The CLI and API are additional interfaces for teams that want automation.", }, }, { "@type": "Question", - name: "Do you support custom domains?", + name: "Is Changes.page reliable?", acceptedAnswer: { "@type": "Answer", - text: "Yes, we also provision SSL certificates for your custom domain.", + text: "Yes, 99.9%+ uptime with highly scalable and redundant infrastructure.", }, },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/pages/index.tsx` around lines 92 - 149, The JSON-LD mainEntity array in pages/index.tsx is out of sync with the visible FAQ component (apps/web/components/marketing/faq.tsx); update the mainEntity entries so the question/answer pairs exactly match the FAQ component: remove the two questions present only in JSON-LD ("Do I need to enter a credit card to create a page?" and "Do you support custom domains?"), add the two questions present only in the FAQ component ("Do I need the CLI to use Changes.page?" and "Is Changes.page reliable?"), and ensure the acceptedAnswer.text values are identical to the FAQ component strings; modify the mainEntity array in index.tsx to reflect these exact question/answer texts.
🧹 Nitpick comments (4)
apps/web/components/marketing/cli-demo.tsx (1)
27-27: Consider adding light mode support for consistency.Same as
dual-interface.tsx— this component uses dark-only styling while other components in this PR support both light and dark themes.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/components/marketing/cli-demo.tsx` at line 27, The component uses dark-only utility classes on the outer wrapper (the div with className "bg-gray-900 py-24 sm:py-32") so add matching light-mode classes and dark: prefixes like in dual-interface.tsx; replace the hardcoded dark background/text utilities with light-mode equivalents plus dark: variants (e.g., add a light background and text color utilities and prefix the existing dark styles with dark:) and audit inner elements (headings, paragraphs, buttons) to ensure their text and background colors also have light and dark variants so the component renders correctly in both themes.apps/web/components/marketing/dual-interface.tsx (2)
59-64: Unusediconproperty in feature arrays.Each feature defines an
iconproperty, but the render usesCheckCircleIconuniformly instead. Either remove the unusedicondefinitions fromhumanFeatures/agentFeatures(lines 14-30), or render the feature-specific icon:Option: Render feature-specific icons
- <CheckCircleIcon className="h-5 w-5 text-indigo-400 flex-shrink-0" /> + <feature.icon className="h-5 w-5 text-indigo-400 flex-shrink-0" />Also applies to: 80-85
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/components/marketing/dual-interface.tsx` around lines 59 - 64, The feature arrays (humanFeatures and agentFeatures) declare an icon property that is never used; in the map that renders each feature (the JSX using CheckCircleIcon) either remove the unused icon fields from humanFeatures/agentFeatures or render the per-feature icon instead: update the list mapping in dual-interface.tsx to use the feature.icon component when present (e.g., render feature.icon with the same classes/props currently applied to CheckCircleIcon) and fall back to CheckCircleIcon if feature.icon is absent, ensuring you reference humanFeatures, agentFeatures and the mapped feature variable to locate the change.
34-34: Consider adding light mode support for consistency.Other marketing components in this PR use theme-aware styling (e.g.,
bg-gray-50 dark:bg-gray-900), but this component only renders with dark styles. If light mode should be supported on the landing page, update the background and text colors accordingly.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/components/marketing/dual-interface.tsx` at line 34, The component only uses dark-only styles; update the root div className in dual-interface.tsx (the element rendering "bg-gray-900 py-24 sm:py-32") to be theme-aware (e.g., "bg-gray-50 dark:bg-gray-900 py-24 sm:py-32") and then make child text elements theme-aware as well (replace hard-coded dark styles like "text-white" with pairs such as "text-gray-900 dark:text-white" for headings and body text, and adjust muted/secondary text classes similarly, including any feature/title/subtitle spans) so the DualInterface component supports both light and dark modes consistently with other marketing components.apps/web/components/marketing/how-it-works.tsx (1)
3-3: Consider adding light mode support for consistency.This component uses dark-only styling (
bg-gray-900) while other components in this PR support both light and dark themes.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/components/marketing/how-it-works.tsx` at line 3, The outer container currently hard-codes dark styling; update the top-level div in the HowItWorks component (the element with className "bg-gray-900 py-24 sm:py-32 overflow-hidden") to support light and dark themes by replacing bg-gray-900 with a dual class like "bg-white dark:bg-gray-900" (or similar), and then audit and adjust descendant text/color classes (e.g., change text-white → text-gray-900 dark:text-white, muted text classes to their dark variants) so headings, body text, and links switch correctly between light and dark modes while preserving existing spacing classes (py-24 sm:py-32 overflow-hidden).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/components/layout/footer.component.tsx`:
- Around line 88-89: The footer uses a dark-only background class on the
<footer> element (className on the footer) but a light-mode border color
(border-gray-200), causing a mismatch; update the footer's classes to either add
a light-mode background (e.g., change className to include bg-white
dark:bg-gray-900) or switch the border to a dark-friendly color (e.g., replace
border-gray-200 with border-white/10 or border-gray-700) so the border and
background match across themes; apply the change on the footer element's
className in footer.component.tsx.
In `@apps/web/components/marketing/hero.tsx`:
- Around line 112-115: Await the promise returned by
navigator.clipboard.writeText(command) before calling setCopied(true) and only
set copied on successful resolution; on failure catch the error and avoid
flipping copied (and optionally log or show an error). Prevent overlapping
timeouts by storing the timeout id (e.g., timeoutRef) and clear any existing
timeout before creating a new setTimeout that will call setCopied(false). Also
clear that timeout in a cleanup effect (useEffect return) to avoid leaks when
the component unmounts; update the onClick handler and add the
timeoutRef/useEffect cleanup accordingly.
In `@apps/web/pages/_document.js`:
- Around line 8-9: The dark mode meta tag for theme-color in _document.js
currently uses content="#262626" which mismatches the dark background defined in
global.css (`#171717`); update the second <meta name="theme-color" content="...">
(the one with media="(prefers-color-scheme: dark)") to use content="#171717" so
browser chrome matches the page background.
---
Outside diff comments:
In `@apps/web/pages/index.tsx`:
- Around line 92-149: The JSON-LD mainEntity array in pages/index.tsx is out of
sync with the visible FAQ component (apps/web/components/marketing/faq.tsx);
update the mainEntity entries so the question/answer pairs exactly match the FAQ
component: remove the two questions present only in JSON-LD ("Do I need to enter
a credit card to create a page?" and "Do you support custom domains?"), add the
two questions present only in the FAQ component ("Do I need the CLI to use
Changes.page?" and "Is Changes.page reliable?"), and ensure the
acceptedAnswer.text values are identical to the FAQ component strings; modify
the mainEntity array in index.tsx to reflect these exact question/answer texts.
---
Nitpick comments:
In `@apps/web/components/marketing/cli-demo.tsx`:
- Line 27: The component uses dark-only utility classes on the outer wrapper
(the div with className "bg-gray-900 py-24 sm:py-32") so add matching light-mode
classes and dark: prefixes like in dual-interface.tsx; replace the hardcoded
dark background/text utilities with light-mode equivalents plus dark: variants
(e.g., add a light background and text color utilities and prefix the existing
dark styles with dark:) and audit inner elements (headings, paragraphs, buttons)
to ensure their text and background colors also have light and dark variants so
the component renders correctly in both themes.
In `@apps/web/components/marketing/dual-interface.tsx`:
- Around line 59-64: The feature arrays (humanFeatures and agentFeatures)
declare an icon property that is never used; in the map that renders each
feature (the JSX using CheckCircleIcon) either remove the unused icon fields
from humanFeatures/agentFeatures or render the per-feature icon instead: update
the list mapping in dual-interface.tsx to use the feature.icon component when
present (e.g., render feature.icon with the same classes/props currently applied
to CheckCircleIcon) and fall back to CheckCircleIcon if feature.icon is absent,
ensuring you reference humanFeatures, agentFeatures and the mapped feature
variable to locate the change.
- Line 34: The component only uses dark-only styles; update the root div
className in dual-interface.tsx (the element rendering "bg-gray-900 py-24
sm:py-32") to be theme-aware (e.g., "bg-gray-50 dark:bg-gray-900 py-24
sm:py-32") and then make child text elements theme-aware as well (replace
hard-coded dark styles like "text-white" with pairs such as "text-gray-900
dark:text-white" for headings and body text, and adjust muted/secondary text
classes similarly, including any feature/title/subtitle spans) so the
DualInterface component supports both light and dark modes consistently with
other marketing components.
In `@apps/web/components/marketing/how-it-works.tsx`:
- Line 3: The outer container currently hard-codes dark styling; update the
top-level div in the HowItWorks component (the element with className
"bg-gray-900 py-24 sm:py-32 overflow-hidden") to support light and dark themes
by replacing bg-gray-900 with a dual class like "bg-white dark:bg-gray-900" (or
similar), and then audit and adjust descendant text/color classes (e.g., change
text-white → text-gray-900 dark:text-white, muted text classes to their dark
variants) so headings, body text, and links switch correctly between light and
dark modes while preserving existing spacing classes (py-24 sm:py-32
overflow-hidden).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 791f37d6-2f30-412d-b59a-97756ab6a47f
📒 Files selected for processing (17)
apps/web/components/layout/footer.component.tsxapps/web/components/layout/header.component.tsxapps/web/components/marketing/cli-demo.tsxapps/web/components/marketing/dual-interface.tsxapps/web/components/marketing/faq.tsxapps/web/components/marketing/features.tsxapps/web/components/marketing/get-started-hero.tsxapps/web/components/marketing/hero.tsxapps/web/components/marketing/how-it-works.tsxapps/web/components/marketing/open-source-banner.tsxapps/web/components/marketing/pricing-section.tsxapps/web/data/marketing.data.tsapps/web/pages/_document.jsapps/web/pages/index.tsxapps/web/pages/pricing.tsxapps/web/styles/global.cssapps/web/tailwind.config.js
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.
Summary by CodeRabbit
New Features
Design Improvements
Content Updates
Visual Enhancements