⚡ Bolt: Optimize background image rendering in home8 sections

[anyulled]

💡 What:
Replaced the style={{ backgroundImage: ... }} implementation with the Next.js <Image /> component using fill in home8 sections (section3.tsx, section4.tsx, and section5.tsx).

🎯 Why:
CSS background images bypass the built-in Next.js image optimization pipeline, causing raw image sizes and older formats to be served to the client. This results in larger payloads and slower rendering. Using the <Image /> component leverages modern web capabilities and optimizations out of the box.

📊 Impact:
Expected performance improvement: Faster LCP and reduced data payload. Since these images are now subject to Next.js's automated resizing and format conversion, users will download significantly less data. Images below the fold are also inherently lazy-loaded.

🔬 Measurement:
Load the homepage for the 2026 edition and verify the network tab. The background images for sections 3, 4, and 5 should now be served as optimized WebP variants via /_next/image with lower sizes compared to the original .png files.

---

PR created automatically by Jules for task 15713478743522058107 started by @anyulled

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
devbcn	Ready	Preview, Comment	Mar 6, 2026 9:50am

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the performance of the homepage by optimizing how background images are rendered in specific home8 sections. By transitioning from traditional CSS background images to the Next.js <Image /> component, the application now fully utilizes Next.js's advanced image optimization capabilities, ensuring images are served in modern formats like WebP, are appropriately sized, and are lazy-loaded. This change is expected to result in a faster Largest Contentful Paint (LCP) and a substantial reduction in data transfer for users.

Highlights

• Image Optimization: Replaced direct CSS backgroundImage usage with the Next.js <Image /> component in home8 sections (section3.tsx, section4.tsx, section5.tsx).
• Performance Improvement: Leveraged Next.js's built-in image optimization pipeline for automatic WebP conversion, resizing, and lazy loading, leading to faster LCP and reduced data payloads.

Changelog

• components/sections/home8/section3.tsx
  • Removed backgroundImage, backgroundRepeat, backgroundSize, and backgroundPosition styles from the container div.
  • Added position: "relative" to the container div.
  • Imported the Image component from next/image.
  • Inserted a Next.js Image component with src="/assets/img/bg/header-bg20.png", alt="Background Texture", fill, and style={{ objectFit: "cover", zIndex: -1 }}.
• components/sections/home8/section4.tsx
  • Removed backgroundImage, backgroundRepeat, backgroundSize, and backgroundPosition styles from the container div.
  • Added position: "relative" to the container div.
  • Inserted a Next.js Image component with src="/assets/img/bg/header-bg20.png", alt="Background Texture", fill, and style={{ objectFit: "cover", zIndex: -1 }}.
• components/sections/home8/section5.tsx
  • Removed backgroundImage, backgroundRepeat, backgroundSize, and backgroundPosition styles from the container div.
  • Added position: "relative" to the container div.
  • Inserted a Next.js Image component with src="/assets/img/bg/header-bg20.png", alt="Background Texture", fill, and style={{ objectFit: "cover", zIndex: -1 }}.

Activity

• No human activity has been recorded on this pull request since its creation.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

Warning

Rate limit exceeded

@anyulled has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 22 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a77a9725-5215-4057-ac83-f54980eb573b

📥 Commits

Reviewing files that changed from the base of the PR and between fca6a1c and f626f4d.

📒 Files selected for processing (3)

• components/sections/home8/section3.tsx
• components/sections/home8/section4.tsx
• components/sections/home8/section5.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch optimize-bg-images-home8-15713478743522058107

---

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.}

[gemini-code-assist]

Code Review

This pull request effectively optimizes background image rendering by leveraging the Next.js <Image> component, which is a great performance improvement. My review includes suggestions to enhance maintainability by moving the new inline styles to CSS classes. This will reduce code duplication across the affected sections and improve the separation of concerns.

[gemini-code-assist]

To improve maintainability and separation of concerns, it's recommended to move inline styles to CSS classes. Both the position: relative on the container and the objectFit/zIndex on the Image could be moved to classes in a shared stylesheet. This is especially beneficial since this background setup is duplicated across multiple sections.

For example, you could define these classes in a relevant .scss file:

.section-with-background {
  position: relative;
}

.section-background-image {
  object-fit: cover;
  z-index: -1;
}

Then you can apply them using the className prop, which keeps the JSX cleaner and makes the styles reusable.

[gemini-code-assist]

To improve maintainability and separation of concerns, it's recommended to move inline styles to CSS classes. Both the position: relative on the container and the objectFit/zIndex on the Image could be moved to classes in a shared stylesheet. This is especially beneficial since this background setup is duplicated across multiple sections.

For example, you could define these classes in a relevant .scss file:

.section-with-background {
  position: relative;
}

.section-background-image {
  object-fit: cover;
  z-index: -1;
}

Then you can apply them using the className prop, which keeps the JSX cleaner and makes the styles reusable.

[gemini-code-assist]

To improve maintainability and separation of concerns, it's recommended to move inline styles to CSS classes. Both the position: relative on the container and the objectFit/zIndex on the Image could be moved to classes in a shared stylesheet. This is especially beneficial since this background setup is duplicated across multiple sections.

For example, you could define these classes in a relevant .scss file:

.section-with-background {
  position: relative;
}

.section-background-image {
  object-fit: cover;
  z-index: -1;
}

Then you can apply them using the className prop, which keeps the JSX cleaner and makes the styles reusable.