Gast
0
Website kopieren und neu erstellen•Aufgabe hinzufügen: Website kopieren und neu erstellen

  • Eine Kopie der Landingpage mit interaktiven Blöcken und Analysen – pixelgenau auf Next.js mit CMS und A/B-Vorbereitung

    7 Stunden vor
    • Gewünschtes Budget bis zu 650.54 USD
    • Warten auf einen Auftragnehmer...
  • Ausgangssituation: Es gibt eine öffentliche Referenz-Landingpage (1 Seite + Popups + Richtlinienseite) eines Mitbewerbers, die gut konvertiert. Wir müssen eine möglichst funktionale und visuelle Kopie unseres Produkts erstellen, jedoch mit Ersatz von Inhalten, Branding, Anwendungsformularen und Integrationen. Es gibt keinen Zugriff auf die Quellen, sondern nur auf die Referenz-URL und Materialien zu unserer Marke (Logo, Texte, Farben).

    Technisches Umfeld und Themengebiet: B2B SaaS, Hauptverkehr ist mobil. Unser aktueller Stack ist Next.js 14 (App Router), TypeScript, Tailwind, Vercel. Inhalte müssen vom Marketing ohne Entwickler bearbeitet werden.

    Was zu tun:
    1) Analysieren Sie die Referenz und reproduzieren Sie die Struktur und das Verhalten der Seite – Raster, Typografie, Einrückungen, Animationen, Sticky-Elemente, Popups, Akkordeons, Schieberegler, Formulare, Ladezustände und Fehler.
    2) Implementieren Sie die Seite gegebenenfalls in Next.js 14 mit SSR/SSG, optimieren Sie Core Web Vitals und stellen Sie den korrekten Betrieb auf iOS Safari und Android Chrome sicher.
    3) Verbinden Sie ein Headless-CMS (Sanity oder Contentful – schlagen Sie die beste Option für die unten aufgeführten Anforderungen vor) und fügen Sie verwaltbare Blöcke hinzu: Hero, Vorteile, Fälle/Bewertungen, FAQ, Tarife, Integrationsblock, Fußzeile, Popup-Texte, UTM-Header-Dynamik. Es müssen Voraussetzungen gegeben sein, damit das Marketing die Reihenfolge einiger Abschnitte ändern und Abschnitte ohne Bereitstellung abschalten kann.
    4) Formulare zur Lead-Generierung: 2 Formulare (in Hero und im Popup) mit Validierung, Anti-Spam-Schutz (hCaptcha oder Cloudflare Turnstile), Senden an Slack (Webhook) und Google Sheets (über API/Apps Script – schlagen Sie eine Option vor) sowie ein Ereignis in GA4.
    5) Analyse und Vorbereitung für A/B: DataLayer/Ereignisse einrichten (Abschnitte anzeigen, auf CTAs klicken, Formulare senden, Pop-ups öffnen), UTM/gbraid/wbraid einfügen, die Möglichkeit bieten, ein Google Optimize-Analogon zu verbinden (z. B. GrowthBook oder VWO – nur Ebenen und stabile Selektoren vorbereiten, ohne ein vollständiges Experiment).
    6) SEO-Minimum: Meta-Tags, OG, schema.org (Organisation + FAQ-Seite, sofern zutreffend), Sitemap/Robots, korrekte kanonische, /privacy- und /terms-Seiten.

    Einschränkungen:
    - Sie können keine visuellen Builder wie Tilda/Webflow verwenden und den Code einer anderen Person nicht direkt kopieren. Die Kopie wird durch Analyse des Verhaltens, der Stile und des Markups im Browser erstellt.
    - Sie benötigen ein sauberes Repository mit klarer Struktur, ohne unnötige Abhängigkeiten und ohne schwere UI-Bibliotheken, wenn Sie mit Tailwind und kleinen Dienstprogrammen auskommen.
    - Das Layout muss im Verhältnis zur Referenz pixelgenau sein, innerhalb der akzeptablen Abweichung und unter Berücksichtigung der Ersetzung von Schriftarten/Marke.

    Spezifisches Ergebnis:
    – Git-Repository mit dem Next.js-Projekt, Anweisungen zum Starten und Bereitstellen in Vercel, Umgebungsdatei .env.example.
    - Bereitgestelltes Staging auf Vercel + Zugriff auf das CMS mit etablierten Inhaltstypen und ausgefüllten Demodaten.
    - Bereite Seite / und Serviceseiten /Datenschutz, /Bedingungen.

    Messbare Akzeptanzkriterien:
    - Leuchtturm (mobil) auf Staging: Leistung >= 85, Zugänglichkeit >= 95, Best Practices >= 95, SEO >= 95 (für einen typischen Lauf, ohne externe Skripte außer Analyse und Antispam).
    - Pixel-Perf: Vergleich von 6 Schlüsselbildschirmen (360 x 800 und 1440 x 900) – Unterschiede im Raster/Einrückungen nicht mehr als 4 Pixel für die Hauptblöcke.
    - Alle interaktiven Referenzen werden reproduziert: Pop-ups, Akkordeons, Sticky, Anker, Formzustände, flüssige Animationen ohne Zucken.
    - Formulare: korrekte Validierung, Schutz vor Bots, Leads werden in Slack und Google Sheets gelöscht, Ereignisse form_view, form_start, form_submit, form_error gehen zu GA4.
    - CMS: Das Marketing ändert die Texte und die Reihenfolge der Abschnitte. Änderungen sind beim Staging sichtbar, nachdem der Inhalt ohne Codeänderungen veröffentlicht wurde.

    Etappen:
    - Referenzanalyse und Block-/Zustandsspezifikation.
    - Implementierung von UI und Adaptive.
    - CMS-Integration und -Inhalte.
    - Integration von Formularen und Analysen.
    - Polieren, browserübergreifendes Testen, Endabnahme gemäß Checkliste.

  • How would you rate this task?

    Sign in to leave your rating.

    Total ratings: 0

  • Валентина Орехова
    85
    • Angebote: 3
Ihr Angebot

Sie haben für diese Bestellung noch kein Angebot abgegeben.
Klicken Sie auf „Angebot senden“, um Ihr Angebot zu senden.

Brauchen Sie eine ähnliche Aufgabe?

Wenn dieses Projekt Ihrem Bedarf nahe kommt, können Sie in der Kategorie fertige Dienstleistungen anzeigen oder Ihre eigene Aufgabe mit dem erforderlichen Budget, der Frist und den Anforderungen veröffentlichen.

Services der Kategorie anzeigen

Vergleichen Sie fertige Angebote, Preise und Lieferbedingungen auf der Website kopieren und neu erstellen.

Veröffentlichen Sie Ihre eigene Aufgabe

Beschreiben Sie Ergebnis, Anforderungen und Budget, um Freelancer-Angebote für Ihre Aufgabe zu erhalten.

Vergleichen Sie offene Projekte

Überprüfen Sie echte Schriftsätze, Formulierungen und Budgets, um eine genauere Bestellung vorzubereiten.

The project «Eine Kopie der Landingpage mit interaktiven Blöcken und Analysen – pixelgenau auf Next.js mit CMS und A/B-Vorbereitung» can be used as a reference for your own brief: what should be done, what result is needed and what budget to set.