← Kembali ke galeri

Portiva Hero

SceneAIHero Section
Lihat contoh asli ↗

Prompt lengkap

tersalin
Create a fully responsive, minimalist landing page using a single HTML file and Tailwind CSS via CDN. Follow these exact instructions step-by-step:

Global Setup & Background
Use the 'Inter' font from Google Fonts.
Set the full-page background to use this specific video URL: https://cdn.sceneai.art/Hero%20section%20video%20file%20(2)/13c2a27f-30ac-44f1-866d-94fca9c614d7.mp4
Ensure the background video is autoplaying, looping, muted, playsinline, covers the entire viewport, and stays fixed behind all content without blocking interactions.
Header / Navigation
Logo (Left): Display only the text "Portiva" in solid white, medium weight, 2xl size. Do NOT use any logo icons.
Nav Links (Center): Include links for "About", "Brands", "Careers", and "Partners". The text for these links must be solid white. Do NOT include "Home", "Product", or a "Timezone" display.
Action (Right): Display a sleek, pill-shaped "Chat with us" button with a solid white background and black text. Do NOT include a "Menu" hamburger button.
Hero Section (Left-Aligned Content)
Vertically center the entire text block between the header and the bottom of the screen.
Top Label: Small white text reading "| Creative Agency".
Main Heading:
Text size must be exactly 62px on desktop and completely solid white.
The text is: "Less complexity, more impact in every project."
Format it into exactly three distinct lines:
Line 1: "Less complexity,"
Line 2: "more impact in"
Line 3: "every project."
Social Proof: Add five star icons (use color #c25e2e) next to the text "3000+ Customers" (text must be solid white).
Call to Action Buttons (Small size, horizontal row):
Button 1: "Chat With Us" (solid white background, black text, pill-shaped, with a small right-pointing arrow inside a black circular background on the right side of the text).
Button 2: "Our Works" (glassmorphism/transparent style with a very light white/gray border and solid white text).
Animations (JavaScript)
Create a smooth load sequence without using external animation libraries.
Using vanilla JavaScript, break the main heading down so it reveals word-by-word. Each word should fade in and slide up smoothly in a staggered sequence (e.g., 120ms delay between words).
Fade in the header, top label, review stars, and buttons slightly after the text animation begins.
Strict Removals (What NOT to build)
Do NOT include any right-side floating cards or UI elements.
Do NOT include a grid of partner logos on the right side.
Do NOT include a bottom frame, scroll indicator, or speaking text at the bottom of the page.
Do NOT include a giant background watermark text. Keep it completely clean.