feat: DC-5348 Add new ai button on landing page - #7115
Conversation
WalkthroughAdds a new link-styled Button CTA to the homepage hero and updates styling: increases the left icon margin in button styles, adjusts hero code spacing and font size, and sets a fixed right offset for the code block’s button group. No logic, exports, or error handling changes. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
Comment |
Dangerous URL checkNo absolute URLs to prisma.io/docs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
Deploying docs with
|
| Latest commit: |
e754822
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://579142dc.docs-51g.pages.dev |
| Branch Preview URL: | https://feat-dc-5348-add-ai-btn-land.docs-51g.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/button/styles.module.scss (1)
16-20: Fix invalid CSS on arrow icon transition
transition: translateX(4px);is invalid; set an initial transform and limit the transition totransformfor smoother animation..fa-arrow-right { - transition: all 150ms ease-in-out; - transition: translateX(4px); + transition: transform 150ms ease-in-out; + transform: translateX(0); margin-left: 4px; }src/pages/index.tsx (1)
209-209: Preserve query params in the new CTA linkOther links on this page propagate
location.search; do the same here to keep UTM/context.- <Button variant="link" color="teal" leftIcon="fa-regular fa-robot" label={"Get Started with Prisma & AI"} link="/ai" style={{ fontSize: `18px` }} /> + <Button variant="link" color="teal" leftIcon="fa-regular fa-robot" label={"Get Started with Prisma & AI"} link={`/ai${location.search}`} style={{ fontSize: `18px` }} />Add inside HomepageHeroSection (outside this hunk):
// Inside HomepageHeroSection() const { colorMode } = useColorMode(); const location = useLocation();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/button/styles.module.scss(1 hunks)src/pages/index.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/pages/index.tsx (1)
src/components/button/Button.tsx (1)
Button(29-63)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
🔇 Additional comments (3)
src/components/button/styles.module.scss (1)
13-15: Icon spacing LGTM8px right margin improves legibility for left icons on buttons; badges remain at 4px.
src/pages/index.tsx (2)
14-14: Import looks goodNo issues with adding the Button import.
209-209: Verify FA style for robot icon
fa-regular fa-robotmay not exist; likelyfa-solid fa-robot. Please confirm your FA set.If needed:
- leftIcon="fa-regular fa-robot" + leftIcon="fa-solid fa-robot"
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/pages/index.module.scss (2)
53-53: Prefer not using negative margins; scope or replace with responsive spacingThe hero is a flex column with gap: 24px. Using margin-top: -8px on .hero-code-wrapper is brittle and may regress at different breakpoints or writing modes. Either (a) reduce the gap for the hero at relevant breakpoints, or (b) at least neutralize the negative margin on small screens and use logical properties.
Apply this diff to localize the tweak and improve i18n friendliness:
- margin-top: -8px; + margin-block-start: -8px; + @media (max-width: 974px) { + margin-block-start: 0; + }
87-89: Use rem (and set line-height) for accessible code sizingHard-coding 18px doesn’t scale with user font settings. Switch to rem and add an explicit line-height for readability. Consider clamp() if you want slight responsive scaling.
- code { - font-size: 18px; - } + code { + font-size: 1.125rem; /* 18px @ 16px root */ + line-height: 1.5; + }Please verify: at 200% browser zoom and on narrow viewports, the code line doesn’t collide with the copy button (padding-right: 40px) and no horizontal scrolling is introduced.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/index.module.scss(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: runner / linkspector
- GitHub Check: Check internal links
- GitHub Check: Lost Pixel
- GitHub Check: Cloudflare Pages
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/theme/CodeBlock/Content/styles.module.scss (1)
56-56: Avoid hard-coded 15px; prefer a theme-aware logical inset (keeps spacing consistent and RTL-ready).A fixed pixel offset can drift from
--ifm-pre-paddingacross themes/sizes. Use a variable-based logical property with a local override hook.- right: 15px; + /* Keep aligned with code padding; allow page-level overrides */ + inset-inline-end: var(--codeblock-button-inline-end, calc(var(--ifm-pre-padding) / 2));Follow-up:
- If you keep
inset-inline-end, drop the/* rtl:ignore */above to let logical properties handle RTL. Please verify on small breakpoints and an RTL locale.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/theme/CodeBlock/Content/styles.module.scss(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
- GitHub Check: Cloudflare Pages
Fixes #DC-5348
Summary by CodeRabbit
New Features
Style