Procol Development

Challenge

Procol sells a procurement platform to enterprise buyers, and procol.ai is where prospects first meet the product. The site has to load fast on every device, carry product, solution, pricing, blog and campaign pages, and make room for event pages such as Procol Nexus 2026 without becoming a patchwork of separate sites.

Approach

Next.js gives server rendering and route-level code splitting out of the box, which is the shortest path to good Core Web Vitals for a content-heavy site. React and TypeScript make a shared component library safe to build on: a section that takes the wrong props fails at build time rather than in production. Tailwind CSS keeps styling consistent without a theme layer to maintain. Structured data and sitemaps are generated from the same content the pages render, so they cannot drift out of sync.

Solution

I built the site on Next.js with React, TypeScript and Tailwind CSS. Every page is server rendered, so the HTML arrives complete and pages load fast on phones. Pages are assembled from a shared library of typed components, so a new landing page reuses tested sections rather than starting from a blank canvas. The SEO foundations are built in: structured data, generated sitemaps, canonical URLs and optimised images.

Procol Nexus 2026 is Procol's invite-only summit for procurement, finance and IT leaders, and its page lives at procol.ai/nexus. It opens on a full-screen video hero that visitors scroll into, with Framer Motion carrying them from the opening frame into the event details and a registration form for invited guests. The video is treated as progressive enhancement, so the page stays usable while it loads. It runs on the same codebase as the rest of the site, so it is server rendered, indexable and on-brand without a separate microsite.

Results

The site is live at procol.ai, and I continue to ship new pages as the product grows. The lesson I keep coming back to: a campaign or event page does not need its own stack to feel special. Strong design, careful motion and fast server-rendered pages do the work.

It is a good example of what my Next.js and React websites service covers.

Thinking about moving a marketing site to Next.js, or launching an event page? Send me your next project and I will reply with a plan.