A modern, responsive corporate website for FIRST E&P that showcases the company’s leadership in Nigeria’s energy secto, blending powerful visuals, smooth motion, and clear structure to communicate its culture of safety, innovation, and operational excellence.

https://www.first-epdc.com

A fully responsive corporate website that communicates FIRST E&P’s identity as a leading Nigerian exploration and production company.

Showcases key operations, assets, and milestones, from production achievements to sustainability initiatives, through clear navigation and rich visuals.

Integrated with subtle motion and transitions that enhance storytelling, guiding users through the brand’s mission, leadership, and safety culture.

Built to balance credibility and warmth, professional enough for investors and regulators, yet engaging for job seekers and the public.

Designed to feel modern, structured, and easy to explore, with a clean layout that reflects the company’s precision and reliability.

Clarity meets credibility — every section reinforces FIRST E&P’s reputation as a safety-driven, innovation-led operator through precise visuals and structured storytelling.

Built with purpose — the design and motion elements aren’t decorative; they highlight milestones, leadership, and culture, giving depth to the brand narrative.

User-centered navigation — pages are organized to serve multiple audiences, investors, job seekers, and partners, making information easy to find and trust.

Consistency in brand voice — the tone, color palette, and imagery align perfectly with the company’s professionalism and energy-sector identity.

Future-ready foundation — the site is scalable and easy to maintain, ensuring FIRST E&P can continuously update achievements and sustainability progress without a redesign.

The hero section was one of the most technically detailed parts of the build. The goal was to create a cinematic introduction that immediately immerses users in FIRST E&P’s world of energy and precision, achieved through a full-width background video that plays seamlessly across devices.

To ensure smooth performance and responsiveness, I built a custom video container within Webflow that maintains aspect ratio while scaling fluidly across screen sizes. This required fine-tuning positioning and overflow rules, using absolute and relative wrappers to keep the video perfectly centered without cropping key visuals.

Fallbacks were added for mobile and low-bandwidth conditions, where a poster image replaces the video for faster loading. Layered over the container is a translucent gradient to improve text readability, paired with headline animations that fade in as the video loops subtly in the background.

The result is a hero section that balances motion, clarity, and performance, a technically complex yet visually effortless introduction that defines the site’s tone from the first second.

A dynamic metrics countdown section that highlights FIRST E&P’s achievements, such as safety milestones and production figures, using motion and numbers to build credibility and emphasize impact at a glance.

A refined testimonial section featuring quotes from company executives, adding a human and authoritative voice that reinforces leadership credibility and the company’s commitment to excellence.

A clean, well-structured footer that neatly consolidates key links, from operations and sustainability to careers and contact, ensuring easy navigation while reinforcing trust through policies and corporate transparency.

The footer was designed to serve as both a navigational anchor and a trust signal, it uses a responsive grid system that adapts seamlessly across screen sizes, ensuring accessibility on both desktop and mobile.

To maintain consistency site-wide, the footer was developed as a global symbol, allowing effortless updates to links, legal text, or contact details without redundant edits across multiple pages. Subtle hover interactions and clean typographic hierarchy reinforce the site’s professional tone, while the inclusion of policies and corporate governance links enhances transparency.

In essence, the footer not only grounds the visual design but also strengthens usability and maintainability, a practical example of Webflow’s power in blending scalability with design precision.

Beyond the homepage, the website was structured to deliver a cohesive narrative across multiple supporting pages, each crafted with clarity, consistency, and scalability in mind.

The “Who We Are” page focuses on storytelling, introducing FIRST E&P’s mission, leadership, and governance through a mix of structured grids, portrait imagery, and subtle scroll animations. Built in Webflow, reusable components were used for team profiles and section dividers, ensuring easy updates as the company grows.

The “What We Do” section dives into operations and engineering excellence, featuring project visuals, production data, and milestone highlights. Here, a responsive card layout adapts fluidly across devices, while hover states and motion cues guide users to deeper content without overwhelming them.

The “Sustainability” page emphasizes the company’s social and environmental commitments. It integrates iconography, visual data blocks, and concise storytelling, all built using Webflow’s CMS collections to allow for future content expansion (such as annual sustainability reports).

Lastly, the “Careers” page was integrated with Workable, enabling seamless job listing updates without touching the core site. This connection was designed to preserve brand continuity while automating the hiring workflow.

Together, these pages extend the homepage narrative, offering depth, credibility, and a clear sense of structure, all unified through a flexible Webflow system that makes the site easy to scale and maintain.