Vizitator
0
Copierea și reconstruirea site-ului•Adaugă sarcină: Copierea și reconstruirea site-ului

  • O copie a paginii de destinație cu blocuri interactive și analize - pixel perfect pe Next.js cu CMS și pregătire A/B

    7 ore în urmă
    • Buget dorit până la 650.54 USD
    • Se așteaptă un executant...
  • Situație inițială: există o pagină de destinație publică de referință a unui concurent (1 pagină + ferestre pop-up + pagină de politică) care face o conversie bună. Trebuie să facem o copie cât mai apropiată din punct de vedere funcțional și vizual pentru produsul nostru, dar cu înlocuirea conținutului, a mărcii, a formularelor de aplicare și a integrărilor. Nu există acces la surse, ci doar adresa URL de referință și materiale de pe brandul nostru (logo, texte, culori).

    Mediu tehnic și domeniu: B2B SaaS, traficul principal este mobil. Stack-ul nostru actual este Next.js 14 (App Router), TypeScript, Tailwind, Vercel. Conținutul trebuie editat de marketing fără un dezvoltator.

    Ce să fac:
    1) Analizați referința și reproduceți structura și comportamentul paginii - grile, tipografie, indentări, animații, elemente lipicioase, ferestre pop-up, acordeoane, glisoare, formulare, stări de încărcare și erori.
    2) Implementați pagina în Next.js 14 cu SSR/SSG acolo unde este cazul, optimizați Core Web Vitals, asigurați funcționarea corectă pe iOS Safari și Android Chrome.
    3) Conectați un CMS fără cap (Sanity sau Contentful - sugerați cea mai bună opțiune pentru cerințele de mai jos) și adăugați-i blocuri gestionabile: erou, beneficii, cazuri/recenzii, Întrebări frecvente, tarife, bloc de integrare, subsol, texte pop-up, dinamica antetului UTM. Trebuie să existe precondiții pentru ca marketingul să poată schimba ordinea unor secțiuni și să dezactiveze secțiuni fără implementare.
    4) Formulare de generare de lead-uri: 2 formulare (în ero și în pop-up) cu validare, protecție anti-spam (hCaptcha sau Cloudflare Turnstile), trimitere către Slack (webhook) și Google Sheets (prin API/Apps Script - sugerează o opțiune), plus un eveniment în GA4.
    5) Analytics și pregătire pentru A/B: configurați dataLayer/evenimente (vizionarea secțiunilor, clicuri pe CTA, trimiterea formularelor, deschiderea ferestrelor pop-up), introduceți UTM/gbraid/wbraid, oferiți posibilitatea de a conecta un analog Google Optimize (de exemplu, GrowthBook sau VWO - doar pregătirea straturilor și fără un selector complet stabil).
    6) Minimum SEO: meta tag-uri, OG, schema.org (Organizație + FAQPage acolo unde este cazul), sitemap/roboți, pagini canonice corecte, /privacy și /terms.

    Restrictii:
    - Nu puteți utiliza constructori vizuali precum Tilda/Webflow și nu puteți copia direct codul altcuiva. Copia se face prin analiza comportamentului, stilurilor și marcajului din browser.
    - Ai nevoie de un depozit curat, cu o structură clară, fără dependențe inutile și fără biblioteci grele de UI, dacă te descurci cu Tailwind și utilitare mici.
    - Aspectul trebuie să fie perfect în pixeli în raport cu referința în cadrul discrepanței acceptabile și ținând cont de înlocuirea fonturilor/brand-ului.

    Rezultat specific:
    - Depozitul Git cu proiectul Next.js, instrucțiuni de lansare și implementare în Vercel, fișier de mediu .env.example.
    - Staging implementat pe Vercel + acces la CMS cu tipuri de conținut stabilite și date demonstrative completate.
    - Pagină gata / și pagini de servicii / confidențialitate, / termeni.

    Criterii de acceptare măsurabile:
    - Lighthouse (mobil) pe scenă: Performanță >= 85, Accesibilitate >= 95, Cele mai bune practici >= 95, SEO >= 95 (pentru o rulare tipică, fără scripturi externe, cu excepția analizei și antispam).
    - Pixel-perf: comparație a 6 ecrane cheie (360x800 și 1440x900) - diferențe de grilă/indenturi nu mai mult de 4px pentru blocurile principale.
    - Sunt reproduse toate referințele interactive: ferestre pop-up, acordeoane, sticky, ancore, stări de formă, animații fluide, fără zvâcniri.
    - Formulare: validare corectă, protecție împotriva boților, clienții potențiali sunt eliminati în Slack și Google Sheets, evenimente form_view, form_start, form_submit, form_error mergeți la GA4.
    - CMS: marketingul modifică textele și ordinea secțiunilor, modificările sunt vizibile la montaj după publicarea conținutului fără modificări de cod.

    Etape:
    - Analiza de referință și specificarea blocului/starii.
    - Implementarea UI și adaptive.
    - Integrare și conținut CMS.
    - Integrarea formularelor și a analizelor.
    - Lustruire, testare cross-browser, acceptare finala conform listei de verificare.

  • How would you rate this task?

    Sign in to leave your rating.

    Total ratings: 0

  • Валентина Орехова
    85
    • Oferte: 3
Oferta ta

Încă nu ai trimis o ofertă pentru această comandă.
Apasă „Trimite o ofertă” pentru a o trimite.

Aveți nevoie de o sarcină similară?

Dacă acest proiect este apropiat de ceea ce aveți nevoie, puteți consulta servicii gata în categorie sau publica propria sarcină cu bugetul, termenul și cerințele necesare.

Vezi serviciile categoriei

Compare ready offers, prices and delivery terms in Copierea și reconstruirea site-ului.

Publicați propria sarcină

Descrieți rezultatul, cerințele și bugetul pentru a primi oferte de la freelanceri pentru sarcina dvs.

Comparați proiectele deschise

Consultați brief-uri reale, formulări și bugete pentru a pregăti o comandă mai precisă.

The project «O copie a paginii de destinație cu blocuri interactive și analize - pixel perfect pe Next.js cu CMS și pregătire A/B» can be used as a reference for your own brief: what should be done, what result is needed and what budget to set.