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 take the team's Figma designs from handoff to production. The mandate was clear: pixel-perfect implementation, full responsiveness from 320px mobile to wide desktop, and a performance pass to ensure the page loaded fast and scored well on Core Web Vitals — particularly LCP, the metric that most directly affects first impressions for developers landing from job boards and LinkedIn.
BetterPros operates within an existing React design system, so every component had to integrate cleanly with established patterns, token-based styles, and the team's component library conventions — without introducing drift or technical debt.
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-Code Fidelity
The design team had specified exact spacing tokens, type scales, and breakpoint behaviors in Figma. Getting a pixel-perfect match — especially on edge cases like long job titles, tight mobile widths, and multi-line tag chips — required careful measurement and iteration rather than approximation.
Complex Responsive Breakpoints
The job listings grid needed to transition cleanly from a 3-column desktop layout to a 2-column tablet view to a single-column mobile list — with card heights remaining equal in each column, and tag chips wrapping gracefully without breaking card alignment. Pure CSS grid with carefully placed media queries solved it.
Core Web Vitals & LCP
Developers arriving from job boards are impatient. The hero section's LCP element — the main headline — had to be rendered as fast as possible. This meant font preloading, critical CSS inlining, deferred non-essential scripts, and image optimization on any above-the-fold assets. The page hit Lighthouse 95+ after the performance pass.
Built with a modern React setup
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.
Component Planning
With the full design understood, I planned the React component tree before building — identifying which UI elements should be standalone components versus inline JSX, where props needed to drive visual variation (like job card states), and how the layout grid should be structured to 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.