Front-End Designer/Developer (Figma + HTML/Tailwind) — Resume Builder (Rezi.ai + App UI)
Budget: $250 – $750 CAD
Goal: Produce high-fidelity UI/UX mockups and responsive HTML + Tailwind CSS pages for a resume builder platform inspired by Rezi.ai (public site) and app.rezi.ai (editor/dashboard).
No backend or functionality required — static design deliverables only.
Scope (Design + Static Front-End Only)
Design System (in Figma): typography, color palette, spacing, components (buttons, inputs, cards, tabs, modals, dropdowns, tooltips).
Mockups & Wireframes (desktop only) for both marketing site and application.
Static HTML + Tailwind CSS implementation of all approved mockups.
Responsive, accessible, and print-ready where required (resume templates).
Screens / Pages to Deliver
Marketing Site (like rezi.ai)
Landing page (hero, value props, CTAs, screenshots)
Features page (step-by-step product walkthrough)
Pricing page (plans comparison, CTA buttons)
About / Contact page
Blog/article listing + detail page (static layout)
FAQ + Help center mockup
Footer + Header components
Application (like app.rezi.ai)
Auth & Account
Sign Up, Login, Forgot Password (with OAuth placeholders)
Profile Dashboard (saved resumes, account settings, subscription info)
Resume Builder
Editor Layout:
Sidebar (sections: Summary, Experience, Education, Skills, Projects, Certifications, Links, Custom)
Main editor (structured form fields for each section)
Resume preview pane (shows selected template, static only)
Section reorder UI (drag-drop visual mockup)
Content suggestions placeholder (AI bullet points area)
Resume Templates
10 professional templates (HTML + Tailwind)
Print-ready (A4 & Letter)
Theme-able (fonts, colors, spacing via Tailwind tokens)
Clean layout, ATS-friendly, export-ready
Exports & Sharing (Static)
Download/Export buttons (placeholders only)
Share link modal
Payments & Subscription
Pricing page (Free vs Pro tiers)
Checkout mock (Stripe placeholder)
Subscription status (upgrade/downgrade screen)
Admin Dashboard (Static)
User management
Subscriptions management
Template management
Analytics mock (charts placeholders)
Acceptance Criteria
Pixel-perfect match of Figma mockups → HTML + Tailwind.
Responsive: Mobile-first, scales up to large desktop.
Accessible: Proper ARIA roles, keyboard focus states, color contrast.
Resume Templates Print-Ready:
Correct @page margins & print styles
Page-break hints for multi-page resumes
Works in browser "Print to PDF"
Deliverables
Figma file with all screens (marketing + app)
HTML + Tailwind static pages for each screen
10 resume templates as separate HTML pages
Documentation:
Design tokens (color, typography, spacing)
Component guidelines
Print CSS notes for resume templates
Bonus Points
Dark mode variant
Micro-interactions (hover, focus, reorder ghost states)
Example seeded resumes in templates
Tailwind components documented in a mini styleguide
No backend or functionality required — static design deliverables only.
Scope (Design + Static Front-End Only)
Design System (in Figma): typography, color palette, spacing, components (buttons, inputs, cards, tabs, modals, dropdowns, tooltips).
Mockups & Wireframes (desktop only) for both marketing site and application.
Static HTML + Tailwind CSS implementation of all approved mockups.
Responsive, accessible, and print-ready where required (resume templates).
Screens / Pages to Deliver
Marketing Site (like rezi.ai)
Landing page (hero, value props, CTAs, screenshots)
Features page (step-by-step product walkthrough)
Pricing page (plans comparison, CTA buttons)
About / Contact page
Blog/article listing + detail page (static layout)
FAQ + Help center mockup
Footer + Header components
Application (like app.rezi.ai)
Auth & Account
Sign Up, Login, Forgot Password (with OAuth placeholders)
Profile Dashboard (saved resumes, account settings, subscription info)
Resume Builder
Editor Layout:
Sidebar (sections: Summary, Experience, Education, Skills, Projects, Certifications, Links, Custom)
Main editor (structured form fields for each section)
Resume preview pane (shows selected template, static only)
Section reorder UI (drag-drop visual mockup)
Content suggestions placeholder (AI bullet points area)
Resume Templates
10 professional templates (HTML + Tailwind)
Print-ready (A4 & Letter)
Theme-able (fonts, colors, spacing via Tailwind tokens)
Clean layout, ATS-friendly, export-ready
Exports & Sharing (Static)
Download/Export buttons (placeholders only)
Share link modal
Payments & Subscription
Pricing page (Free vs Pro tiers)
Checkout mock (Stripe placeholder)
Subscription status (upgrade/downgrade screen)
Admin Dashboard (Static)
User management
Subscriptions management
Template management
Analytics mock (charts placeholders)
Acceptance Criteria
Pixel-perfect match of Figma mockups → HTML + Tailwind.
Responsive: Mobile-first, scales up to large desktop.
Accessible: Proper ARIA roles, keyboard focus states, color contrast.
Resume Templates Print-Ready:
Correct @page margins & print styles
Page-break hints for multi-page resumes
Works in browser "Print to PDF"
Deliverables
Figma file with all screens (marketing + app)
HTML + Tailwind static pages for each screen
10 resume templates as separate HTML pages
Documentation:
Design tokens (color, typography, spacing)
Component guidelines
Print CSS notes for resume templates
Bonus Points
Dark mode variant
Micro-interactions (hover, focus, reorder ghost states)
Example seeded resumes in templates
Tailwind components documented in a mini styleguide