Fix Responsive Content CSS

Frontend CSS Specialist - Equee Public Website

Project Overview

Equee is a licensed financial advice platform for superannuation. We've built the functional components for our public-facing website but need an expert CSS developer to ensure pixel-perfect implementation of our Adobe XD designs.

Github repository: to be provided to the successful bidder

Live Site: http://equee-web-app.s3-website-ap-southeast-2.amazonaws.com/ (in development)

Current State

React 18 + TypeScript architecture ✅
All functional components built and working ✅
Equee design system established (CSS variables, utilities) ✅
Basic responsive layouts implemented ✅
Gap: CSS styling doesn't match Adobe XD designs precisely

Your Mission

Review all pages against Adobe XD designs and refactor CSS to achieve pixel-perfect implementation. Some components (e.g., "The Process" section) have significant gaps, while others need minor adjustments.

Scope

Pages Included
- Home page (10 components / sections)
- Contact page
- Financial Services Guide page

Key Responsibilities

Audit - Compare current implementation against Adobe XD designs
Refactor - Update CSS to match designs exactly (spacing, typography, colors, layouts)
Responsive - Ensure mobile and desktop designs are implemented; use best judgment for tablet
Maintain - Follow established patterns in the codebase (style guide will be provided to the successful bidder)
Document - Note any design decisions made for tablet breakpoint

Technical Requirements

Must Follow
Style Guide: Comprehensive rules provided in EQUEE_FRONTEND_STYLE_GUIDE (to be provided)
CSS Variables: Use only predefined variables from src/styles/variables.css
No hardcoded values: Colors, spacing, fonts, etc. must use CSS variables
Established patterns: Reuse existing utilities and patterns where possible
Mobile-first approach: Base styles for mobile, enhance for desktop
Naming conventions: BEM-like class naming (component-name-element)

Tech Stack

React 18 with TypeScript
Vite
Custom CSS (no CSS-in-JS, no frameworks like Tailwind)
Node.js v24.5.0

Code Quality Standards

Named exports only (no default exports)
.tsx extensions in imports
CSS files colocated with components
Mobile: @media (max-width: 768px)
Desktop: @media (min-width: 769px)
Large desktop: @media (min-width: 1200px)

Deliverables

CSS refactoring for all public pages matching Adobe XD designs
Cross-browser testing (Chrome, Safari, Firefox, Edge)
Responsive verification (mobile, tablet, desktop)
Documentation of any tablet-specific design decisions made
Clean git commits with descriptive messages

What We Provide

Complete codebase with functional components
Adobe XD design files (mobile + desktop)
Comprehensive style guide
Design system PDF
CSS variables and utilities already established
Technical support as needed

Example Gap (see uploaded images)
Mobile Responsive Formatting:

Current: Only works on larger phone sizes
Required: Appropriate formatting for all phone sizes
The Process Section:

Current: Basic implementation with functionality working
Required: Match exact layout, spacing, colors, and interactions from XD design

Footer Colouring:

Current: Incorrect colouring
Required: Match XD colouring

How to Apply

Please provide:

Portfolio showcasing pixel-perfect CSS implementations
Experience with React/TypeScript projects
Availability and estimated timeframe
Brief assessment - After reviewing the style guide and PDF, provide initial thoughts on scope

Questions?
Contact details will be provided

Note: This is a design implementation role, not a design role. All design decisions have been made. We need an expert CSS developer to execute the existing designs flawlessly while maintaining code quality and following established patterns.