Added screenshots
Screenshot analysis:
- Screenshot 1: Clean white nav, hero with a diagonal navy panel on the left holding the wordmark + cityscape icon, then 4 side-by-side industrial photography panels with angled cuts between them. Below: "WHO WE ARE" with an orange underline accent + a circular gradient tagline graphic on the right. "MARKETS WE SERVE" on a pale blue-gray tinted background with image cards.
- Screenshot 2: Masonry-style news grid with full-bleed images and white bold text overlays. Dark navy CTA banner. Multi-column white/navy footer.
Key design language to apply: deep navy primary, white body, orange accent underline, diagonal image panels, light blue-gray section backgrounds, clean corporate typography, uppercase section labels with accent lines.
Now I have everything I need. I'll generate the imagery, update globals.css with the Saint-Gobain-inspired navy/white/orange palette, and rebuild all homepage sections to match the reference closely.
Now update the globals.css to match the Saint-Gobain-inspired palette — deep navy, white, orange accent:
The globals.css already has a Saint-Gobain-inspired palette from a previous session. Now I'll rewrite the homepage components to closely match the reference layout.
Good — I now have the full picture. The existing components already use the SG palette tokens but the structure doesn't match the reference. I need to:
- Hero — diagonal navy panel left + 4 side-by-side photo panels (like the screenshots)
- "Who We Are" — white bg, left-aligned bold heading with orange underline + body text + right circular tagline
- "Markets We Serve" — pale blue-gray section, 3-up image cards with text overlays
- News grid — full-bleed image cards in a masonry-style grid
- CTA banner — dark navy, uppercase bold question, outlined button
Now rewrite platform features as a news grid (matching the SG news card grid from the screenshots):
Now rewrite the CTA section and featured products to match the SG "Didn't find what you're looking for" banner and a leaner product strip:
Now rewrite featured products as a clean horizontal strip with subtle styling:
Now reorder the homepage sections to match the Saint-Gobain page flow: Hero → Who We Are → Markets → News grid → CTA banner, and update the layout to add the rainbow gradient bar positioning correctly:
Finally update the root layout <html> background to white and add the sg-orange utility to globals since it's used in the new sections:
The background is already correctly set to bg-background which resolves to white. The homepage is now fully restructured to match the Saint-Gobain reference:
- Hero — diagonal navy brand panel left (with GEAR wordmark + cityscape outline + slide arrows) and four industrial photo panels with angled cuts between them, topped with the Saint-Gobain-style multicolour rainbow gradient bar
- WHO WE ARE — white background, bold left-aligned heading with an orange underline accent, descriptive copy, and a circular gradient ring tagline on the right
- MARKETS WE SERVE — pale blue-grey section with three full-bleed image cards (Construction, Mobility, Industry) with bold uppercase white text overlays
- TOP PRODUCTS — clean white product strip with hover blue accent lines
- LATEST NEWS — 4×2 full-bleed image card grid with bold uppercase white titles and category labels, exactly matching the SG news grid
- CTA banner — deep navy, bold uppercase question, outlined white "CONTACT US" button
Can we adjust the hero. The imagery can be square. Its just the text seperating the imagery that should have a diagonal white divider
The fix is clear: make each photo panel flex: none with a fixed square aspect ratio, keep them as plain rectangles, and put the diagonal cut only on the navy text panel's right edge — so it's the text block that has the angled divider into the imagery, not the images themselves.
The navy brand panel now uses clipPath: polygon(0 0, 100% 0, 82% 100%, 0 100%) to create the diagonal cut on its right edge only — the angled white divider comes from the panel's background meeting the white page behind it. The four photo panels are plain square rectangles with aspectRatio: 1/1 and flex: 1 1 0, so they size equally and stay square without any clipping or skewing applied to the images themselves.
Just use this banner instead of the hero element
