feat(web): refresh Pear landing page and footer#1053
Conversation
- Swap the green PearMark SVG for the brand-kit blue pear (transparent), tilted and enlarged in the hero; recolor the "team" wordmark to the logo's blue gradient and fix the clipped italic glyph - Tighten the hero: more breathing room, benefit-led subheader, and a "Private Beta. MacOS Silicon only. Built on Agent Relay." note - Make the product screenshot full-bleed, drop the doubled CSS shadow, and add a scroll-driven zoom from the prior column width to full width - Replace the agent-graph section with "Run agents on your machine or in the cloud" (local/remote + Slack/Linear connections) and add a "See exactly what every agent is burning" cost/usage section - Drop "broker" from marketing copy - Footer: add Pear under Projects, move Proactive Agents to the bottom of Resources, and remove Agent Relay MCP Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Warning You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again! |
|
CodeAnt AI is reviewing your PR. |
|
Warning Review limit reached
More reviews will be available in 11 minutes and 21 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
✨ 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 |
codeant-ai
Bot
added
the
size:L
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| .shot { | ||
| display: block; | ||
| width: 100%; | ||
| height: auto; | ||
| border-radius: 0.9rem; | ||
| box-shadow: | ||
| 0 40px 80px -40px rgba(22, 40, 59, 0.55), | ||
| 0 12px 32px -18px rgba(22, 40, 59, 0.4); | ||
| transform-origin: 50% 0%; | ||
| /* Start at the previous ~64rem column width (0.8 × full-bleed at desktop). */ | ||
| transform: scale(0.8); | ||
| } | ||
|
|
||
| /* Start at the old column width, then zoom to full-bleed as the page scrolls. */ | ||
| @keyframes shotZoom { | ||
| from { | ||
| transform: scale(0.8); | ||
| } | ||
| to { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| .shot { | ||
| animation: shotZoom linear both; | ||
| animation-timeline: scroll(root block); | ||
| animation-range: 0 600px; | ||
| } | ||
| } |
There was a problem hiding this comment.
Suggestion: The screenshot is permanently scaled down for users who prefer reduced motion, because the base .shot style sets transform: scale(0.8) and only the no-preference media query applies the zoom-to-1 behavior. This leaves reduced-motion users with a non-full-bleed image and inconsistent layout. Move the scale(0.8) start state into the animated branch (or add a prefers-reduced-motion: reduce override to transform: scale(1)). [css layout issue]
Severity Level: Major ⚠️
- ⚠️ Pear hero screenshot never reaches full width for some users.
- ⚠️ Reduced-motion users see inconsistent layout versus others.
- ⚠️ Visual emphasis of product screenshot is noticeably diminished.Steps of Reproduction ✅
1. Open the Pear landing page component at `web/app/pear/page.tsx:122-176` and note the
hero screenshot element `<img className={s.shot} src=\"/img/pear-app.png\" ... />` defined
at lines `167-174`.
2. Open the styles at `web/app/pear/pear.module.css` and see the base `.shot` rule in the
PR diff at lines `160-167`, which sets `transform-origin: 50% 0%` and `transform:
scale(0.8)` without any override in the default (non-media-query) context.
3. In the same CSS file, observe the scroll-driven animation is only applied inside
`@media (prefers-reduced-motion: no-preference)` at lines `179-185`, which attaches the
`shotZoom` animation but does not change the base `transform` value.
4. Run the app and load `/pear` in a browser where the OS/browser is configured with
`prefers-reduced-motion: reduce` (or simulate this via devtools); the `no-preference`
media query does not match, so `.shot` keeps the static `transform: scale(0.8)` from lines
`160-167`, resulting in the full-bleed `.mockWrap` container (lines `152-158`) displaying
a permanently scaled-down screenshot instead of reaching full width.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** web/app/pear/pear.module.css
**Line:** 160:185
**Comment:**
*Css Layout Issue: The screenshot is permanently scaled down for users who prefer reduced motion, because the base `.shot` style sets `transform: scale(0.8)` and only the `no-preference` media query applies the zoom-to-1 behavior. This leaves reduced-motion users with a non-full-bleed image and inconsistent layout. Move the `scale(0.8)` start state into the animated branch (or add a `prefers-reduced-motion: reduce` override to `transform: scale(1)`).
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d1221c72a5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // Plain img: the SST/OpenNext image optimizer has no working sharp | ||
| // runtime, so next/image's /_next/image endpoint 500s. | ||
| // eslint-disable-next-line @next/next/no-img-element | ||
| <img className={`${s.pearMark} ${className ?? ''}`} src="/brand-kit/pear-icon-transparent.png" alt="" aria-hidden /> |
There was a problem hiding this comment.
On a cold visit to /pear, this replaces the tiny inline SVG mark with a public PNG that the browser loads eagerly; the checked PNG is 2000×2000 and about 992 KiB, while it is rendered at at most ~7.8rem in the hero and ~1rem in the feature labels. Because this deliberately bypasses next/image, there is no runtime resizing/compression, so every first-time visitor pays nearly an extra megabyte for a decorative logo; use a much smaller exported asset or an SVG/WebP variant here.
Useful? React with 👍 / 👎.
|
Preview deployed!
This preview will be cleaned up when the PR is merged or closed. |
* feat(web): pear proactive section, OG pear logo, mobile hero Follow-up to #1053 (those follow-up commits missed the squash-merge). - OG card (/pear/og.png): render the brand-kit blue pear in the lockup instead of the old green glyph, with a fail-soft fallback - Add a "Proactive & connected" section: agents pick up work from Slack, Linear, and GitHub events on their own, with a triggers visual - Mention proactive task pickup in the hero subline - Mobile hero: keep the pear inline beside the headline, and blow the product screenshot up to 200vw anchored top-left so the app UI is legible Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(web): address PR review on pear OG + mobile hero - Drop the old green pear glyph entirely: the OG lockup always renders the brand-kit mark, and the "team" accent uses brand blue (matching the page) - Bundle the mark in production: add the brand-kit PNG to outputFileTracingIncludes for /pear/og.png so the traced standalone build can read it (was falling back to the missing/old asset) - Fold the dual-root probe into one loadAsset(), documenting why both roots exist (outputFileTracingRoot is the monorepo root, so cwd differs between build and the traced runtime) - Mobile screenshot: reset transform/animation so it renders a true 200vw on every browser instead of 160vw (0.8x) where scroll-timeline is unsupported - Dedupe .triggerState via `composes: runnerTag` Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 participant
User description
Refreshes the
/pearlanding page and the site-wide footer.Pear landing page
PearMarkSVG with the brand-kit blue pear (transparent PNG), tilted ~13° and enlarged in the hero. Used everywhere the old mark appeared (hero + eyebrow/diff marks).background-clip: textbox.prefers-reduced-motion, graceful fallback).Footer (site-wide)
Web-only change — no changelog entry per repo convention.
🤖 Generated with Claude Code
CodeAnt-AI Description
Refresh the Pear landing page and site footer
What Changed
Impact
✅ Clearer Pear landing page✅ Easier to understand local and cloud agent support✅ More visible spend tracking for long-running agent work💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.