NetGains · Website Konzept v1.0

Seitenstruktur &
Wireframe-Konzept

13 Sections · Onepager · DE / EN · Dein Feedback vor dem ersten Code

DE Text
EN Text
Animation
Stripe-Link
Info
Inhalt fehlt noch
Info vorhanden ✓
Section 01
Navigation & Sprachumschalter
DE EN Transparent → Solid beim Scrollen

Inhalt

  • Logo "NetGains" links – Wortmarke mit Aqua-Akzent
  • Anchor-Links: Leistungen · Referenzen · Preise · Kontakt
  • DE / EN Toggle rechts
  • CTA Button "Jetzt anfragen" ganz rechts
  • Mobile: Hamburger → Fullscreen-Overlay

Design

  • Sehr schlank – gibt dem Hero allen Raum
  • Sticky, backdrop-blur sobald gescrollt wird
  • Aqua nur beim CTA und aktiven Links
Wireframe
DE / EN
JETZT ANFRAGEN
Section 02
Hero – Above the Fold
DE EN Staggered Intro Animiertes Gradient-Mesh

Inhalt

  • Eyebrow: "Websites, die verkaufen."
  • Headline: "Dein digitaler Auftritt. Gebaut für Wachstum." – Schlüsselwörter in Aqua
  • Subline: Premium-Design · Rekord-Ladezeiten · Alles aus einer Hand
  • Zwei CTAs: "Angebot ansehen" + "Kostenlos anfragen"
  • Trust-Zeile: ★★★★★ · 50+ Projekte · DE & International

Design

  • Dunkel, animiertes Gradient-Mesh in Aqua / Dunkelblau
  • Sehr große Headline – Syne Black, minimal Text drum herum
  • Jede Zeile blendet verzögert ein (Stagger)
  • Kein Foto – Wirkung durch Typografie & Hintergrund
Wireframe
ANGEBOT ANSEHEN
ANFRAGEN
Section 03
Zahlen & Statistiken
DE EN Count-Up beim Einblenden Zahlen bestätigen

4 Kennzahlen

  • 7.000 Aufrufe in 5 Wochen (Florian Merzenich · INVESTORA)
  • <1 Sekunde Ø Ladezeit
  • Anzahl fertiger Websites bestätigen (50+?)
  • Kundenzufriedenheits-Zahl bestätigen

Design

  • 4 Kacheln nebeneinander, dezent
  • Zahlen animieren von 0 hoch wenn Section sichtbar
  • Dunkler Hintergrund – fließender Übergang vom Hero
Wireframe
50+
7k
<1s
100%
Section 04
Leistungen – Was wir bauen
DE EN Scroll-Reveal · Hover-Glow

6 Kacheln

  • Onepager Websites – Kern-Produkt
  • Smart Websites – Upsell
  • Multi-Page Websites – bis 25 Seiten
  • Multi Website System + Funnel
  • Kunden-Apps & Dashboards (INVESTORA als Showcase)
  • Hosting & laufender Support

Design

  • 3×2 Grid – Icon + Titel + 1 Satz
  • Hover: Kachel leuchtet in Aqua auf
  • Keine Preise hier – CTA führt zur Preissektion
Wireframe
Section 05
USP – Ladezeit & Performance
DE EN Animierter Score-Kreis · Balken-Rennen PageSpeed Screenshot liefern

Inhalt

  • Headline: "Schneller als die Konkurrenz. Immer."
  • Google PageSpeed Score animiert auf 98–100/100
  • Vergleichsbalken: Ø Agentur 4.2s → NetGains <1s
  • Kurze Erklärung: warum Ladezeit Konversionen beeinflusst
  • Echten PageSpeed Score / Screenshot liefern

Design

  • Volle Breite, Aqua-Glow im Hintergrund
  • Score als animierter Kreis – zählt von 0 auf 98
  • Wenig Text, maximale visuelle Wirkung
  • Impact-Moment – bleibt im Gedächtnis
Wireframe
98
Ø Andere Agenturen – ~4.2s
NetGains – <1s
Section 06
Case Study – Florian Merzenich
DE EN Scroll-Storytelling Name & Beruf bekannt ✓ Foto · Website-Screenshots

Erzählstruktur – 4 Blöcke

  • ① Wer ist Florian? – Foto, Name, Investor / Geschäftsführer / Finanzberater
  • ② Was wir gebaut haben – Website + Kundensystem, Screenshots
  • ③ INVESTORA – App-Block als Überleitung zu Section 07
  • ④ Das Ergebnis – 7.000 Aufrufe in 5 Wochen, dramatische Statistik-Grafik

Design

  • Zeitstrahl-Optik – scrollen = Story entfaltet sich
  • Text links, Bild / Screen rechts (alternierend)
  • Block ④: volle Breite, goldene "7.000" riesig
  • Foto von Florian Merzenich
  • Screenshots seiner Website / seines Systems
Wireframe
SCREENSHOT
7.000
Aufrufe in 5 Wochen
Section 07
INVESTORA – Wir bauen Apps
DE EN Phone-Mockups floating · Feature-Tags App-Name: INVESTORA ✓ App-Screenshots / Mockup-Material

Inhalt

  • Intro: "NetGains baut nicht nur Websites – wir entwickeln vollständige digitale Produkte."
  • INVESTORA als prominentes Beispiel (Showcase, kein Verkauf)
  • Features: Portfolio-Tracking · Masterclass · Priority Chat · Cockpit-Dashboard
  • 3–4 Screen-Mockups nebeneinander
  • App-Screenshots für die Mockups

Design

  • Dunkle Sektion mit goldenen Akzenten (Investor-Feeling)
  • Screens leicht versetzt / rotiert, schwebend animiert
  • Feature-Tags per Scroll-Animation eingeblendet
  • Getrennt von Florian – zeigt allgemeine App-Kompetenz
Wireframe
Section 08
Portfolio – Referenzprojekte
DE EN Hover-Preview · Fade-In Portfolio-Links liefern

Inhalt

  • Grid aller fertigen Kundenprojekte
  • Pro Kachel: Screenshot + Projektname + Branche + "Live →"
  • Florian Merzenich prominent als erster
  • Alle Portfolio-Links + Screenshots

Design

  • 3er-Grid, gleichmäßig – viele Projekte = starkes Vertrauen
  • Hover: Screenshot erscheint, "Live ansehen" eingeblendet
  • Branche als kleines Label auf jeder Kachel
Wireframe
PROJEKT 1
PROJEKT 2
PROJEKT 3
Section 09
So läuft es ab – Prozess
DE EN Step-by-Step Reveal

4 Schritte

  • ① Erstkontakt & Briefing – Formular oder kurzes Gespräch
  • ② Design & Entwicklung – schnelle Umsetzung
  • ③ Review & Feedback-Runden – bis es perfekt ist
  • ④ Launch + optionales Hosting & Support

Design

  • Horizontale Timeline mit Verbindungslinie
  • Schritte blenden nacheinander beim Scrollen ein
  • Nimmt die Hemmung – wirkt einfach und transparent
Wireframe
1
2
3
4
Section 10
Team – Die Personen dahinter
DE EN Cansin Gülal · Co-Founder & Vertrieb ✓ Dein Name · Fotos · Gründungsjahr

Inhalt

  • Cansin Gülal – Co-Founder & Vertrieb
  • Dein Name + Rolle: Co-Founder & Entwicklung
  • Fotos beider Gründer (du lieferst sie)
  • Gründungsjahr + kurze Entstehungsgeschichte

Design

  • 2 Karten nebeneinander – Foto groß, Name, Rolle
  • Persönlich und nahbar – kein Corporate-Klotz
  • Kurzer "Über uns"-Absatz als Einleitung darüber
Wireframe
Section 11
Preise & Pakete
DE EN Alle 12 Stripe-Links integriert ✓ Scroll-Reveal · Tier-Gruppen

Inhalt

  • Alle 12 Pakete mit echten Stripe-Links vorhanden
  • Tiers: Onepager · Premium · Smart · Enterprise
  • Monatlich / Jährlich Toggle
  • "Beliebtestes" Badge auf einem Paket
  • Enterprise-Karten gold hervorgehoben

Design

  • Gleiche Karten-Ästhetik wie im Dashboard
  • Schwarzer Header, Aqua-Preis-Glow
  • "Jetzt kaufen" → direkt Stripe
Wireframe
899 €
KAUFEN →
1.490 €
+ 19 €/Monat
KAUFEN →
4.990 €
KAUFEN →
Section 12
FAQ – Häufige Fragen
DE EN Accordion

6 Fragen (Entwurf)

  • Wie lange dauert die Umsetzung?
  • Was passiert nach dem Launch?
  • Kann ich die Website später selbst bearbeiten?
  • Was ist der Unterschied zwischen Onepager und Smart Website?
  • Welches Paket passt für meinen Betrieb?
  • Gibt es eine Garantie?

Design

  • Sauberes Accordion – eine Frage klappt beim Klick auf
  • Schnell überfliegbar, nimmt letzte Hemmungen
  • Direkt darunter: "Noch Fragen? Schreib uns."
Section 13
Kontakt – Formular & Footer
DE EN Sticky WhatsApp-Button E-Mail · WhatsApp-Nummer · Social-Links

Inhalt

  • Headline: "Lass uns reden." / "Let's talk."
  • Formular: Name · E-Mail · Paket-Interesse · Nachricht
  • Absende-Button mit Bestätigungs-Animation
  • Sticky WhatsApp-FAB – immer unten rechts sichtbar
  • Footer: Impressum · Datenschutz · Social-Links
  • E-Mail für das Kontaktformular
  • WhatsApp-Nummer (+49...)
  • Social-Media-Links

Design

  • Sehr dunkle Sektion – starker Abschluss-Charakter
  • Formular links, Kontakt-Info rechts
  • WhatsApp-Button: grüner Glow, immer sticky
  • Footer: schlicht, einzeilig, schwarz
Wireframe
ABSENDEN →
WA

⚠ Diese Infos fehlen noch

Dein Name (Co-Founder & Entwicklung)
Foto von dir + Foto von Cansin
Foto von Florian Merzenich
Screenshots seiner Website / seines Systems
INVESTORA App-Screenshots oder Mockup-Material
Alle Portfolio-Links (Kundenprojekte)
Gründungsjahr + kurze Entstehungsgeschichte
E-Mail für das Kontaktformular
WhatsApp-Nummer (+49...)
Social-Media-Links (Instagram, LinkedIn usw.)
Zahlen bestätigen: Anzahl Websites / Kunden
Google PageSpeed Screenshot (oder Beispielwert 98)
💬
Dein Feedback zu diesem Konzept

Sag mir was du ändern willst – dann lieferst du die fehlenden Infos und wir bauen sofort los.