.webp)

6,1 k vues
Velorah Focus
Velorah Focus : page complète animée pensée pour une landing page SaaS, construite avec React, Tailwind CSS, TypeScript.
Build a high-performance, agency-grade Social Media section called "Velorah Focus" in React 19, TypeScript, and Tailwind CSS with Framer Motion. ## 1. Overview & Visual Objective Social meida post #1 (on the left) Create a React application that displays a stylized, 3:4 aspect ratio social media post/landing page. The app must exactly match the following specifications, layout, animations, and CSS effects: 1. Layout & Structure: Main Container: Full screen, black background (min-h-screen bg-black), centering its child content. Social Frame: A centered container measuring exactly 600px wide by 800px high (w-[600px] h-[800px]). It should have a subtle white border (border-white/10), rounded corners (rounded-2xl), hidden overflow, and a heavy drop shadow. Video Background: An absolute-positioned, full-cover HTML <video> element playing continuously in the background (autoplay, loop, muted, playsInline). Exact Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260505_110052_2e127257-5236-40b1-ba48-4690260f1185.mp4 2. Visual Effects & Overlays (Critical Custom CSS): Add the following visual layers exactly as described using custom CSS in index.css:
Débloquer le Prompt Studio à vie
41 lignes masquées : architecture complète, classes Tailwind, animations et intégration vidéo.
Accès illimité à tous les prompts · Studio inclus · Paiement unique
.webp)