Improve home page text and UI #27
Conversation
📝 WalkthroughWalkthroughHomepage content and styling updated: hero and heading obliqueness refactored, button composition adjusted, feature card copy revised, and the numeric stats grid replaced by a three-block Protocol Overview with new descriptive copy. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
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
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/page.tsx
🔇 Additional comments (6)
app/page.tsx (6)
19-47: LGTM: Hero orb container styling is well-structured.The reformatted inline styles maintain the same centering and responsive behavior while improving readability. The use of
min(90vw, 90vh)for responsive sizing is appropriate.
62-78: LGTM: Button composition usingasChildis correct.The use of
asChildwithLinkas a child is the proper pattern for Radix UI-based components. This ensures the button renders as a Next.js Link while maintaining button styling and accessibility.
106-106: LGTM: Feature card descriptions are clear and professional.The updated text improves clarity while maintaining technical accuracy. The descriptions effectively communicate the value propositions.
Also applies to: 118-118, 130-130
138-167: LGTM: Protocol Overview section provides clear value communication.The replacement of numeric stats with descriptive content blocks effectively communicates the protocol's purpose and benefits. The responsive grid layout and content hierarchy are well-implemented.
10-13: InvalidfontStylesyntax in React inline styles.The syntax
fontStyle: "oblique 12deg"is not valid in React inline styles. React'sstyleprop expectsfontStyleto be one of:"normal","italic", or"oblique"(without angle values).To apply an oblique angle, you have two options:
- Use the
fontshorthand property (less maintainable)- Apply the style via CSS class with a stylesheet
🔎 Recommended fix using CSS class
Remove the inline style and define a CSS class:
- <div - className="min-h-screen bg-background font-[oblique] tracking-wide" - style={{ fontStyle: "oblique 12deg" }} - > + <div className="min-h-screen bg-background tracking-wide oblique-12">Then add to your CSS/Tailwind config:
.oblique-12 { font-style: oblique 12deg; }Likely an incorrect or invalid review comment.
51-59: InvalidfontStylesyntax in React inline styles (duplicate issue).Same issue as the top-level container:
fontStyle: "oblique 15deg"is not valid React inline style syntax. The angle value will be ignored.🔎 Recommended fix
- <h1 - className="text-3xl sm:text-4xl md:text-5xl font-medium mb-6 sm:mb-8 text-balance tracking-wide px-4" - style={{ fontStyle: "oblique 15deg" }} - > + <h1 className="text-3xl sm:text-4xl md:text-5xl font-medium mb-6 sm:mb-8 text-balance tracking-wide px-4 oblique-15">Define the class in your stylesheet:
.oblique-15 { font-style: oblique 15deg; }Likely an incorrect or invalid review comment.
| <h2 | ||
| className="text-2xl sm:text-3xl md:text-4xl font-medium mb-4 sm:mb-6 tracking-wide" | ||
| style={{ fontStyle: "oblique 15deg" }} | ||
| > | ||
| Ready to build the future? | ||
| </h2> | ||
| <p className="text-lg sm:text-xl text-muted-foreground mb-6 sm:mb-8"> | ||
| Join thousands of developers building the next generation of decentralized applications | ||
| Join developers building the next generation of decentralized applications. | ||
| </p> |
There was a problem hiding this comment.
Invalid fontStyle syntax (duplicate issue).
The CTA section header has the same fontStyle: "oblique 15deg" syntax error as previous sections. Apply the same fix using a CSS class.
The updated copy text is engaging and appropriate for a CTA section.
🔎 Recommended fix
- <h2
- className="text-2xl sm:text-3xl md:text-4xl font-medium mb-4 sm:mb-6 tracking-wide"
- style={{ fontStyle: "oblique 15deg" }}
- >
+ <h2 className="text-2xl sm:text-3xl md:text-4xl font-medium mb-4 sm:mb-6 tracking-wide oblique-15">📝 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.
| <h2 | |
| className="text-2xl sm:text-3xl md:text-4xl font-medium mb-4 sm:mb-6 tracking-wide" | |
| style={{ fontStyle: "oblique 15deg" }} | |
| > | |
| Ready to build the future? | |
| </h2> | |
| <p className="text-lg sm:text-xl text-muted-foreground mb-6 sm:mb-8"> | |
| Join thousands of developers building the next generation of decentralized applications | |
| Join developers building the next generation of decentralized applications. | |
| </p> | |
| <h2 className="text-2xl sm:text-3xl md:text-4xl font-medium mb-4 sm:mb-6 tracking-wide oblique-15"> | |
| Ready to build the future? | |
| </h2> | |
| <p className="text-lg sm:text-xl text-muted-foreground mb-6 sm:mb-8"> | |
| Join developers building the next generation of decentralized applications. | |
| </p> |
🤖 Prompt for AI Agents
In app/page.tsx around lines 173-181, the h2 uses an invalid inline style
fontStyle: "oblique 15deg"; remove that style prop and apply the same
CSS-class-based fix used earlier: add the existing class used for oblique 15deg
(or create one if missing, e.g., .font-oblique-15 { font-style: oblique 15deg;
}) to the h2's className so the oblique angle is applied via CSS instead of an
invalid inline fontStyle string.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/page.tsx (3)
10-13: Remove redundant oblique styling.Both
font-[oblique]in className andfontStyle: "oblique"in the style prop apply the same oblique effect. Choose one approach for consistency—preferably the Tailwind class since it's already part of your className.🔎 Proposed fix
<div - className="min-h-screen bg-background font-[oblique] tracking-wide" - style={{ fontStyle: "oblique" }} + className="min-h-screen bg-background tracking-wide" + style={{ fontStyle: "oblique" }} >Or alternatively, keep only the Tailwind class:
<div className="min-h-screen bg-background font-[oblique] tracking-wide" - style={{ fontStyle: "oblique" }} >
19-46: Consider simplifying nested div structure.The explicit style objects achieve correct centering and sizing, but the nested structure could be simplified using Tailwind utility classes for cleaner code.
🔎 Proposed simplification
<div className="absolute inset-0 z-0"> - <div - style={{ - width: "100vw", - height: "100vh", - position: "absolute", - top: "0", - left: "0", - display: "flex", - alignItems: "center", - justifyContent: "center", - }} - > - <div - style={{ - width: "min(90vw, 90vh)", - height: "min(90vw, 90vh)", - maxWidth: "800px", - maxHeight: "800px", - }} - > + <div className="absolute inset-0 flex items-center justify-center"> + <div className="w-[min(90vw,90vh)] h-[min(90vw,90vh)] max-w-[800px] max-h-[800px]"> <Orb hoverIntensity={1.7}
51-59: Consistent oblique styling pattern identified.The inline
fontStyle: "oblique"is used here and in other headings (lines 89, 175). While functional, consider extracting to a reusable Tailwind class or component for easier maintenance if this pattern repeats across the app.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/page.tsx
🔇 Additional comments (6)
app/page.tsx (6)
62-77: Excellent button restructuring!The use of
asChildprop with Link components as children follows the correct pattern for Next.js navigation with shadcn/ui buttons. This ensures proper client-side routing while maintaining button styling.
87-92: Past syntax issues resolved.The invalid
fontStyle: "oblique 15deg"syntax has been corrected to validfontStyle: "oblique", and the brand name inconsistency ("OracleNet" → "OrbOracle") has been fixed.The optional suggestion to use a CSS class instead of inline styles for consistency remains valid if you want to standardize the styling approach across all headings.
106-106: Improved feature card copy.The updated descriptions are more balanced and avoid specific SLA commitments while still conveying the value propositions effectively.
Also applies to: 118-118, 130-130
138-167: Effective content replacement.Replacing numeric stats with descriptive protocol overview blocks provides more meaningful information for users trying to understand OrbOracle. The semantic structure with clear headings is well-organized and accessible.
173-178: Past syntax issues resolved.Similar to the features section, the invalid
fontStyle: "oblique 15deg"syntax has been corrected to validfontStyle: "oblique". The updated CTA copy is engaging and appropriate.
182-186: ArrowRight icon still present (inconsistent with summary).The AI summary states "removed the ArrowRight from the Get Started button," but the icon is still present at line 184. If the icon should be removed per the PR objectives, please remove it; otherwise, the summary is inaccurate.
🔎 Fix to remove ArrowRight icon (if intended)
<Button asChild size="lg" className="text-lg px-8"> - <Link href="/create"> - Get Started <ArrowRight className="ml-2 h-5 w-5" /> - </Link> + <Link href="/create">Get Started</Link> </Button>
|
Thanks for the detailed review! |
1 participant
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.