44 k vues
Places Organizer
Places Organizer : page complète animée pensée pour une landing page SaaS, construite avec React, Tailwind CSS.
Build a high-performance, agency-grade Travel section called "Places Organizer" in React 19, TypeScript, and Tailwind CSS with Framer Motion. ## 1. Overview & Visual Objective **Build a single-page HTML showcase displaying two iOS device frames (370x790px each) side by side on a neutral `#F4F4F4` stage. The stage auto-scales to fit the viewport using JS. Both phones have a Dynamic Island, status bar (time "11:11", signal/wifi/battery icons in white SVG), and a home indicator bar. Animations are gated behind video `loadeddata` events + font loading, with a 5s safety timeout.** Visual Aesthetics & Mood: two ios device frames neutral pale grey stage travel places organizer app narrow garamond serif italic accents playfair elegant typography refined editorial calm sophisticated polished showcase compact ## 2. Technical Stack & Dependencies - Framework: React 19 + TypeScript + Vite - Styling: Tailwind CSS v4 + Lucide React icons - Animation Engine: Framer Motion (layout animations, spring physics, scroll-linked parallax)
Débloquer le Prompt Studio à vie
18 lignes masquées : architecture complète, classes Tailwind, animations et intégration vidéo.
Accès illimité à tous les prompts · Studio inclus · Paiement unique
- Palette