Skip to content

fix(landing): fix image rendering and navbar blog/docs navigation#3785

Merged
waleedlatif1 merged 2 commits intostagingfrom
fix/images-la
Mar 26, 2026
Merged

fix(landing): fix image rendering and navbar blog/docs navigation#3785
waleedlatif1 merged 2 commits intostagingfrom
fix/images-la

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

Summary

  • Add unoptimized to all local PNG/JPG <Image> components across landing and home pages to fix 400 errors from /_next/image in production
  • Fix navbar so clicking "Blog" navigates to /blog and "Docs" navigates to docs (previously only the dropdown items were clickable)
  • Covers: blog dropdown, docs dropdown, MDX inline images, testimonial avatars, SOC2 badges, integrations page logo

Type of Change

  • Bug fix

Testing

Tested manually

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 26, 2026

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

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Mar 26, 2026 4:42pm

Request Review

@cursor
Copy link
Copy Markdown

cursor bot commented Mar 26, 2026

PR Summary

Low Risk
Low-risk UI changes limited to marketing/landing surfaces; main risk is altered image delivery behavior (disabling Next.js optimization) which could affect performance/caching but should resolve production /_next/image failures.

Overview
Fixes production image loading issues by adding unoptimized to multiple next/image usages across home/landing surfaces (compliance badges, navbar dropdown cards, testimonials avatars, integrations CTA logo, and blog MDX inline images), avoiding /_next/image optimization requests.

Updates the desktop navbar so top-level items with dropdowns (Docs, Blog) are real links (<a> for external, <Link> for internal) instead of a non-navigating button, allowing direct navigation while preserving hover dropdown behavior.

Written by Cursor Bugbot for commit 98f0083. Configure here.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 26, 2026

Greptile Summary

This PR fixes two production issues on the landing/home pages: (1) 400 errors from /_next/image caused by local PNG/JPG images being routed through the Next.js image optimiser, resolved by adding unoptimized to the affected <Image> components; and (2) clicking the "Blog" and "Docs" navbar labels not navigating anywhere, resolved by replacing the non-interactive <button> elements with <Link> (internal) and <a target=\"_blank\"> (external) respectively, while preserving the hover-triggered dropdown panel.\n\nKey changes:\n- navbar.tsx: Dropdown triggers are now navigable — "Blog" → /blog (client-side), "Docs" → https://docs.sim.ai (new tab); aria-expanded/aria-haspopup removed from link elements (correct, as dropdown is hover-driven).\n- blog-dropdown.tsx, docs-dropdown.tsx, enterprise.tsx, integrations/[slug]/page.tsx, compliance-badges.tsx, testimonials.tsx, mdx.tsx: unoptimized added to fix 400 errors; quality={75} removed where redundant (it is silently ignored when unoptimized is set).\n- The docs-dropdown.tsx images are .svg files, so unoptimized has no practical effect there (SVGs are already exempt from Next.js optimisation), but it causes no harm.\n- For blog OG images and MDX inline images, unoptimized means full-resolution originals are served to every visitor — acceptable for most use-cases but worth monitoring for LCP impact on blog posts.

Confidence Score: 5/5

Safe to merge — targeted bug fixes with no functional regressions; the only trade-off (unoptimised images) is intentional and well-understood.

Both fixes are simple, well-scoped, and address real production issues. The navbar change correctly threads the needle between navigable links and hover dropdowns. The unoptimized additions are the standard Next.js escape hatch for this class of 400 error. Prior review concerns (aria attributes, quality prop cleanup) have been addressed. The sole remaining note (LCP on blog images) is a monitoring suggestion, not a correctness issue.

No files require special attention; apps/sim/lib/blog/mdx.tsx is worth a follow-up LCP check post-deploy.

Important Files Changed

Filename Overview
apps/sim/app/(home)/components/navbar/navbar.tsx Core navigation fix: blog/docs dropdown triggers replaced from non-navigable <button> elements to <Link>/<a> elements so clicking the label routes correctly; hover-triggered dropdown behaviour preserved.
apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx Added unoptimized to blog card images; OG images (typically 1200×630) are now served at full resolution in the ~340px dropdown, which may increase bandwidth usage on hover.
apps/sim/lib/blog/mdx.tsx Added unoptimized to MDX inline images; blog post images (screenshots, diagrams) will now be served at original resolution — a meaningful bandwidth/LCP trade-off worth monitoring.
apps/sim/app/(landing)/components/testimonials/testimonials.tsx Replaced quality={75} with unoptimized on 34px testimonial avatar images; also bypasses remotePatterns check for external profile picture URLs.
apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx Replaced quality={75} with unoptimized on SOC2 badge; trade-off is acceptable for a 54px badge and quality is silently ignored alongside unoptimized anyway.
apps/sim/app/(landing)/integrations/[slug]/page.tsx Added unoptimized to the 56px integration logo image; straightforward fix with minimal performance impact.
apps/sim/app/(home)/components/enterprise/enterprise.tsx Added unoptimized to a 22×22px trust-strip icon; negligible performance impact.
apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx Added unoptimized to preview card images; the target files are .svg which Next.js already exempts from optimisation, so this is redundant but harmless.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User hovers over navbar item] --> B{Has dropdown?}
    B -- No --> C[Highlight item only]
    B -- Yes --> D[Open hover dropdown panel]
    D --> E{Item is external?}
    E -- "Yes 'Docs'" --> F["a target=_blank href: https://docs.sim.ai"]
    E -- "No 'Blog'" --> G["Link href: /blog"]
    F --> H[User clicks label → opens docs in new tab]
    G --> I[User clicks label → client-side nav to /blog]
    D --> J[User hovers into dropdown]
    J --> K[Click dropdown item → navigate to specific page]
    D --> L[Mouse leaves li boundary]
    L --> M[scheduleClose: 100ms delay → close dropdown]
Loading

Reviews (2): Last reviewed commit: "fix(navbar): remove disclosure aria attr..." | Re-trigger Greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

@waleedlatif1 waleedlatif1 merged commit 3774f33 into staging Mar 26, 2026
12 checks passed
@waleedlatif1 waleedlatif1 deleted the fix/images-la branch March 26, 2026 16:48
waleedlatif1 added a commit that referenced this pull request Mar 27, 2026
)

* fix(landing): fix image rendering and navbar blog/docs navigation

* fix(navbar): remove disclosure aria attributes from navigation links
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant