Invité
0
Copie et reconstruction du site Web•Ajouter une tâche: Copie et reconstruction du site Web

  • Une copie de la page de destination avec des blocs interactifs et des analyses - pixel parfait sur Next.js avec CMS et préparation A/B

    7 heures il y a
    • Budget souhaité jusqu’à 650.54 USD
    • En attente d’un prestataire...
  • Situation initiale : il existe une page de destination publique de référence d'un concurrent (1 page + popups + page de politique) qui convertit bien. Nous devons créer une copie fonctionnellement et visuellement aussi proche que possible de notre produit, mais en remplaçant le contenu, la marque, les formulaires de candidature et les intégrations. Il n'y a pas d'accès aux sources, seulement l'URL de référence et les éléments sur notre marque (logo, textes, couleurs).

    Environnement technique et domaine : B2B SaaS, le trafic principal est mobile. Notre pile actuelle est Next.js 14 (App Router), TypeScript, Tailwind, Vercel. Le contenu doit être édité par le marketing sans développeur.

    Ce qu'il faut faire:
    1) Analysez la référence et reproduisez la structure et le comportement de la page - grilles, typographie, retraits, animations, éléments collants, popups, accordéons, curseurs, formulaires, états de chargement et erreurs.
    2) Implémentez la page dans Next.js 14 avec SSR/SSG le cas échéant, optimisez Core Web Vitals, assurez un fonctionnement correct sur iOS Safari et Android Chrome.
    3) Connectez un CMS sans tête (Sanity ou Contentful - suggérez la meilleure option pour les exigences ci-dessous) et ajoutez-y des blocs gérables : héros, avantages, cas/avis, FAQ, tarifs, bloc d'intégration, pied de page, textes contextuels, dynamique d'en-tête UTM. Il doit y avoir des conditions préalables pour que le marketing puisse modifier l'ordre de certaines sections et désactiver des sections sans déploiement.
    4) Formulaires de génération de leads : 2 formulaires (en hero et en popup) avec validation, protection anti-spam (hCaptcha ou Cloudflare Turnstile), envoi vers Slack (webhook) et Google Sheets (via API/Apps Script - suggérer une option), plus un événement dans GA4.
    5) Analyses et préparation pour A/B : configurer dataLayer/événements (visualisation des sections, clics sur les CTA, soumission de formulaires, ouverture de pop-ups), insérer UTM/gbraid/wbraid, offrir la possibilité de connecter un analogue de Google Optimize (par exemple, GrowthBook ou VWO - préparant uniquement des couches et des sélecteurs stables, sans expérience complète).
    6) SEO minimum : balises méta, OG, schema.org (Organisation + FAQPage le cas échéant), plan du site/robots, pages canoniques correctes, /privacy et /terms.

    Restrictions :
    - Vous ne pouvez pas utiliser de générateurs visuels comme Tilda/Webflow et vous ne pouvez pas copier directement le code de quelqu'un d'autre. La copie est réalisée grâce à l'analyse du comportement, des styles et du balisage dans le navigateur.
    - Vous avez besoin d'un référentiel propre avec une structure claire, sans dépendances inutiles et sans bibliothèques d'interface utilisateur lourdes, si vous pouvez vous débrouiller avec Tailwind et de petits utilitaires.
    - La mise en page doit être parfaite au pixel près par rapport à la référence dans la limite d'un écart acceptable et en tenant compte du remplacement des polices/marque.

    Résultat spécifique :
    - Dépôt Git avec le projet Next.js, instructions de lancement et de déploiement sur Vercel, fichier d'environnement .env.example.
    - Sting déployé sur Vercel + accès au CMS avec les types de contenus établis et renseigné les données de démonstration.
    - Page prête/et pages de service/confidentialité,/termes.

    Critères d'acceptation mesurables :
    - Lighthouse (mobile) sur staging : Performance >= 85, Accessibilité >= 95, Bonnes pratiques >= 95, SEO >= 95 (pour une exécution typique, sans scripts externes sauf analytique et antispam).
    - Pixel-perf : comparaison de 6 écrans clés (360x800 et 1440x900) - différences de grille/retrait pas plus de 4px pour les blocs principaux.
    - Toutes les références interactives sont reproduites : pop-ups, accordéons, sticky, ancres, états de formulaire, animations fluides sans tics.
    - Formulaires : validation correcte, protection contre les robots, les leads sont déposés dans Slack et Google Sheets, les événements form_view, form_start, form_submit, form_error passent dans GA4.
    - CMS : le marketing modifie les textes et l'ordre des sections, les modifications sont visibles sur staging après publication du contenu sans modification de code.

    Étapes:
    - Analyse de référence et spécification de bloc/état.
    - Implémentation d'interface utilisateur et adaptative.
    - Intégration et contenu CMS.
    - Intégration de formulaires et d'analyses.
    - Polissage, tests cross-browser, réception finale selon la checklist.

  • How would you rate this task?

    Sign in to leave your rating.

    Total ratings: 0

  • Валентина Орехова
    85
    • Offres : 3
Votre offre

Vous n’avez pas encore envoyé d’offre pour cette commande.
Cliquez sur « Envoyer une offre » pour soumettre votre proposition.

Besoin d'une tâche similaire ?

Si ce projet est proche de vos besoins, vous pouvez consulter les services prêts dans la catégorie ou publier votre propre tâche avec le budget, le délai et les exigences requis.

Voir les services de la catégorie

Comparez les offres prêtes, les prix et les modalités de livraison dans Copie et reconstruction du site Web.

Publiez votre propre tâche

Décrivez le résultat, les exigences et le budget pour recevoir des offres de freelances pour votre tâche.

Comparez les projets ouverts

Examinez les véritables briefs, formulations et budgets pour préparer une commande plus précise.

The project «Une copie de la page de destination avec des blocs interactifs et des analyses - pixel parfait sur Next.js avec CMS et préparation 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.