Retour au catalogue
Velorah Focus
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.

Offre de lancement

Accès illimité à tous les prompts · Studio inclus · Paiement unique

Références similaires