Skip to content

Sections

Masthead

The homepage opening, rebuilt from the live site: the claim set bottom-left in the wide column, beside the animated gradient and the wordmark cropped oversize across it. This is marketing chrome, not an app-page header. The eyebrow and buttons are opt-in props — the live masthead runs without either.

npx shadcn@latest add https://gpc.example.com/r/masthead.json
Desktop · 1280pxOpen full page

Image copy

A copy block against a photograph, held inside the page container rather than bleeding to the edge. Three independent switches, matching the live component: `tone` for the light or dark ground, `flipped` to lead with the image, and `offCenter` to widen the image column against the copy. The four combinations shown here are the same four variants the site ships.

npx shadcn@latest add https://gpc.example.com/r/image-copy.json
Desktop · 1280pxOpen full page

Services grid

Peer services separated by rules rather than boxes. If one service matters more than the others, do not use a grid at all.

npx shadcn@latest add https://gpc.example.com/r/services-grid.json
Desktop · 1280pxOpen full page

Process rail

Numbered because the order is the content. The heading sticks on wide viewports so the steps stay anchored to what they belong to.

npx shadcn@latest add https://gpc.example.com/r/process-rail.json
Desktop · 1280pxOpen full page

Process cards

The four stages as an expanding row: one card open at a time, its image wiping in from the top-left while the title steps up to display size. Click or tab to a card to open it; autoplay advances on a countdown ring and pauses on hover or focus. Open and closed are both real CSS states, so it reads correctly before hydration.

npx shadcn@latest add https://gpc.example.com/r/process-cards.json
Desktop · 1280pxOpen full page

Testimonial and logos

One quote carrying the weight, the client wall carrying the breadth. Set the quote in the display face; it should be the loudest thing in the section.

npx shadcn@latest add https://gpc.example.com/r/testimonial-logos.json
Desktop · 1280pxOpen full page

Newsletter

The writing block, rebuilt from the live home page. It signposts the newsletter rather than collecting an address — the footer form does that. Full-bleed rules and edge verticals keep it reading as a ruled sheet over the gradient, not a boxed card.

npx shadcn@latest add https://gpc.example.com/r/newsletter-cta.json
Desktop · 1280pxOpen full page

Article list

An editorial list, not a three-card grid. Dates sit in the margin so titles form one scannable column.

npx shadcn@latest add https://gpc.example.com/r/article-cards.json
Desktop · 1280pxOpen full page