Access ALL prompts for stunning animated websites in one click:
sceneai.art
prompt:
Master Prompt Architecture: Cortex AI Hero Section
This document contains highly specific, engineering-grade prompts designed to force an AI coding assistant to output the exact pixel-perfect Cortex AI hero section.
Instructions: Feed these prompts sequentially into your AI assistant. Wait for the complete code output of each phase before pasting the next prompt.
Phase 1: Environment & Mathematical Video Centering
Objective: Establish the pure black environment and perfectly lock the background video into the exact center of the screen using flexbox centering.
Prompt 1:
Create a responsive dark-themed hero section using HTML, Tailwind CSS (via CDN), and custom CSS.
1. Environment: Set the `body` background color to true pure black (`#000000`). Use the 'Inter' font. The body must be `min-h-screen flex flex-col relative`. Add `selection:bg-white/20`.
2. Video Wrapper: Create an absolute wrapper that spans the full screen: `absolute inset-0 flex items-center justify-center pointer-events-none z-0 overflow-hidden`.
3. Video Container: Inside the wrapper, add a container exactly `800px` wide and `800px` tall. Crucially, ensure it is perfectly centered both horizontally and vertically to align with the rest of the content. Do not use any directional offsets.
4. Video Element: Add an autoplaying, looped, muted, inline `<video>` using this exact URL: `
cdn.sceneai.art/Hero Secti…`. Apply `w-full h-full object-cover`.
5. Video Fade Overlay: On top of the video (using `absolute inset-0`), add this exact custom CSS background to fade the video edges seamlessly into the pure black background: `background: radial-gradient(circle at center, transparent 35%, #000000 68%); z-index: 1;`.
Phase 2: Precision 13px Navigation Bar
Objective: Build the header with exact spacing, 13px typography, and a stark white CTA button.
Prompt 2:
Add a navigation bar at the top (`w-full relative z-50 pt-6 px-6 lg:px-12 flex items-center justify-between`).
1. Logo: Left side. Abstract white SVG logo. Text: "CORTEX AI" (text-lg font-bold tracking-wide text-white).
2. Desktop Links: Center. Flex gap-8. Links: Product, Solutions, Integrations, Pricing, Company. Styling: text-[13px] font-medium tracking-wide text-white/70 hover:text-white transition-colors.
3. Desktop Actions: Right side. Flex gap-8.
- 'Log In' link: text-[13px] font-medium tracking-wide text-white/80 hover:text-white.
- 'Sign Up' button: Solid pure white background (`bg-white`), black text. Padding `px-6 py-2.5`, fully rounded (`rounded-full`), text-[13px] font-semibold, shadow-lg.
4. Mobile Menu: Hide center/right on mobile. Add a hamburger SVG button. Add JS to toggle a fixed, full-screen overlay (`fixed inset-0 bg-black/95 backdrop-blur-xl z-40`) containing vertically stacked links.
Phase 3: Centered Hero Typography & Glassmorphism
Objective: Create the main content area, vertically centered, featuring specific negative tracking on the headline and glassy aesthetic buttons.
Prompt 3:
Below the nav, add the main content area (`relative z-10 flex-1 flex flex-col items-center justify-center px-6 text-center mt-20 mb-12 lg:mb-20`).
1. Version Pill: A glassy inline-flex badge (`bg-white/5 backdrop-blur-md border border-white/20 rounded-full px-1.5 py-1.5 pr-4 mb-10 shadow-lg`). Inside: A solid white pill saying 'New' in black 10px uppercase bold text, followed by 'VERSION V.1.02 HAS BEEN LAUNCHED!' in white 10px uppercase tracking-widest text.
2. Headline: 'Strategic AI to Scale Your <br> Business Growth.' Styling: text-white, size `text-[32px] md:text-[40px] lg:text-[48px]`, font-medium, specific line-height `leading-[1.15]`, and negative letter spacing `tracking-[-0.02em]`. Max-width 700px.
3. Subheadline: 'Transform complex workflows into intelligent, streamlined systems. We build AI solutions that move in sync with your team's rhythm.' Styling: text-white/60, text-[15px] md:text-[17px], font-light, mt-6 mb-10, max-width 600px.
4. CTA Button: 'Start Your AI'. Glassy design (`bg-white/5 backdrop-blur-md hover:bg-white/10 border border-white/20 text-white pl-6 pr-2 py-2 rounded-full font-medium text-[15px] flex items-center gap-4 shadow-2xl`). Inside on the right, add a solid white circular wrapper (`w-8 h-8 rounded-full bg-white text-black`) containing a right-pointing SVG arrow that translates X slightly on hover.
Phase 4: Structured Bottom Logo Grid & Crosshairs
Objective: Add the bordered bottom section containing decorative corner crosshairs and the exact client logos.
Prompt 4:
At the very bottom, add a section that sticks to the bottom (`relative w-full mt-auto flex items-end`). Inside, add a wrapper (`w-full px-6 pb-12`).
1. Container: Add a centered container (`max-w-[1200px] mx-auto relative border-t border-b border-white/10`).
2. Crosshairs: Add 4 decorative crosshairs exactly at the top-left, top-right, bottom-left, and bottom-right corners of the container borders. Use the text ` ` styled as `absolute text-white/40 text-[14px] font-mono transform -translate-x-1/2 -translate-y-1/2`.
3. Grid Layout: Inside the container, create a 6-column grid on desktop, 1 on mobile. Add right borders between columns (`divide-white/5`). Flex center all cells with `p-8`.
4. Column 1 (Text): 'Trusted by 80,000 companies of all sizes'. Align left, text-white/60, text-[13px], font-light.
5. Columns 2-6 (Logos): Add white SVGs for Oracle, Vercel, cansaas, GitHub, and Slack. Make them `opacity-80 hover:opacity-100 transition-opacity`. Center them in their grid cells.
Phase 5: Advanced Cubic-Bezier Load Animations
Objective: Implement the fluid, staggered .delay-* sequence that brings the page to life.
Prompt 5:
Implement a staggered, step-by-step loading animation.
1. Keyframes: In the `<style>` tag, create `
@keyframes fadeUp`. From: `opacity: 0; transform: translateY(20px);` To: `opacity: 1; transform: translateY(0);`.
2. Base Class: Create `.animate-on-load` applying `animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px);`.
3. Delay Utility Classes: Create classes `.delay-100` through `.delay-850` in increments of 50ms and 100ms.
4. Application: Wrap the HTML elements and apply these exact delays:
- Video container & Navbar: `delay-100`
- Version Pill: `delay-200`
- Headline: `delay-300`
- Subheadline: `delay-400`
- CTA Button: `delay-500`
- Corner Crosshairs & Trusted Text: `delay-600`
- Oracle Logo: `delay-[650ms]`
- Vercel Logo: `delay-[700ms]`
- cansaas Logo: `delay-[750ms]`
- GitHub Logo: `delay-[800ms]`
- Slack Logo: `delay-[850ms]`
Ensure every piece of content animates in beautifully sequentially upon page load.