BetterPros
Careers Page
A careers page built to attract the best
BetterPros is a US-based tech staffing platform that connects top Latin American developers with high-growth US companies — fully remote, top-of-market pay, and US-style work culture. Their careers page at betterpros.com/careers is the primary conversion surface for attracting developer talent across the region.
I was brought in as a Frontend Developer to build the careers page on WordPress using Elementor and Crocoblock — translating the Figma designs into a fully responsive, pixel-accurate site. The mandate was clear: match the designs precisely, ensure the page performed well on mobile, and integrate the marketing stack the team was already using.
On top of the build, I set up HubSpot for lead capture and form tracking, and configured Yoast SEO to ensure the page was properly indexed and optimized for organic traffic from developers searching for remote roles in LATAM.
One page, built to convert
The careers page is BetterPros' main talent acquisition surface — every section was designed to communicate trust, opportunity, and a clear call to apply.
Hero & Value Proposition
A strong hero section communicating BetterPros' core offering: top-of-market compensation for Latin American developers working with US companies. Bold headline, supporting copy, and a primary CTA — all pixel-matched to the Figma spec with precise typography and spacing.
- Full-width hero with headline and supporting subtext
- Primary CTA button with hover and focus states
- Responsive layout — stacks gracefully on mobile
- LCP-optimized — hero content is above the fold and fast
Job Listings Grid
A filterable, card-based job listings section displaying open roles. Each card surfaces the role title, tech stack tags, location tag (Remote), compensation range, and a clear apply link — designed to scan quickly and communicate BetterPros' quality signal at a glance.
- Responsive card grid — 3 columns desktop, 1 column mobile
- Stack tag chips with consistent sizing and wrapping
- Hover states and keyboard accessibility on all cards
- Graceful empty state when no roles match filters
Why BetterPros — Benefits Section
A structured benefits grid explaining why top developers choose BetterPros — US-rate compensation, fully remote, career growth, and a community of senior peers. Iconography, concise copy blocks, and a clean grid layout make the value proposition immediately scannable.
- Icon + heading + copy benefit cards
- 2-column to 4-column responsive grid
- Consistent card height across all breakpoints
- Aligned with existing design system tokens
CTA Section & Application Flow
A high-contrast closing CTA section driving developers to apply or connect with the BetterPros team. Includes a brief reassurance copy block, a primary action button, and a secondary link for developers not yet ready to apply — designed to capture intent at every stage.
- Full-width section with coral gradient background
- Primary and secondary CTA variants
- Pixel-perfect Figma match on all screen sizes
- Smooth scroll anchor from hero CTA to application section
Page at a glance
Visual representations of the four core sections built for the BetterPros careers page.
Hero Section
Value proposition headline, supporting subtext, and primary CTA — above the fold on all screen sizes.
Job Listings Grid
Responsive card grid with role title, stack tags, location, and compensation — designed to scan fast.
CTA Section
High-contrast closing section with coral gradient — primary and secondary actions for every intent level.
Mobile View (320px+)
Fully responsive from 320px — single-column layout, touch-friendly tap targets, no horizontal overflow.
Three real engineering challenges
Translating design into production always surfaces challenges the mockup doesn't show. Here's what this project required.
Figma-to-Elementor Fidelity
Translating exact spacing, type scales, and breakpoint behaviors from Figma into Elementor — without the flexibility of custom code — required working within the builder's constraints while still hitting pixel-accurate results. Crocoblock's JetElements extended Elementor where native widgets fell short.
Responsive Layout in a Page Builder
The job listings grid had to transition cleanly from a 3-column desktop layout to a 2-column tablet view to a single-column mobile list — all managed through Elementor's responsive controls and custom CSS overrides where the builder's defaults didn't hold up at edge cases.
HubSpot & Yoast Integration
Setting up HubSpot forms and tracking alongside Yoast's SEO configuration required careful attention to page structure — ensuring meta tags, schema, and Open Graph were correctly set, and that HubSpot's scripts didn't conflict with page load performance or the WordPress theme.
Built with WordPress & Elementor
Handoff to production
Figma Review & Specification Audit
Before writing a single line of code, I walked through the full Figma file systematically — mapping every component, annotating spacing values, flagging ambiguities, and identifying which elements were shared across breakpoints versus breakpoint-specific. I raised clarifying questions early to avoid costly mid-build corrections. A solid handoff review saves hours downstream.
Elementor Structure Planning
With the full design understood, I mapped out the Elementor section and widget structure before building — identifying which sections needed custom CSS overrides, where Crocoblock's JetPlugins would extend native Elementor widgets, and how the layout grid should handle content of unknown length. Planning the architecture first made the build predictable.
Development — Desktop to Mobile
I built each section desktop-first, establishing the full-fidelity layout before adding responsive breakpoints. Each component was compared side-by-side with its Figma frame at 100% zoom — checking typography, spacing, color, and interactive states. Components were integrated into the existing design system token structure, keeping codebase consistency intact.
Cross-Browser & Device QA
QA covered Chrome, Firefox, Safari, and Edge — across physical mobile (iOS Safari, Android Chrome), tablet viewport simulation, and multiple desktop resolutions. Particular attention was paid to Safari rendering quirks on flexbox and CSS gap, which required targeted fixes. The layout was verified at 320px, 375px, 768px, 1024px, 1280px, and 1440px.
Performance Pass
After the layout was locked, I ran a full Lighthouse audit and addressed every finding that was within scope: font display swap, preconnect hints for external resources, deferred non-critical scripts, and compression of any decorative images. The focus was on LCP — getting the hero content painted as fast as possible for users arriving cold from external links. Final score: 95+ across Performance, Accessibility, and Best Practices.
Delivered on time, built to last
From Figma handoff to production in 3 weeks — pixel-perfect, fully responsive, and performing well where it matters most.