.webp)
46 k vues
Coffee Rewards
Coffee Rewards : page complète animée pensée pour une landing page SaaS, construite avec Framer Motion, Vite.
Build a mobile coffee profile screen inside a phone mockup frame. Use vanilla HTML, CSS, and JS with Vite as the bundler. The design is dark/warm-toned, inspired by iOS profile screens with glassmorphic UI elements. **Phone mockup:** - 390x844px at zoom 0.78, black background, 44px border-radius, overflow hidden, strong drop shadow - Internal `.screen` div with dark background (`#180a06`), vertical scroll, hidden scrollbar **Hero section (top):** - Full-width, 430px tall - Contains a looping muted autoplay video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260707_003042_3d2380a6-1ce6-4407-a2e2-cfec46546407.mp4` - Video covers the area with `object-fit: cover; object-position: center top` - Bottom gradient overlay fading from transparent at 52% to the background color at 100% - Top bar with two glass circle buttons (edit icon on left, X close SVG on right), positioned absolute top 18px
Débloquer le Prompt Studio à vie
70 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
.webp)
.webp)