ui changes

[ComputelessComputer]

• Refactored image components to use Next.js Image component
• Added background and objectFit props to Image component
• Updated image sources in the About page

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	8d749f4
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/6921148c1a4f4300085f62d6
😎 Deploy Preview	https://deploy-preview-1781--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This PR updates the Image component API by removing the transformer prop and introducing background and objectFit props, then migrates multiple pages to use the new Image component instead of native img elements. Additional changes include minor styling enhancements, content updates, navigation link rewrites, and version sorting logic.

Changes

Cohort / File(s)	Summary
Image Component API Redesign apps/web/src/components/image.tsx	Removed transformer and related netlify provider import; added background and objectFit props; updated component signature to accept objectFit values (contain, cover, fill, none, scale-down); merged objectFit into inline styles.
Pages Adopting New Image Component apps/web/src/routes/_view/about.tsx, index.tsx, product/ai-notetaking.tsx	Replaced native <img> elements with Image component across grid and detail sections; added Hyprnote attribution block in about.tsx; updated image source URLs to use public_image URLs.
Navigation & Routing Updates apps/web/src/routes/_view/route.tsx, auth.tsx	Replaced manual anchor tag with Link component pointing to /download in route.tsx; updated privacy/terms link paths (/legal/terms, /legal/privacy) in auth.tsx; removed overflow-x-hidden from route.tsx container.
Content & Minor Styling Adjustments apps/web/src/routes/_view/download/index.tsx, auth.tsx, index.tsx, route.tsx	Increased FAQSection bottom margin (mb-8 → mb-16) in download page; updated CTA heading and paragraph text; added cursor-pointer class to interactive elements (DetailsTabletView, OAuthButton).
Changelog Version Sorting apps/web/src/routes/_view/changelog/$slug.tsx	Modified groupVersions to sort inner version arrays in descending semantic version order instead of original order.

Sequence Diagram(s)

sequenceDiagram
    participant Old as Old Image<br/>(with transformer)
    participant New as New Image<br/>(props-based)
    participant Page as Page Component
    
    Page->>Old: Pass src, alt, layout
    Old->>Old: Apply transformer<br/>(netlify provider)
    Old-->>Page: Render optimized img
    
    Note over New: Updated API
    Page->>New: Pass src, alt, layout,<br/>background, objectFit
    New->>New: Merge objectFit<br/>into style prop
    New->>New: Pass background<br/>to UnpicImage
    New-->>Page: Render optimized img

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

• Image component prop changes: Verify objectFit values are properly applied to inline styles and that background prop is correctly passed to UnpicImage
• Style merging logic: Ensure existing styles are preserved when objectFit is added and that there are no style conflicts
• Consistent migration pattern: Cross-check that all pages adopting the Image component are using it consistently with the new props
• Routing changes: Verify that Link component replacement and privacy/terms link path updates point to correct destinations

Possibly related PRs

• landing #1617: Switches multiple pages to use the Image component, directly complementing this PR's Image component API redesign
• header logo fix #1636: Also modifies route.tsx (image component vs. native img and prop usage), creating overlap with this PR's changes to the same file
• Refactored About page #1753: Restructures about.tsx layout into modular components while this PR migrates about.tsx images to the new Image component, affecting the same file

Suggested reviewers

• yujonglee

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch jj-branch-21

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1a29d5a and 8d749f4.

📒 Files selected for processing (8)

• apps/web/src/components/image.tsx (1 hunks)
• apps/web/src/routes/_view/about.tsx (10 hunks)
• apps/web/src/routes/_view/changelog/$slug.tsx (1 hunks)
• apps/web/src/routes/_view/download/index.tsx (2 hunks)
• apps/web/src/routes/_view/index.tsx (5 hunks)
• apps/web/src/routes/_view/product/ai-notetaking.tsx (2 hunks)
• apps/web/src/routes/_view/route.tsx (2 hunks)
• apps/web/src/routes/auth.tsx (2 hunks)

---

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