Add bookmark banner to landing page

[mrmps]

Summary

• Adds a glassmorphic "Bookmark us!" banner component at the top of the landing page
• Displays keyboard shortcut (⌘+D on Mac, Ctrl+D on Windows) with styled keyboard keys
• Uses backdrop blur and gradient overlays for a polished glass effect

Test plan

• Verify the banner appears at the top of the landing page
• Check that it shows ⌘+D on Mac devices
• Check that it shows Ctrl+D on Windows/Linux devices
• Verify styling looks correct in both light and dark modes
• Test responsive behavior on mobile

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added a bookmark reminder banner to the home page displaying platform-specific keyboard shortcuts (⌘+D on Mac, Ctrl+D on other platforms) for easy bookmarking.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

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

Project	Deployment	Review	Updated (UTC)
smry	Ready	Preview, Comment	Jan 20, 2026 10:31am

[coderabbitai]

📝 Walkthrough

Walkthrough

A new BookmarkBanner component is introduced to prompt users to bookmark the application. The component detects the user's operating system and displays platform-specific keyboard shortcuts (⌘D on macOS, Ctrl+D elsewhere). It is integrated into the home content page alongside existing UI elements.

Changes

Cohort / File(s)	Summary
New BookmarkBanner Component components/marketing/bookmark-banner.tsx	New client-side React component that renders a styled banner with "Bookmark us!" text and platform-aware keyboard shortcut indicator using a custom useIsMac hook via useSyncExternalStore for SSR compatibility.
Home Content Integration components/features/home-content.tsx	Imports and renders the new BookmarkBanner component within the main content area; adjusts GitHubStarsButton spacing from mb-10 to mt-4 mb-10.
Dependencies package.json	Dependency manifest updated to support the new component additions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

A bookmark so bright, with a banner so neat, 🎀
⌘D on Mac makes the shortcut complete!
Ctrl for the rest, both quick and quite sweet,
One hook to detect them, no tricks and no cheat! 🐰✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add bookmark banner to landing page' directly and clearly summarizes the main change - adding a new BookmarkBanner component to the home page.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[railway-app]

🚅 Deployed to the SMRY-pr-42 environment in smry

Service	Status	Web	Updated (UTC)
SMRY	✅ Success (View Logs)	Web	Jan 20, 2026 at 10:33 am
smry-api	✅ Success (View Logs)		Jan 20, 2026 at 10:32 am

[greptile-apps]

Greptile Overview

Greptile Summary

Adds a bookmark reminder banner to the landing page that displays platform-specific keyboard shortcuts (⌘+D for Mac, Ctrl+D for others). The banner integrates cleanly into the existing layout above the GitHub stars button.

• New BookmarkBanner component with useIsMac hook for platform detection
• Uses useSyncExternalStore for SSR-safe platform detection with proper hydration
• Banner placed prominently at top of landing page content
• Proper spacing adjustments to accommodate new banner

The implementation has style concerns that deviate from the project's design philosophy. The banner uses inline style props with hardcoded rgba values and complex glassmorphic effects (backdrop blur, gradient overlays, box shadows), which contradicts the DESIGN_PHILOSOPHY.md guidance to use semantic design tokens (bg-accent, bg-card, border-border) that automatically adapt to both light and dark modes. The current approach makes dark mode theming more brittle.

Confidence Score: 3/5

• This PR is functionally safe but deviates from established design patterns
• The code works correctly with proper SSR handling and platform detection. However, the styling approach violates the project's design philosophy by using hardcoded inline styles instead of semantic tokens, making dark mode support and maintenance more difficult
• Pay attention to components/marketing/bookmark-banner.tsx - needs refactoring to use semantic design tokens instead of inline styles

Important Files Changed

Filename	Overview
components/marketing/bookmark-banner.tsx	New glassmorphic banner component with platform detection; violates design philosophy by using inline styles with hardcoded rgba values instead of semantic tokens

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant HomeContent
    participant BookmarkBanner
    participant useIsMac

    User->>Browser: Visit landing page
    Browser->>HomeContent: Render component
    HomeContent->>BookmarkBanner: Render banner (line 93)
    BookmarkBanner->>useIsMac: Check platform
    
    alt Server-side rendering
        useIsMac-->>BookmarkBanner: true (SSR default)
        BookmarkBanner-->>HomeContent: Render with ⌘
    else Client-side hydration
        useIsMac->>Browser: Check navigator.platform
        Browser-->>useIsMac: Platform info
        alt Mac platform
            useIsMac-->>BookmarkBanner: true
            BookmarkBanner-->>HomeContent: Render with ⌘
        else Windows/Linux
            useIsMac-->>BookmarkBanner: false
            BookmarkBanner-->>HomeContent: Render with Ctrl
        end
    end
    
    HomeContent-->>Browser: Display complete page
    Browser-->>User: Show bookmark banner with keyboard shortcut

Loading

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

violates design philosophy - uses inline style prop with hardcoded rgba values and complex gradients instead of semantic design tokens

Per DESIGN_PHILOSOPHY.md:

• Should use semantic tokens (bg-accent, bg-card, border-border) that auto-adapt to dark mode
• "Avoid hardcoded Tailwind colors (e.g., gray-100, gray-800)" - this applies to inline rgba values too
• Backdrop blur effects with complex gradients don't match the "investor update" aesthetic

Suggested change

	backdropFilter: "blur(40px)",
	WebkitBackdropFilter: "blur(40px)",
	backgroundImage:
	"linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0px, rgba(0, 0, 0, 0) 100%), linear-gradient(100deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0) 25%)",
	boxShadow:
	"rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 2px",
	}}
	className="inline-flex items-center gap-2 rounded-lg border border-border bg-accent/50 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur-sm"

Context Used: Context from dashboard - AGENTS.md (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[greptile-apps]

inline style prop with hardcoded rgba values should use Tailwind utility classes with semantic tokens instead

Suggested change

	<span
	style={{ textShadow: "rgba(0, 0, 0, 0.05) 0px 1px 0px" }}
	>
	Bookmark us!
	</span>
	<span>
	Bookmark us!
	</span>

Context Used: Context from dashboard - AGENTS.md (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}