Recruitment & Hiring Portfolio Website Template
Headhunt is a single-page landing page template built for construction executive search firms. It combines a hearthstone search hero, placed-executive case study sections, and a side-by-side comparison table to earn trust before asking for anything. The Electric Indigo color system and Team and People creative direction make it feel like a boardroom conversation, not a job board.
by Rocket studio
Quick summary
Headhunt is a premium landing page template for construction executive search firms. It opens with a cycling-ghost-text search field set against a black-and-white portrait mosaic, then walks visitors through placed-executive mini case studies and a direct comparison table. The page is built to convert both hiring companies and senior construction executives exploring confidential moves.
Who this template is for
This template is designed for executive search firms that specialize in the construction industry. It speaks directly to the firms doing the recruiting and to the senior-level candidates they serve.
- Construction search firms placing Project Directors, VPs of Preconstruction, Safety Executives, and similar roles at large general contractors or specialty subcontractors
- Retained search practices serving ENR Top 400 general contractors, specialty subs scaling past $200 million, and private-equity-backed platforms that need a COO by a specific quarter
- Senior construction executives considering a confidential move who want to understand the firm's process before making contact
What problem this template solves
Most executive search landing pages look like polished brochures with no proof behind the claims. For a $300,000 hire, a hiring executive needs more than a logo and a tagline before picking up the phone.
- There is no way to show candidate caliber or retention data without a structured comparison format
- Contingency recruiters and internal HR teams are the default choice, but their limitations are rarely explained side by side
- The page has to earn trust from two very different visitors: the company with the open seat and the executive thinking about leaving
What you get with this template
This template delivers a complete, single-page layout that builds credibility through people, proof, and a structured search process. Every section moves the visitor closer to one of two clear actions.
- A hero section with a centered search box, cycling ghost-text role titles, and a parallax black-and-white portrait mosaic background
- Placed-executive mini case studies paired with a three-column comparison table contrasting this firm's process against contingency recruiters and internal HR efforts
- Full-bleed recruiter portrait sections that highlight field credentials, a results and retention metrics wall, and a three-step confidential search form with a secondary candidate path
Feature list
This template includes the following built-in capabilities, all drawn directly from the design brief.
Cycling Ghost-Text Search Hero
The header centers a single oversized search input on a warm hearthstone field. Ghost text cycles through real construction titles such as Chief Estimator, VP of Field Operations, and Director of Business Development. A slow-moving parallax portrait mosaic fills the background with candid black-and-white imagery.
Placed Executive Case Study Blocks
Each scroll step introduces a placed executive as a brief, focused mini case study. These blocks anchor the comparison table rows with real metrics, so the data feels grounded rather than generic.
Three-Column Comparison Table
The comparison table sets this firm's process directly against contingency recruiters and internal HR efforts. Columns cover time-to-fill, candidate caliber, retention at 24 months, and confidentiality protocols. Hover states activate on each row using the live-wire violet accent.
Full-Bleed Recruiter Portrait Sections
Between comparison tables, full-bleed portrait sections spotlight the firm's own recruiters. Each recruiter is a former superintendent, estimator, or project engineer, reinforcing the firm's language and credibility through lived field experience.
Three-Step Confidential Search Form
The primary call to action leads to a multi-step form. Step one captures role title and seniority level. Step two captures company size and project backlog range. Step three collects a direct phone number and preferred contact window. A secondary candidate path asks only for a LinkedIn URL and a geography dropdown.
Sticky Violet Call-to-Action Navigation
After the first scroll, the primary call-to-action button pins to the navigation bar. It stays visible in live-wire violet throughout the full page scroll, keeping the conversion action accessible at every section.
Page sections overview
| Section | Purpose |
|---|---|
| Hero Search Field | Opens with cycling ghost text and a portrait mosaic to frame the firm's identity |
| Placed Executive Cases | Mini case studies that introduce placed talent and anchor the comparison data |
| Comparison Table | Contrasts this firm's process against contingency recruiters and internal HR |
| Recruiter Portraits | Full-bleed section that highlights field-credentialed recruiters by name and background |
| Results and Retention | Metrics wall showing 24-month retention data and key placement statistics |
| Confidential Search Form | Three-step form for hiring companies plus a quieter candidate entry path |
| Footer | Linear single-row footer with essential links and contact information |
Design & branding system
The visual identity follows a Community Hearth theme expressed through an Electric Indigo color system. The palette balances traditional boardroom authority with an unexpected modern accent that signals this firm operates differently.
- Deep boardroom navy (#1A1040) dominates section backgrounds and dividers, charged indigo (#4B0082) marks structural transitions, and warm hearthstone (#F5E6CC) carries body text panels and testimonial cards
- Live-wire violet (#7C3AED) pulses through every interactive element including buttons, hover states, and data highlights, behaving like a UV accent wall in a mahogany conference room
- Typography pairs Fraunces serif display headings with DM Sans body text, reinforcing the contrast between gravitas and readability
Mobile & speed optimization
The template is designed desktop-first to match how the target audience reviews vendor pages, typically on a laptop at a desk. It is also built to remain fully responsive on smaller screens.
- Scroll-linked reveals use Intersection Observer so animations trigger only as sections enter the viewport, keeping the experience smooth without front-loading heavy scripts
- The hero uses a static background with CSS animation for the parallax effect, avoiding video embeds that slow initial load
- Counter animations on the retention metrics wall fire on scroll entry, keeping motion purposeful and tied to content rather than decorative
How this template helps you convert
The page is structured so trust is built before any ask is made. Visitors see proof of placed executives and firm credentials before the form ever appears.
- The comparison table does the sales work passively. It answers the most common objection, which is why not use a contingency recruiter or handle it internally, without requiring a sales call.
- The recruiter portrait sections create personal familiarity. A hiring executive who recognizes a former superintendent in the recruiter bio is far more likely to start a confidential search than one reading a generic firm overview.
- The two-path conversion flow serves both visitor types. Companies follow the three-step search form. Executives follow the quieter candidate path. Neither audience is forced into a flow built for the other.
Other information about this template
This template is built specifically for the construction executive search niche and reflects the industry's preference for relationship-driven, confidential hiring processes.
- The page uses USA localization conventions including USD currency references and MM/DD/YYYY date formatting throughout
- Animation intensity is set to high, with scroll-linked reveals, counter animations on retention data, and cycling ghost text in the hero all included in the template layout
- The footer follows a linear single-row pattern, keeping the bottom of the page clean and professional without adding an extra navigation layer




Theme
Community Hearth
Creative direction
Team & People
Color system
Electric Indigo
Style
Comparison Table
Direction
Recruitment/Hiring
Page Sections
Cycling Ghost-text Search Hero
Placed Executive Case Study Blocks
Three-column Comparison Table
Full-bleed Recruiter Portrait Sections
Three-step Confidential Search Form
Sticky Violet Navigation Call to Action
Related questions
Who are the two types of visitors this template is designed for?
What makes the comparison table different from a standard feature list?
Is this template suitable for both desktop and mobile users?
How does the sticky call-to-action button work?
What is the purpose of the recruiter portrait sections?