landingpage interaktiver machen #11

Closed
opened 2026-08-12 10:57:49 +02:00 by admin · 2 comments
Owner

Die Landingpage ist sehr statisch gestaltet, das holt die heutigen nutzer nicht ab.
hier müssen wir einmal mehr design rein bringen. in form von animationen.

Die angehängte datei ist ein design entwurf, hier geht es primär um die position des Logos eines NAVBAR ( Hier reichen die Wichtigsten Punkte, HOME, About (folgtnoch), Impressum usw. Rechts neben der NAVBAR Login und Anmeldung

Darunter eine abgerundete Box mit Header, Subtitle und Preview an einem Mobil-Telefon, sowie 2-3 Feature abbildungen.

Anschließen nach der Abgerundeten Box geht es weiter mit CatchPhrase
Warum sind wir super, für wen ist diese Platfrom etwas.
unsere 4 schon vorhanden boxen (Nicht Menschen, sondern Tiere sind das Profil, Beiträge, Storys & Kurzvideos, Gesundheits-Tracking, Nachrichten von Tier zu Tier)

Dadrunter wieder eine Abgerundete Box, mit detail-feature bildern und erklärung

bis wir dann zum footer kommen.
dieser enthält auch nochmal die NAVBAR inhalte
sowie copyright infos | designedy by - Powered by Infos.

beim Scrollen gerne mit Paralax effekten arbeiten, gerne können die einzelnen elemente animiert durch scrollen hinzugefügt und verschoben werden. damit die seite dynamisch aussieht.

Die Landingpage ist sehr statisch gestaltet, das holt die heutigen nutzer nicht ab. hier müssen wir einmal mehr design rein bringen. in form von animationen. Die angehängte datei ist ein design entwurf, hier geht es primär um die position des Logos eines NAVBAR ( Hier reichen die Wichtigsten Punkte, HOME, About (folgtnoch), Impressum usw. Rechts neben der NAVBAR Login und Anmeldung Darunter eine abgerundete Box mit Header, Subtitle und Preview an einem Mobil-Telefon, sowie 2-3 Feature abbildungen. Anschließen nach der Abgerundeten Box geht es weiter mit CatchPhrase Warum sind wir super, für wen ist diese Platfrom etwas. unsere 4 schon vorhanden boxen (Nicht Menschen, sondern Tiere sind das Profil, Beiträge, Storys & Kurzvideos, Gesundheits-Tracking, Nachrichten von Tier zu Tier) Dadrunter wieder eine Abgerundete Box, mit detail-feature bildern und erklärung bis wir dann zum footer kommen. dieser enthält auch nochmal die NAVBAR inhalte sowie copyright infos | designedy by - Powered by Infos. beim Scrollen gerne mit Paralax effekten arbeiten, gerne können die einzelnen elemente animiert durch scrollen hinzugefügt und verschoben werden. damit die seite dynamisch aussieht.
admin closed this issue 2026-08-12 16:13:08 +02:00
Author
Owner

ich habe eine idee für die mobil ansicht, wäre es nicht super dort, eine preview für mobil zu sehen statt der desktop anischt ?
kann man das getrennt verwalten ?
ich hätte hier ein extra ein preview bild für mobil angefertigt.

die könnte man auch noch verkleindern und in eine "handy oder Iphone" optik packen.
was meinst du ?

ich habe eine idee für die mobil ansicht, wäre es nicht super dort, eine preview für mobil zu sehen statt der desktop anischt ? kann man das getrennt verwalten ? ich hätte hier ein extra ein preview bild für mobil angefertigt. die könnte man auch noch verkleindern und in eine "handy oder Iphone" optik packen. was meinst du ?
admin reopened this issue 2026-08-12 17:12:39 +02:00
admin closed this issue 2026-08-12 18:37:43 +02:00
Author
Owner

Mobile-Screenshot + iPhone-Rahmen umgesetzt (Commits 76deab7, 95df270, deployed)

Zwei Folge-Runden auf den Kommentar oben:

Mobile-Screenshot statt Desktop-Screenshot im Phone-Mockup:
Der Phone-Mockup zeigte bisher einen Desktop-Screenshot (Sidebar, „Beitrag erstellen"-Button) in einem Handy-Rahmen. Ersetzt durch den mitgelieferten preview-mobil.png (echte Mobile-Ansicht mit Bottom-Tab-Bar). Die drei schwebenden Badges neu positioniert, da sie mit dem neuen, viel schmaleren/höheren Bild sonst den App-Header bzw. die Tab-Bar überlappt hätten.

Echter iPhone-Rahmen:
Dunkler Bezel statt schlichter weißer Umrandung, Dynamic Island (eigener Streifen, nicht überlagert — sonst Konflikt mit dem App-Header), zwei Seitentasten links + eine rechts, Home-Indicator unten (ebenfalls eigener Streifen statt Überlagerung, da der Screenshot selbst kaum Rand zur Tab-Bar hatte).

tsc/Lint/Tests sauber, im Browser (Desktop-Breite) verifiziert, deployed.

## Mobile-Screenshot + iPhone-Rahmen umgesetzt (Commits `76deab7`, `95df270`, deployed) Zwei Folge-Runden auf den Kommentar oben: **Mobile-Screenshot statt Desktop-Screenshot im Phone-Mockup:** Der Phone-Mockup zeigte bisher einen Desktop-Screenshot (Sidebar, „Beitrag erstellen"-Button) in einem Handy-Rahmen. Ersetzt durch den mitgelieferten `preview-mobil.png` (echte Mobile-Ansicht mit Bottom-Tab-Bar). Die drei schwebenden Badges neu positioniert, da sie mit dem neuen, viel schmaleren/höheren Bild sonst den App-Header bzw. die Tab-Bar überlappt hätten. **Echter iPhone-Rahmen:** Dunkler Bezel statt schlichter weißer Umrandung, Dynamic Island (eigener Streifen, nicht überlagert — sonst Konflikt mit dem App-Header), zwei Seitentasten links + eine rechts, Home-Indicator unten (ebenfalls eigener Streifen statt Überlagerung, da der Screenshot selbst kaum Rand zur Tab-Bar hatte). tsc/Lint/Tests sauber, im Browser (Desktop-Breite) verifiziert, deployed.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: admin/petfeed#11