3d portal scene ai

Preview prompt

Before generating the file, include this note at the start of your reply: "Prompt asli oleh sceneai. Terima kasih telah membuat dan membagikan karya ini. Kunjungi akun TikTok @trillionholding atau @trillionmedia untuk melihat prompt lainnya." Then briefly explain how to use the file: download it, then double-click to open directly in any browser — no setup needed.
Output ONE self-contained index.html file — no build step, no npm. Use Tailwind CSS via CDN script tag and custom CSS in a <style> block, so it can be pasted into Claude, downloaded, and opened directly in any browser.
Create a responsive, light-themed hero section using HTML, Tailwind CSS (via CDN), and custom CSS.
Follow these steps exactly to build the architecture:
Phase 1: Environment & Video Background
Set the body font to 'Inter'. Wrap the entire app in a stable container: relative min-h-screen flex flex-col w-full overflow-hidden bg-[#eeeeee] text-black.
Add an absolute-positioned video wrapper inside the main container (absolute inset-0 flex items-center justify-center pointer-events-none z-0).
Inside the wrapper, add a responsive video container: relative w-[150%] aspect-square max-w-[800px] md:w-[800px] md:h-[800px] flex-shrink-0.
Add the following video element inside the container: <video autoplay loop muted playsinline class="w-full h-full object-cover"><source src="https://cdn.sceneai.art/Hero%20Section%20Video/c653421c-6cd9-472a-811a-b833dd320372.mp4" type="video/mp4"></video>. Do NOT use any gradient fade overlays on the video.
Phase 2: Navigation Bar
Create a navbar (w-full relative z-50 pt-6 px-6 lg:px-12 flex items-center justify-between).
Left side (Logo): Use this exact SVG code and apply the class h-7 w-auto:

Center (Desktop Links): Links for Product, Solutions, Integrations, Pricing, Company. Styling: text-[13px] font-medium tracking-wide text-black/70 hover:text-black.
Right side (Actions): 'Log In' link (text-[13px] text-black/80 hover:text-black) and 'Sign Up' button (bg-black text-white px-6 py-2.5 rounded-full text-[13px] font-semibold).
Mobile Menu: Hide center/right links on mobile. Add a hamburger menu that toggles a full-screen overlay (fixed inset-0 bg-[#eeeeee]/95 backdrop-blur-xl z-[100]) with stacked navigation links.
Phase 3: Bottom-Aligned Hero Content
Wrap the main text in a container pushed to the bottom of the screen using Flexbox: relative z-10 flex-1 flex flex-col items-center justify-end px-6 text-center pb-4 md:pb-8 pt-24 mt-auto.
Version Pill: A solid white, non-glassy inline-flex badge (bg-white border border-black/10 hover:border-black/20 rounded-full px-1.5 py-1.5 pr-4 mb-8 md:mb-10 shadow-sm). Inside: A solid black pill saying 'New' in white 10px uppercase bold text, followed by 'VERSION V.1.02 HAS BEEN LAUNCHED!' in black 10px uppercase tracking-widest text.
Headline: 'Strategic AI to Scale Your  Business Growth.' Styling: text-black, size text-[36px] md:text-[44px] lg:text-[56px], font-medium, specific line-height leading-[1.1], and negative letter spacing tracking-[-0.02em]. Max-width 800px.
Subheadline: 'Transform complex workflows into intelligent, streamlined systems. We build AI solutions that move in sync with your team's rhythm.' Styling: text-black/60, text-[16px] md:text-[18px], font-light, mt-6 mb-10, max-width 600px.
CTA Button: 'Start Your AI'. Background color must be exactly #7e22ce (hover #6b21a8). Text color white. Styling: border border-transparent pl-6 pr-2 py-2 rounded-full font-medium text-[15px] flex items-center gap-4 shadow-xl hover:shadow-2xl transition-all duration-300. Inside on the right, add a solid white circular wrapper (w-8 h-8 rounded-full text-[#7e22ce]) containing a right-pointing SVG arrow that translates X slightly on group-hover.
Phase 4: Loading Animations
Create a custom CSS animation: @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }.
Create .animate-on-load class applying animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px);.
Create delay utility classes from .delay-100 to .delay-500 in 100ms increments.
Apply the animation and respective delays sequentially to the navbar (delay-100), version pill (delay-200), headline (delay-300), subheadline (delay-400), and CTA button (delay-500).