Sync Landing page changes

[Zishan-7]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Aug 20, 2025 8:14am

[coderabbitai]

Walkthrough

Removes the Hero component's heading prop and refactors its layout/assets; page.tsx stops passing heading. Adjusts typography across LandingPage sections with a new .font-roboto-flex class. Tweaks cloud animation width and changes NoFees amount parsing to use parsed value when present.

Changes

Cohort / File(s)	Summary of changes
Hero API & layout src/components/LandingPage/hero.tsx, src/app/page.tsx	Removed heading from HeroProps and Hero callsites; refactored layout (removed Chakra Stack), replaced main image asset and added GIF overlay, consolidated content blocks, adjusted CTA container classes, simplified event handling. page.tsx no longer passes heading.
Typography updates (Roboto Flex) src/components/LandingPage/RegulatedRails.tsx, src/components/LandingPage/dropLink.tsx, src/components/LandingPage/securityBuiltIn.tsx, src/components/LandingPage/yourMoney.tsx, src/styles/globals.css	Added/used .font-roboto-flex and increased responsive text sizes in multiple LandingPage sections; new .font-roboto-flex class added to globals.css with font-family, line-height, and letter-spacing.
Media/visual changes in yourMoney src/components/LandingPage/yourMoney.tsx	Removed unused imports, adjusted heading/paragraph classes to use Roboto Flex and different sizes, and replaced the LandingCountries image with an autoplaying looping currencies.webm video.
Asset export removal src/assets/illustrations/index.ts	Removed export LandingCountries (deleted the export { default as LandingCountries } from './landing-countries.svg' entry), reducing the module's public API.
Animation tweak src/components/LandingPage/imageAssets.tsx	Reduced CloudAnimation.imageWidth from 340 to 200, changing cloud width, start/end positions, and animation distance/duration.
URL amount parsing behavior src/components/LandingPage/noFees.tsx	Changed amount parsing to use the parsed value when amount param is present (including 0 or NaN); default 10 only when param is absent, altering potential initial values passed to exchange-rate logic.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Fix: Landing page hero section responsiveness issue #1107 — Also changes Hero API/signature and removes passing heading from page.tsx.
• Feat/legacy landing page #981 — Modifies the Hero component's public props and its usage in page.tsx.
• [TASK-12771] Feat/new landing page #974 — Alters Hero props/usage and CTA/buttonScale handling in LandingPage.

Suggested reviewers

• jjramirezn
• Hugo0

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/sync-lp-changes

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (7)

src/styles/globals.css (1)

359-363: Avoid packing line-height/letter-spacing into the generic font utility; it overrides Tailwind leading/tracking and causes inconsistencies

Because .font-roboto-flex is declared after @tailwind utilities, its line-height: 100% and letter-spacing: -1px will win over any leading-* and tracking-* utilities used on elements (equal specificity, later in the cascade). This makes component-level typography controls (e.g., leading-relaxed, custom tracking) ineffective and forces inline styles to override.

Recommend scoping .font-roboto-flex to font-family only. Control line-height and letter-spacing via Tailwind utilities where needed.

Apply this diff to narrow the utility’s responsibility:

 .font-roboto-flex {
     font-family: var(--font-roboto-flex-bold), 'sans-serif';
-    line-height: 100%;
-    letter-spacing: -1px;
 }

If you still want a reusable “tight” variant, add this alongside (outside the selected range):

/* Optional: when tight letter-spacing/line-height is desired */
.font-roboto-flex-tight {
  letter-spacing: -0.5px; /* or -1px if that’s the intended baseline */
  line-height: 100%;
}

src/components/LandingPage/RegulatedRails.tsx (1)

105-112: LGTM with a small caution on paragraph scale

Adopting font-roboto-flex for the lead paragraph and subheading looks consistent. The md:text-4xl paragraph can overshadow headings on some viewports. If you notice hierarchy issues, consider dialing the paragraph to md:text-3xl and tightening line-height via Tailwind (once .font-roboto-flex no longer forces it).

src/components/LandingPage/noFees.tsx (1)

26-26: Avoid propagating NaN from URL ‘amount’ into useExchangeRate

With the new logic, amount=foo yields NaN, which may ripple through the hook/UI. If the intent is “strict when present,” consider at least guarding against NaN/negatives to keep the experience stable.

Proposed safeguard (preserves amount=0 while defaulting invalid to 10):

-    const urlSourceAmount = searchParams.get('amount') ? parseFloat(searchParams.get('amount')!) : 10
+    const urlAmountParam = searchParams.get('amount')
+    const parsedAmount = urlAmountParam !== null ? Number.parseFloat(urlAmountParam) : 10
+    const urlSourceAmount = Number.isFinite(parsedAmount) && parsedAmount >= 0 ? parsedAmount : 10

src/components/LandingPage/hero.tsx (3)

152-152: Height change: double-check against prior UX intent

Previously, the team intentionally used h-[90vh] to hint scrollability. This now uses min-h-[85vh]. If that was deliberate, all good; otherwise, consider restoring h-[90vh] for consistent behavior across viewports.

---

161-169: Duplicate HeroImages? Verify if the double render is intentional

HeroImages is rendered inside the image wrapper (Line 161) and again in the CTA block (Line 181). If this isn’t intentional, remove one to avoid duplicate stars and extra DOM paints. If you intended two clusters, ignore.

-                <HeroImages />

---

47-49: Secondary CTA positioning: rely on flex gap/justify if possible

Using right-[calc(50%-120px)] on a relatively positioned element is a bit brittle. If layout allows, prefer flex utilities (e.g., gap/justify-center/space-x) to position the secondary CTA. This reduces magic numbers and improves responsiveness.

src/app/page.tsx (1)

182-182: Hero usage without heading: LGTM; consider removing unused hero.heading

This aligns with the new Hero API. Optional: drop hero.heading from the object above to avoid confusion.

-    const hero = {
-        heading: 'Peanut',
+    const hero = {
         marquee: {
             visible: true,
             message: ['No fees', 'Instant', '24/7', 'USD', 'EUR', 'CRYPTO', 'GLOBAL', 'SELF-CUSTODIAL'],
         },
         primaryCta: {
             label: 'TRY NOW!',
             href: '/setup',
         },
     }

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 8e51429 and 64a5e61.

📒 Files selected for processing (9)

• src/app/page.tsx (1 hunks)
• src/components/LandingPage/RegulatedRails.tsx (1 hunks)
• src/components/LandingPage/dropLink.tsx (1 hunks)
• src/components/LandingPage/hero.tsx (3 hunks)
• src/components/LandingPage/imageAssets.tsx (1 hunks)
• src/components/LandingPage/noFees.tsx (1 hunks)
• src/components/LandingPage/securityBuiltIn.tsx (1 hunks)
• src/components/LandingPage/yourMoney.tsx (1 hunks)
• src/styles/globals.css (1 hunks)

🧰 Additional context used

🧠 Learnings (7)

📓 Common learnings

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1107
File: src/components/LandingPage/hero.tsx:160-160
Timestamp: 2025-08-19T09:08:16.945Z
Learning: In the Hero component at src/components/LandingPage/hero.tsx, the team prefers to keep the main heading as h2 (not h1) and does not want a heading prop parameter - the heading content should remain hardcoded in the component.

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1089
File: src/components/LandingPage/hero.tsx:0-0
Timestamp: 2025-08-14T09:20:37.231Z
Learning: In the hero component at src/components/LandingPage/hero.tsx, the height was intentionally reduced from min-h-[100vh] to h-[90vh] to improve scrollability discoverability - so users can see there's more content below to scroll. The overflow-y-hidden is acceptable when other elements are adjusted to prevent clipping.

📚 Learning: 2025-08-19T09:08:16.945Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1107
File: src/components/LandingPage/hero.tsx:160-160
Timestamp: 2025-08-19T09:08:16.945Z
Learning: In the Hero component at src/components/LandingPage/hero.tsx, the team prefers to keep the main heading as h2 (not h1) and does not want a heading prop parameter - the heading content should remain hardcoded in the component.

Applied to files:

• src/components/LandingPage/RegulatedRails.tsx
• src/app/page.tsx
• src/components/LandingPage/yourMoney.tsx
• src/components/LandingPage/hero.tsx

📚 Learning: 2024-10-07T15:25:45.170Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Applied to files:

• src/components/LandingPage/noFees.tsx

📚 Learning: 2024-10-07T15:28:25.280Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Applied to files:

• src/components/LandingPage/noFees.tsx

📚 Learning: 2024-12-11T10:13:22.806Z

Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file `src/components/Request/Pay/Views/Initial.view.tsx`, when reviewing the `InitialView` component, do not flag potential issues with using non-null assertion `!` on the `slippagePercentage` variable, as handling undefined values in this context is considered out of scope.

Applied to files:

• src/components/LandingPage/noFees.tsx

📚 Learning: 2024-10-07T13:42:00.443Z

Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.

Applied to files:

• src/components/LandingPage/noFees.tsx

📚 Learning: 2025-08-14T09:20:37.231Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1089
File: src/components/LandingPage/hero.tsx:0-0
Timestamp: 2025-08-14T09:20:37.231Z
Learning: In the hero component at src/components/LandingPage/hero.tsx, the height was intentionally reduced from min-h-[100vh] to h-[90vh] to improve scrollability discoverability - so users can see there's more content below to scroll. The overflow-y-hidden is acceptable when other elements are adjusted to prevent clipping.

Applied to files:

• src/app/page.tsx
• src/components/LandingPage/hero.tsx

🧬 Code Graph Analysis (2)

src/app/page.tsx (1)

src/components/LandingPage/hero.tsx (1)

• Hero (100-185)

src/components/LandingPage/hero.tsx (1)

src/components/LandingPage/imageAssets.tsx (2)

• CloudImages (51-116)
• HeroImages (118-137)

⏰ 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). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (4)

src/components/LandingPage/dropLink.tsx (1)

30-33: LGTM: consistent adoption of the new font utility

Paragraph updated to use font-roboto-flex, matching the new typography direction.

src/components/LandingPage/yourMoney.tsx (1)

60-65: LGTM: typographic scale aligns with the new Roboto Flex utility

h2 and paragraph adopt font-roboto-flex with sensible weight/size adjustments.

src/components/LandingPage/imageAssets.tsx (1)

24-24: Cloud width reduction to 200px: LGTM

The animation math (initial/animate x, duration = (vpWidth + imageWidth)/speed) all stays consistent with the new width. No functional issues spotted.

src/components/LandingPage/hero.tsx (1)

100-100: Removal of heading prop from Hero: aligned with team preference

Matches the prior decision to hardcode the heading and keep it as h2. Good cleanup.

[coderabbitai]

Actionable comments posted: 0

♻️ Duplicate comments (2)

src/styles/globals.css (1)

358-363: New .font-roboto-flex utility looks good and aligns typography across LP.

Matches the team’s approach of exposing the Roboto Flex font via CSS variable on the body. This class will be available app-wide as intended.

Note: Per earlier discussion, --font-roboto-flex-bold is indeed applied on the , so the variable is available globally.

src/components/LandingPage/hero.tsx (1)

162-165: Typo in Tailwind breakpoint: mg:bottom-0 should be md:bottom-0.

This prevents the intended positioning at md+ breakpoints from applying.

Apply this diff:

-                className="mg:bottom-0 absolute bottom-[55%] left-1/2 z-10 mx-auto h-auto max-h-[40vh] w-auto max-w-[90%] -translate-x-1/2 translate-y-1/2 transform object-contain"
+                className="md:bottom-0 absolute bottom-[55%] left-1/2 z-10 mx-auto h-auto max-h-[40vh] w-auto max-w-[90%] -translate-x-1/2 translate-y-1/2 transform object-contain"

🧹 Nitpick comments (7)

src/styles/globals.css (2)

352-357: Minor specificity/duplication: avoid setting font-weight in both Tailwind and custom class.

In several components (e.g., Hero heading), .font-roboto-flex-extrabold sets font-weight: 1000 while a Tailwind weight class (e.g., font-extraBlack) is also present. The final weight depends on CSS order; this can confuse future readers.

Consider relying on only one source of truth for font-weight (either keep it in your custom class or use Tailwind utilities).

Also applies to: 358-363

---

358-363: Ensure font-roboto-flex isn’t locked to bold

The localFont instance robotoFlexBold in src/app/layout.tsx uses a single bold file (roboto-flex-bold.ttf), so its CSS variable ― --font-roboto-flex-bold ― will always resolve to bold. In src/styles/globals.css:358–363, you’re referencing that bold-only variable in .font-roboto-flex, which prevents lighter weights (font-light/font-normal) from ever applying.

Optional refactor suggestions:

• Use Next’s Google variable font for Roboto Flex instead of the bold-only local file:

  // src/app/layout.tsx
  const robotoFlex = Roboto_Flex({
    subsets: ['latin'],
    variable: '--font-roboto-flex',
  });
  // …
  <body className={`${robotoFlex.variable} …`}>

  /* src/styles/globals.css */
  .font-roboto-flex {
    font-family: var(--font-roboto-flex), sans-serif;
    /* … */
  }

• Keep robotoFlexBold for the heavy weight only:

  .font-roboto-flex-extrabold {
    font-family: var(--font-roboto-flex-bold), sans-serif;
  }

• Or, if you prefer localFont, supply multiple weighted sources with separate variables:

  const robotoLocal = localFont({
    src: [
      { path: '../assets/fonts/roboto-flex-400.ttf', weight: '400', variable: '--font-roboto-flex-400' },
      { path: '../assets/fonts/roboto-flex-700.ttf', weight: '700', variable: '--font-roboto-flex-700' },
    ],
  });

  And update your CSS to target each weight variable.

This will restore full weight control for your Roboto Flex usage.

src/components/LandingPage/yourMoney.tsx (2)

63-66: Paragraph typographic shift LGTM; ensure desired weight actually applies.

If --font-roboto-flex-bold isn’t a variable font, font-light/font-normal may not render lighter. See globals.css comment for verification guidance.

---

70-70: Harden video compatibility and accessibility.

Add WebM+MP4 sources, a poster, and a11y attributes; respect reduced motion to improve UX and LCP.

Apply this diff:

-                    <video src="/currencies.webm" autoPlay loop muted playsInline className="h-auto w-full" />
+                    <video
+                        autoPlay
+                        loop
+                        muted
+                        playsInline
+                        className="h-auto w-full"
+                        poster="/currencies-poster.jpg"
+                        aria-hidden="true"
+                    >
+                        <source src="/currencies.webm" type="video/webm" />
+                        <source src="/currencies.mp4" type="video/mp4" />
+                        {/* Fallback text for very old browsers */}
+                        Your browser does not support the video tag.
+                    </video>

Optionally, pause for users who prefer reduced motion (example outside this hunk):

// Example: pause if reduced motion is preferred
useEffect(() => {
  const media = window.matchMedia('(prefers-reduced-motion: reduce)');
  const vid = document.querySelector<HTMLVideoElement>('video[src$="currencies.webm"]');
  if (media.matches && vid) vid.pause();
}, []);

src/components/LandingPage/hero.tsx (3)

154-157: Consider Next/Image for the main hero image to improve LCP and get responsive sizing.

Switching the large visual to next/image with priority and sizes will help performance.

-                <img
-                    src={ButterySmoothGlobalMoney.src}
-                    className="z-0 mx-auto w-full max-w-[1000px] object-contain md:w-[50%]"
-                    alt="Buttery Smooth Global Money"
-                />
+                <Image
+                    src={ButterySmoothGlobalMoney}
+                    alt="Buttery Smooth Global Money"
+                    priority
+                    className="z-0 mx-auto object-contain w-full md:w-[50%] max-w-[1000px]"
+                    sizes="(min-width: 768px) 50vw, 100vw"
+                />

Note: This assumes ButterySmoothGlobalMoney is a Next-compatible static import; otherwise pass src={ButterySmoothGlobalMoney.src} with explicit width/height.

---

47-49: Secondary CTA container uses right:[calc(...)] on a relatively positioned element. Check intent.

With position: relative, right-[calc(50%-120px)] offsets the element, but layout might be brittle across widths. If centering was intended, a flex/auto-margin strategy may be clearer.

Example alternative:

-`relative z-20 mt-8 md:mt-12 flex flex-col items-center justify-center ${variant === 'primary' ? 'mx-auto w-fit' : 'right-[calc(50%-120px)]'}`
+`relative z-20 mt-8 md:mt-12 flex flex-col items-center justify-center ${variant === 'primary' ? 'mx-auto w-fit' : 'mx-auto w-fit'}`

Or keep the offset if it’s deliberately art-directed.

---

142-145: Microcopy alignment is solid; consider reducing motion for a11y.

“Takes 10 seconds” hint and arrows are nice touches. For motion-sensitive users, consider gating arrow opacity animations and other motion behind prefers-reduced-motion.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 64a5e61 and 0c03505.

⛔ Files ignored due to path filters (2)

• public/currencies.webm is excluded by !**/*.webm
• src/assets/illustrations/landing-countries.svg is excluded by !**/*.svg

📒 Files selected for processing (5)

• src/assets/illustrations/index.ts (0 hunks)
• src/components/LandingPage/hero.tsx (3 hunks)
• src/components/LandingPage/securityBuiltIn.tsx (1 hunks)
• src/components/LandingPage/yourMoney.tsx (2 hunks)
• src/styles/globals.css (1 hunks)

💤 Files with no reviewable changes (1)

• src/assets/illustrations/index.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/LandingPage/securityBuiltIn.tsx

🧰 Additional context used

🧠 Learnings (5)

📓 Common learnings

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1107
File: src/components/LandingPage/hero.tsx:160-160
Timestamp: 2025-08-19T09:08:16.945Z
Learning: In the Hero component at src/components/LandingPage/hero.tsx, the team prefers to keep the main heading as h2 (not h1) and does not want a heading prop parameter - the heading content should remain hardcoded in the component.

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1089
File: src/components/LandingPage/hero.tsx:0-0
Timestamp: 2025-08-14T09:20:37.231Z
Learning: In the hero component at src/components/LandingPage/hero.tsx, the height was intentionally reduced from min-h-[100vh] to h-[90vh] to improve scrollability discoverability - so users can see there's more content below to scroll. The overflow-y-hidden is acceptable when other elements are adjusted to prevent clipping.

📚 Learning: 2025-08-20T08:09:24.625Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1111
File: src/styles/globals.css:0-0
Timestamp: 2025-08-20T08:09:24.625Z
Learning: In the peanut-ui project (src/app/layout.tsx), font variables from localFont (like --font-roboto-flex-bold) are applied to the <body> element's className, not the <html> element. All font variables including robotoFlexBold.variable are properly loaded on the body, making CSS custom properties available throughout the DOM tree.

Applied to files:

• src/styles/globals.css
• src/components/LandingPage/hero.tsx

📚 Learning: 2025-08-20T08:09:24.625Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1111
File: src/styles/globals.css:0-0
Timestamp: 2025-08-20T08:09:24.625Z
Learning: In the peanut-ui project, font variables from localFont (like --font-roboto-flex-bold) are applied to the <body> element in src/app/layout.tsx, not the <html> element. CSS custom properties are available throughout the DOM tree from the body level.

Applied to files:

• src/styles/globals.css

📚 Learning: 2025-08-19T09:08:16.945Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1107
File: src/components/LandingPage/hero.tsx:160-160
Timestamp: 2025-08-19T09:08:16.945Z
Learning: In the Hero component at src/components/LandingPage/hero.tsx, the team prefers to keep the main heading as h2 (not h1) and does not want a heading prop parameter - the heading content should remain hardcoded in the component.

Applied to files:

• src/components/LandingPage/hero.tsx

📚 Learning: 2025-08-14T09:20:37.231Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1089
File: src/components/LandingPage/hero.tsx:0-0
Timestamp: 2025-08-14T09:20:37.231Z
Learning: In the hero component at src/components/LandingPage/hero.tsx, the height was intentionally reduced from min-h-[100vh] to h-[90vh] to improve scrollability discoverability - so users can see there's more content below to scroll. The overflow-y-hidden is acceptable when other elements are adjusted to prevent clipping.

Applied to files:

• src/components/LandingPage/hero.tsx

🧬 Code Graph Analysis (1)

src/components/LandingPage/hero.tsx (1)

src/components/LandingPage/imageAssets.tsx (2)

• CloudImages (51-116)
• HeroImages (118-137)

⏰ 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). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (2)

src/components/LandingPage/yourMoney.tsx (1)

59-61: Typographic update to Roboto Flex is consistent with the new global utility.

Adopting font-roboto-flex for the subheading aligns with the PR’s typography direction.

src/components/LandingPage/hero.tsx (1)

100-115: LGTM on Hero API: heading prop removed and h2 retained per team preference.

Matches the learning to keep the Hero’s main heading hardcoded as an h2 and remove the external heading prop.