web

Prompt

Build a website called **VEYRA** for an AI video production studio. The goal is to create a premium website where visitors can watch our previous AI video work, learn about our services, choose a package, and start a video project. Please work directly in the current GitLab repository. Start by checking the existing project structure, framework, dependencies, and setup before making changes. Keep the existing stack when possible. ## Brand and visual style VEYRA should feel like a high-end creative studio. Use a dark, cinematic visual style with: * elegant typography * lots of clean spacing * subtle glass effects * premium video presentation * smooth page transitions * polished hover effects * tasteful lighting and gradients * a modern futuristic atmosphere The design should feel closer to a professional film/creative agency than a typical SaaS website. Avoid excessive neon, clutter, constant motion, or overly complicated visuals. ## 3D experience Add a beautiful lightweight 3D element to the hero section. Three.js / React Three Fiber or another suitable library can be used. The 3D scene could include an abstract cinematic object, futuristic geometry, or another visual that fits the VEYRA brand. Make the animation respond subtly to the mouse and scrolling. Smooth performance is very important, so optimize the scene, lazy-load heavy assets, and avoid unnecessary rendering. The site should still run smoothly on normal laptops and mobile devices. ## Home page Create a strong hero section with: **VEYRA** **AI Video Ads That Make People Stop Scrolling.** Add a short description explaining that VEYRA creates AI-powered advertising videos for products, brands, creators, and businesses. Buttons: **Create Your Video** **Watch Our Work** After the hero, include: * selected work * what VEYRA does * how the process works * pricing * FAQ * final call to action * footer ## Portfolio Create a section called **Selected Work** where visitors can watch our previous AI video projects. Each project can have: * video * thumbnail * title * category * description * duration Opening a project should provide a larger video player with fullscreen support. Videos should load efficiently using thumbnails, lazy loading, and optimized formats. The portfolio should be connected to data rather than being hardcoded so more projects can be added later. ## Pricing Start with three packages: **Starter — $9.99** For simple short-form AI videos. **Pro — $19.99** For more advanced custom advertising videos. **Premium — $39.99** For more cinematic and detailed projects. Each package should have its own description, features, and button. Make the pricing information editable later. ## Project experience When someone selects a package, open a project area with a polished chat interface. The customer can explain what they want their video to look like. The conversation should be natural instead of feeling like a long form. Useful questions can include: * What product or service are you promoting? * What style do you want? * Who is the target audience? * Where will the video be used? * How long should it be? * Do you have product images or footage? * Are there any specific colors, text, or branding requirements? Allow normal text messages and attachments where appropriate. ## Customer accounts Visitors should be able to browse the site without an account. When they begin a project, ask for their email. Send a one-time verification code to that email. After successful verification, return them directly to the project they were creating so none of their conversation or selected package is lost. Customers should have an account area where they can see: * current projects * previous projects * project status * messages * payment information * completed videos A customer should only be able to access their own projects. ## Owner account Create an owner/admin experience for: `tahirimohammad321@gmail.com` When that account is authenticated, give it the owner role and access to the administration area. Use proper server-side authorization rather than relying on a frontend email check. ## Owner dashboard Create a simple dashboard for managing the website. Include sections for: **Portfolio** * add videos * upload thumbnails * edit project information * remove projects * reorder projects * mark projects as featured **Pricing** * edit package names * edit prices * edit descriptions * edit features * change payment links **Website content** * edit hero text * edit section text * edit FAQ * edit contact information * edit footer content **Projects** * view customers * view conversations * view selected package * view payment status * update project status * upload completed videos Project statuses can be: New Discussing Awaiting Payment Paid In Production Ready Delivered ## Payments For the first version, keep payments flexible. The owner should be able to add a payment URL to a project and send it through the customer chat. For example: “Your video brief is ready. You can complete your payment here.” Then provide a payment button. Do not create fake payment processing. Keep the payment provider configurable so a legitimate provider can be connected later. Do not store card information. ## Video delivery After production, the owner should be able to upload the finished video to the customer's project. The customer can then watch or download the completed video from their project area. The system should also support an email notification when the video is ready. ## Database and backend Create a clean structure for: * users * projects * messages * pricing packages * portfolio projects * payment links * deliveries * website settings * FAQ items Use proper relationships and permissions. Keep private information protected and prevent customers from accessing other users' projects. ## Security Use normal production security practices: * authenticated sessions * server-side authorization * protected admin routes * protected project data * secure file uploads * environment variables for secrets * input validation * no private keys in client-side code ## Performance The website should feel fast even with multiple videos and 3D elements. Use: * lazy loading * optimized video files * poster images * dynamic imports * optimized 3D assets * efficient animations * responsive layouts * reduced-motion support The public website should not load the entire admin application unnecessarily. ## Mobile Make the experience work well on desktop, tablet, and mobile. The portfolio, pricing, chat, authentication, and project pages should all be comfortable to use on a phone. ## Development approach Build the project in stages so each part can be tested. Begin with the public VEYRA website and visual design. Then add the portfolio system, customer authentication, project chat, owner dashboard, payment-link workflow, and video delivery. Keep the code modular and maintainable. Use TypeScript where appropriate and reuse components rather than putting the whole site into one large file. Create an `.env.example` for any external services that need credentials. Before finishing, make sure the project builds successfully and test the main flow: Visitor → portfolio → pricing → choose package → project chat → email verification → continue project → owner sees project → owner sends payment link → customer pays externally → owner uploads video → customer receives finished video.

A system prompt was added to support web rendering