Figma project https://www.figma.com/design/O1ZFkM0Ugian1oUkMcq8qX/Untitled?node-id=1733-5461&t=uwr78V10NVNWzq6F-1
🔒 TECHNICAL TASK
FRONTEND LAYOUT BASED ON Figma MOCKUP
(WITHOUT BACKEND / WITHOUT LOGIC / WITHOUT STORAGE)
1. Work Objective
To layout the user interface of the website strictly according to Figma mockups (pixel-perfect)
❗ Exclusively frontend layout, without implementing server logic, data storage, and business processes.
The result of the work must be fully ready for subsequent backend connection, but not contain its implementation.
2. Design Source
The only source of truth is Figma mockups
The layout is performed 1 to 1:
sizes
margins
fonts
colors
element states
Any deviations from Figma are prohibited without agreement
3. Frontend Responsibilities (CRITICAL)
🚫 Frontend DOES NOT HAVE THE RIGHT:
Frontend ONLY displays the interface.
4. Forms (MANDATORY)
4.1 Form Behavior
All forms:
are laid out strictly according to Figma
contain visual validation (required, error-state)
DO NOT STORE data
DO NOT SEND data to the server
4.2 Form Submission
On submit:
console.log('Form submit mock', formData);
❗ Uses JS stub, without fetch / axios / API.
5. Lists, Cards, Tables
5.1 Data Source
All lists are laid out statically
Data is hardcoded (mock-data)
HTML structure must be ready for API
Example:
<div class="items-list">
<!-- items from API later -->
</div>
❗ No logic for loading data.
6. Authorization / Registration
6.1 Strictly UI Only
Layout of login / registration screens
Fields, buttons, error states — only visually
No login/password validation
6.2 Behavior
console.log('Auth UI only');
❗ NO:
JWT
cookies
localStorage
roles
access
7. Buttons and Actions
7.1 All Buttons
7.2 Button Behavior
console.log('Button clicked');
8. Modals / Popups
9. Responsiveness
Mandatory breakpoints:
Layout strictly according to responsive Figma mockups
Arbitrary solutions are prohibited.
10. Technical Requirements
11. Preparation for Backend (BUT WITHOUT ITS IMPLEMENTATION)
Frontend must:
<!-- backend: data will be injected here -->
12. Acceptance Criteria
Work is accepted if:
The layout visually matches Figma
No network requests
No data storage
No business logic
All interactivity — stubs
Code is ready for backend connection
13. Prohibited Without Agreement
❌ Independently:
EVERYTHING MUST WORK AND LOOK LIKE IN FIGMA!