Сверстать сайт в html/css

The site is built on the Next.js framework (based on React). All points in the technical specification need to be completed. The technical specification is attached in the file. I look forward to your proposals.

there is a website https://perfect-okna.com.ua/ main problems: SPEED ANALYSIS (Performance) Key issues (typical for such websites): · Large unoptimized images (JPEG/PNG without compression, no WebP). · Lack of lazy loading for images in the catalog. · Non-minified CSS/JS, many unnecessary libraries connected. · No caching at the browser level, CDN not used. · Server does not provide compression (gzip/brotli). · HTTP/2 not used. Checklist "Speed": · Compress all images, convert to WebP and add fallback. · Set up lazy loading for images (loading="lazy"). · Minify HTML, CSS, JS. Combine files where appropriate. · Enable Gzip/Brotli on the server. · Set cache headers (Cache-Control, Expires) for static content. · Connect CDN (Cloudflare for free). · Remove unnecessary plugins/scripts (especially if WordPress). · Use asynchronous loading for non-critical scripts (async/defer). On the homepage, there is often no clear structure "who we are - what we offer - why choose us - how to order". · The window constructor (if available) can be confusing, without hints, the final price is not visible immediately. · On mobile devices, the menu may shift, the calculator is not adapted for fingers. · Feedback forms are long, without phone masking, without validation. · No "quick actions": call with one click, messengers, chat. · Lack of "breadcrumbs" on internal pages. · Create a mobile version without horizontal scrolling, buttons no less than 48x48 px. · On the homepage, add a price calculator "in 3 clicks" immediately. · In the header – clickable phone number (tel:), messengers (Viber/Telegram) with icons. · Forms: only name + phone + "comment" field (optional). Phone mask. · Add a floating button "Quick Order / Calculate Cost" on mobile. · On product cards – "Buy in 1 click" button (opens a mini-form). · Add "breadcrumbs", improve navigation through sections. · Check text contrast, font size (at least 14 px on mobile). · No urgent offer (time-limited promotions). · Insufficient social proof (reviews, video reviews, number of completed works). · It is not explained that the price is "turnkey" (installation, delivery, dismantling). · No CTA (call to action) on every screen. Add a "counter" – how many clients have already chosen, how many windows installed. · Video reviews from real clients (short, 30–60 sec). · Block "Calculate in 30 seconds" right on the first screen. · Show the "turnkey" price: window + installation + delivery, with a transparent breakdown. · Promotions with a timer: "15% discount for orders by the end of the week". · Popup window with an offer for a free measurement when the user tries to close the tab. What to do: · Interactive 3D window configurator (color change, opening, glazing) – more on this later. · Mini-game or test: "Which window is suitable for your apartment?" · Cases: photos "before/after" in real interiors. · Guides: "How to choose windows for a noisy street", "Energy saving: which glazing to choose". · Heating savings calculator after window replacement. Urgent (Critical) 1. Mobile adaptation of the entire site, especially the constructor and cart. 2. Speed up loading: image compression, caching, CDN. 3. Quick order button (One Click Buy) on all product cards. Popup chat with the ability to leave a message in Viber/Telegram. 5. Valid HTTPS and redirect from HTTP → HTTPS for all pages. 6. Microdata Schema.org (Organization, Product, BreadcrumbList, Review). Important (High) 1. Update the homepage: add USP, promotions, videos, quick calculator. 2. "Promotions" page with a timer, updated monthly. 3. Callback form – simple, with a mask and automatic city code substitution. 4. CRM integration (e.g., amoCRM / Bitrix24) for automatic lead capture. 5. Add online payment (LiqPay, WayForPay) at least for prepayment for measurement. 6. SEO URL structure: /produkciya/plastikovi-vikna/, not /?page_id=123. Desired (Medium) 1. Expand the blog with articles for key queries (5 articles at once). 2. Interactive constructor with 3D view (separate block below). 3. Product filter by characteristics (size, profile, color, price). 4. Personal client cabinet, where you can see the order status. 5. Generation of PDF commercial proposal directly on the site. HOW TO IMPROVE THE CONFIGURATOR (Window Configurator) If it is currently a regular form with dropdown lists – this is outdated. A modern 3D configurator is needed: Mandatory features: · Step-by-step wizard: 1) room selection, 2) dimensions, 3) number of sashes, 4) color, 5) glazing, 6) fittings, 7) mosquito net. · Instant price recalculation at each step (AJAX). · 3D visualization (Three.js or ready js framework). · Saving the selected configuration in PDF (server-side generation) and sending to email. · Button "Send calculation to manager" – and a card with all parameters flies to CRM. · Ability to share a link to your configuration (for example, to send to husband/wife). · Full adaptation for touch gestures (swipe to rotate the 3D model on the phone) Price is negotiable!

Project Meta Implement Viber integration without using third-party CRM systems. All work with messages should be done directly in our internal CRM based on BAS / 1C 8.3.Current System BAS / 1C 8.3 Custom configuration "Customer Service" Database of over 40,000 subscribersRequired Implementation Integration through an official Viber Business provider (TurboSMS, GMS Worldwide, or another agreed service). The button "Write to Viber" in the subscriber card. Sending messages directly from BAS. Receiving incoming messages via Webhook. Automatic linking of messages to the subscriber by phone number. Complete preservation of correspondence history in the subscriber card. Displaying the time, message status, and the manager who responded. Simultaneous work of multiple managers. Message templates for quick responses. Assistance with setting up the Viber provider, API keys, and Webhook. Transfer of all source code and settings after the work is completed.Acceptance Conditions The work is considered completed after successful testing of all functions on the working database and transfer of the source code.Guarantee 1 month warranty for fixing bugs related to the implemented functionality. Further modifications are carried out by separate agreement.Result After the project is completed, managers should be able to fully work with Viber directly in BAS: write to clients, receive responses, view correspondence history, and communicate without using third-party CRMs. All source code, modifications, API keys, and settings will be transferred to the client after the project is completed.

The form already exists and works. Only the logic for the home cleaning service needs to be changed. Other forms and services should not be touched. 1. The first step of the formCurrently, the client selects:- the area of the dwelling (m²);- type of cleaning:- One-time; - weekly; - every 2 weeks; - every 4 weeks.This step should remain unchanged.2. Change the calculation logicCurrently, the system automatically calculates or recommends the number of hours based on the area of the dwelling.This functionality needs to be completely removed.The area of the dwelling should remain only as information in the application and not affect the cost calculation.3. Add selection of the number of hoursAfter selecting the type of cleaning, the client should select the number of hours:- 1 hour- 2 hours;- 3 hours;- 4 hours;- Other number of hours. If "Other number of hours" is selected, the client should be able to enter the required number manually.4. New cost calculationThe cost should be calculated solely based on:- type of cleaning;- number of hours.Rates after RUT:- One-time cleaning — 260 SEK/hour- Every 4 weeks — 250 SEK/hour- Every 2 weeks — 240 SEK/hour- Weekly cleaning — 230 SEK/hour5. Displaying the costAfter selecting the number of hours, it should automatically show:- the price before RUT;- the price after RUT.For regular cleaning, it is preferable to show the standard price crossed out, and next to it — the new price after the discount.For example:/780 SEK/720 SEKor/780 SEK/690 SEK6. Add a noteAdd the following text under the form:"For addresses located more than 15 km from Skellefteå, an additional travel fee may apply. The exact cost is agreed upon individually after receiving the application."7. Preserve the existing application logicAfter making changes, it is essential to preserve all existing functionality.Currently, after placing an order, the application is sent:- to the Telegram bot;- via email.This functionality should work the same as it does now.All final fields of the form should also remain unchanged, including: contact fields that are already in the form. All data should be transmitted in the application, including:- area of the dwelling;- type of cleaning;- number of hours;- cost before RUT;- cost after RUT;- client contact details.8. Ability to change prices independentlyIt is desirable to implement the rates in such a way that in the future I can independently change the hourly rate for each type of cleaning without modifying the code.I would like the prices to be editable through the admin panel or another simple method.9. What I expect from the performer- Check the existing form code.- Make changes only to the home cleaning form.- Do not disrupt the operation of other forms and pages of the site.- Check the accuracy of calculations.- Ensure that all data is correctly sent to the Telegram bot and email.- Check the form's operation on mobile devices and computers.Please write:- the cost of execution;- the estimated time;

Automation is needed for sending messages with a link to the KP on LinkedIn, WhatsApp, Reddit. Please describe how this will be implemented, the timeline, and the cost.