Skip to content

⚡ Bolt: Optimize background image rendering in home8 sections #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
anyulled wants to merge 4 commits into from
Closed

⚡ Bolt: Optimize background image rendering in home8 sections #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0b26260
⚡ Bolt: Optimize background image rendering in home8 sections
google-labs-jules[bot] Mar 6, 2026
f626f4d
⚡ Bolt: Optimize background image rendering in home8 sections
google-labs-jules[bot] Mar 6, 2026
6ae4d46
⚡ Bolt: Optimize background image rendering in home8 sections
google-labs-jules[bot] Mar 6, 2026
0791ade
⚡ Bolt: Optimize background image rendering in home8 sections
google-labs-jules[bot] Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions components/sections/home8/section3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
"use client";
import Link from "next/link";
import Image from "next/image";
import BuyTicketButton from "../../elements/BuyTicketButton";

export default function Section3() {
return (
<div
className="event8-section-area sp1"
style={{
backgroundImage: "url(assets/img/bg/header-bg20.png)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
position: "relative",
}}
>
{/* ⚡ Bolt Optimization: Replaced CSS backgroundImage with Next.js Image for automatic WebP conversion, resizing, and lazy loading. Expected impact: Faster LCP and reduced payload. */}
<Image src="/assets/img/bg/header-bg20.png" alt="Background Texture" fill style={{ objectFit: "cover", zIndex: -1 }} />
Comment on lines 10 to +15
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 6, 2026

Choose a reason for hiding this comment

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

medium

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.

<div className="container">
<div className="row">
<div className="col-lg-10 m-auto">
Expand Down
7 changes: 3 additions & 4 deletions components/sections/home8/section4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,11 @@ export default function Section4({ sponsors }: Readonly<Section4Props>) {
id="sponsors"
className="brands8-section-area sp8"
style={{
backgroundImage: "url(/assets/img/bg/header-bg20.png)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
position: "relative",
}}
>
{/* ⚡ Bolt Optimization: Replaced CSS backgroundImage with Next.js Image for automatic WebP conversion, resizing, and lazy loading. Expected impact: Faster LCP and reduced payload. */}
<Image src="/assets/img/bg/header-bg20.png" alt="Background Texture" fill style={{ objectFit: "cover", zIndex: -1 }} />
Comment on lines 18 to +23
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 6, 2026

Choose a reason for hiding this comment

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

medium

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.

<Image src="/assets/img/elements/layer1.png" className="layer1" alt="" fill priority />
<div className="container">
{!hasSponsors && (
Expand Down
7 changes: 3 additions & 4 deletions components/sections/home8/section5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,11 @@ export default function Section5({ year, speakers, totalSpeakers }: Readonly<Sec
<div
className="team8-section-rea sp1"
style={{
backgroundImage: "url(/assets/img/bg/header-bg20.png)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
position: "relative",
}}
>
{/* ⚡ Bolt Optimization: Replaced CSS backgroundImage with Next.js Image for automatic WebP conversion, resizing, and lazy loading. Expected impact: Faster LCP and reduced payload. */}
<Image src="/assets/img/bg/header-bg20.png" alt="Background Texture" fill style={{ objectFit: "cover", zIndex: -1 }} />
Comment on lines 76 to +81
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 6, 2026

Choose a reason for hiding this comment

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

medium

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.

<div className="container">
<div className="row">
<div className="col-lg-5">
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/home/home-editions.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe("Home Pages (2023-2026)", () => {
cy.visit(edition.path, { timeout: 120000 });

cy.get(".hero8-header", { timeout: 30000 }).within(() => {
cy.get("h5").should("have.length.at.least", 2);
cy.get(".hero8-header__event-line").should("have.length.at.least", 2);
cy.contains(edition.venue, { matchCase: false }).should("be.visible");
cy.contains(edition.date, { matchCase: false }).should("be.visible");
});
Expand Down
Loading