Contact person: Business Client

Phone:Show

Email:Show

Location: Istanbul / Uskudar, Turkey

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"1) Goal
Implement the provided Figma prototype as a responsive frontend (Desktop / Tablet / Mobile) with pixel-close accuracy. The deliverable must be HTML + CSS + Vanilla JS. The code should be clean, component-oriented, and structured to allow easy backend integration later.

2) Design Source (Figma)
The Figma prototype link will be shared via private message upon request.

Desktop / Tablet / Mobile versions are available in the design and must be implemented accordingly.

3) Responsive Requirements
Support Desktop / Tablet / Mobile layouts.
All pages and components must adapt correctly across these breakpoints.
Use Flex/Grid for layout; avoid overflow and layout breaks.
Some dynamic points on design

4) Scope (Pages / Layout)
Milestone 1
Home Page
Product Detail
Full Page Navigation Menu (overlay menu with open/close + state handling)

Milestone 2
Product Test Registration Request
Place Order (multi-step flow)
->
Membership / personal registration
Product type selection
Payment method selection
Payment processing step
Payment
Confirmation / information screen

Milestone 3
Newsletter Subscription
Authorized Dealers
Contact Form

Milestone 4
Legal Pages (KVKK, Privacy Policy, Terms of Use, Warranty)
FAQ
Login
Sign Up
My Account
My Orders (order cancellation + complete remaining payment UI/state)
Membership Details
Send Message

5) Deliverables
a) Working HTML templates for each page (or a shared layout + page templates approach)
b) Shared global CSS + minimal page/component-specific CSS
c) Minimal but sufficient Vanilla JS:

Full page menu open/close (overlay, body scroll lock, close on ESC, close on outside click)
Multi-step “Place Order” flow (step transitions, selection state, basic validation/warnings)
Forms (basic validation + error states aligned with the design)
My Account > My Orders: UI/state for “cancel” and “complete remaining payment” actions (including confirm pattern if needed)
FAQ accordion open/close (if applicable)

Note: Backend/API integration is out of scope. All actions should be implemented at UI level only; API wiring will be done later.

6) Component Approach (No Duplicate CSS/HTML)
Build reusable components for repeated elements:
Header / Footer
Navigation (desktop/tablet/mobile behaviors)
Buttons (primary/secondary/outline/disabled)
Form controls (input/select/textarea/radio/checkbox + focus/error/disabled states)
Cards / list items
Stepper (for the Place Order flow)
Modal/confirm pattern where required

7) Coding Standards
Semantic HTML: header/nav/main/section/footer
Accessibility: correct button vs. link usage; aria-label for icon buttons
CSS structure: clear naming convention (BEM-like or equivalent), minimal repetition
Performance: optimized assets; minimal CSS/JS
Browsers: modern browsers (latest Chrome/Edge/Safari)

8) Scroll-Based Interactions (Motion / Dynamic Flow)
The UI includes scroll-triggered motion effects that must be implemented in HTML/CSS/Vanilla JS.
- Certain sections will animate when they enter the viewport while the user scrolls.
- Example: an image/card should slide in from left-to-right as the section becomes visible (progressive reveal).
- Animations must be smooth and performance-friendly (no jank), and must not block scrolling.
- Responsive behavior:
- Motion and element positions must remain correct across Desktop / Tablet / Mobile.
- On smaller screens, the motion may be simplified (e.g., fade/translate shorter distance) to avoid layout issues.

9) Recommended Project Structure
/assets/ (images, icons, svg)
/css/
[login to view URL] (reset/typography/tokens)
[login to view URL] (buttons, forms, cards, navbar, stepper, etc.)
pages/ (minimal page-specific additions)
/js/
[login to view URL]
[login to view URL]
[login to view URL] (basic validation/helpers)
/pages/ (HTML files)

10) Milestone Acceptance Criteria
For each milestone delivery:
Verified Desktop/Tablet/Mobile responsiveness
Menu and all relevant interactions working
Form states (focus/error/disabled) and basic validation
No layout breaks (overflow, spacing, alignment issues)

11) Timeline & Budget
Timeline: 8–12 days (max 12 days, including weekends)
Budget: $1000 – $1200
Delivery will follow milestones 1 -> 2 -> 3 -> 4 with quick feedback loops after each stage.

12) Freelancers must sign a Non-disclosure Agreement to work on project. Freelancers agree to keep details discussed through private messages and files confidential." (client-provided description)