NeoVision

# NeoVision - Futuristic AI/VR Hero Section Reconstruction Prompt Build a high-end, futuristic tech landing page hero section in **React**, **TypeScript**, and **Tailwind CSS v4** with **motion/react** (Framer Motion) and **lucide-react** icons. The result must be visually and structurally identical to the specified design system below. --- ## 1. Design Intent & Visual Philosophy - **Tone & Atmosphere:** Premium, high-contrast minimalist futuristic editorial design. Clean stark white canvas layered over a soft grid background with crisp monochrome dark accents (`#0a0a0a`) and precise visual alignments. - **Visual Rhythm:** Balanced horizontal-split layout. Heavy display typography on the left balanced by a floating high-resolution cutout of a person wearing a futuristic VR headset on the right. - **Layering Order:** - Base background grid texture (`z-0`) - Ambient glowing gradient overlays (`z-0`) - Typography & CTA content (`z-20`) - Floating VR Model image cutout with soft drop shadow (`z-10`) - Floating stats & avatar badges (`z-20`) - Top navigation bar & bottom clipped dark footer bar (`z-30`) --- ## 2. Asset Specifications ### Background Grid Image ``` https://res.cloudinary.com/dynj3cnew/image/upload/v1784808406/hero-bg_mpic9x.png ``` *Applied to main section background container with `bg-cover bg-center bg-no-repeat opacity-90`.* ### Main VR Subject Image ``` https://res.cloudinary.com/dynj3cnew/image/upload/v1784806272/hero-model_pxgjga.png ``` *Floating transparent PNG cutout of person with VR headset positioned at `absolute right-0 sm:right-[5%] md:right-[10%] lg:right-[14%] bottom-0 sm:bottom-4 md:bottom-8 w-[280px] sm:w-[380px] md:w-[480px] lg:w-[560px] xl:w-[620px] object-contain select-none z-10 filter drop-shadow-2xl`.* ### Client Avatar Headshots ```ts export const CLIENT_AVATARS = [ { id: '1', name: 'Elena Rostova', image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=150' }, { id: '2', name: 'Marcus Chen', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=150' }, { id: '3', name: 'Sophia Vance', image: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&q=80&w=150' }, { id: '4', name: 'Julian Thorne', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=150' }, ]; ``` --- ## 3. Typography System - **Primary Display Font (`font-heading`):** Uppercase display typeface (`Syne` or `Plus Jakarta Sans`), weighted light-to-medium (`font-light`), line height `leading-[0.96]`, tracking `tracking-tight`. - **Display Size Scale:** `text-5xl sm:text-6xl md:text-7xl lg:text-[5.0rem]`. - **Body & Nav Font (`font-sans`):** `Plus Jakarta Sans` or `Inter` (`font-medium` and `font-semibold`), dark gray `#171717` or neutral `#525252`. --- ## 4. Component Structure & Exact Implementation ### `App.tsx` (Main Container) - Layout: `relative w-full h-screen min-h-[720px] max-h-[1100px] overflow-hidden bg-white text-neutral-900 flex flex-col justify-between selection:bg-neutral-900 selection:text-white` - Background overlay element: `absolute inset-0 z-0 pointer-events-none opacity-90 mix-blend-multiply bg-cover bg-center bg-no-repeat` with `backgroundImage: url('https://res.cloudinary.com/dynj3cnew/image/upload/v1784808406/hero-bg_mpic9x.png')`. ### `Navbar.tsx` (Header Navigation) - Fixed top row (`w-full max-w-7xl mx-auto px-6 sm:px-10 lg:px-16 pt-6 sm:pt-8 flex items-center justify-between z-30 pointer-events-auto`). - **Brand Logo:** `Box` icon (`w-5 h-5 text-neutral-900 stroke-[2.2]`) next to `NeoVision` title (`font-bold text-lg md:text-xl tracking-tight text-neutral-900`). - **Nav Items:** `Ecosystem`, `Avatars`, `Realms`, `Pricing`, `About` (`text-sm font-medium text-neutral-600 hover:text-neutral-900 transition-colors relative py-1`). Includes active indicator bar on current tab (`absolute bottom-0 left-0 right-0 h-[2px] bg-neutral-900 rounded-full`). - **Action CTA Button:** `Get Started` (`bg-neutral-900 hover:bg-neutral-800 text-white text-xs sm:text-sm font-medium px-4 sm:px-5 py-2 sm:py-2.5 rounded-full shadow-xs hover:shadow-md transition-all duration-300 flex items-center gap-1.5`). ### `HeroTitle.tsx` (Headline & Primary CTA) - Main Title Block: ```html <h1 className="font-heading text-5xl sm:text-6xl md:text-7xl lg:text-[5.0rem] font-light tracking-tight text-neutral-900 leading-[0.96] uppercase"> <span className="block relative">NEW DIGITAL</span> <span className="block font-normal text-neutral-950">REALITY</span> <span className="block text-neutral-800">ARCHITECTURE</span> </h1> ``` - Subtitle Badge & Button: ```html <button className="bg-neutral-900 hover:bg-neutral-800 text-white font-medium text-xs sm:text-sm px-7 sm:px-9 py-3.5 sm:py-4 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 active:translate-y-0 cursor-pointer flex items-center gap-2 group"> <span>EXPLORE ECOSYSTEM</span> <ArrowUpRight className="w-4 h-4 stroke-[2.5] group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" /> </button> ``` ### `VrModelSection.tsx` (VR Headset Model) - Centered right-side subject cutout image overlay: ```html <div className="pointer-events-none absolute right-0 sm:right-[5%] md:right-[10%] lg:right-[14%] bottom-0 sm:bottom-4 md:bottom-8 w-[280px] sm:w-[380px] md:w-[480px] lg:w-[560px] xl:w-[620px] object-contain select-none z-10 filter drop-shadow-2xl"> <img src="https://res.cloudinary.com/dynj3cnew/image/upload/v1784806272/hero-model_pxgjga.png" alt="Futuristic VR Headset Model" className="w-full h-auto object-contain" /> </div> ``` ### `HeroStats.tsx` (Social Proof & Secondary Copy) - Positioned vertically aligned below headline with class `-translate-y-8`. - Left Side: "Trusted by Clients" text + 4 overlapping circular client avatars (`w-10 h-10 sm:w-11 sm:h-11 rounded-full border-2 border-white shadow-md overflow-hidden`) + "20+" bold metric label (`font-heading font-bold text-2xl sm:text-3xl text-neutral-900 ml-3 sm:ml-4`). - Right Side: Circular Infinity Badge (`Infinity` icon in `w-11 h-11 rounded-full border border-neutral-300/90 bg-white/70 backdrop-blur-md`) + Paragraph text (`In this futuristic realm, users can explore hyper-realistic virtual environments, interact with AI-driven avatars.`). ### `FooterBar.tsx` (Asymmetrical Clipped Footer) - Dark background container (`bg-neutral-950 text-white py-6 sm:py-7 select-none shadow-2xl pointer-events-auto w-full relative min-h-[70px] sm:min-h-[90px] flex items-center`) with custom polygon clip-path: ```css clip-path: polygon(0 0, max(520px, 50%) 0, max(600px, 58%) 100%, 0 100%); ``` - Horizontal Gradient Accent Line: `absolute left-0 top-1/2 translate-y-6 w-12 sm:w-32 h-[2px] bg-gradient-to-r from-neutral-700 via-neutral-400 to-neutral-200 rounded-r-full opacity-80`. - Partner Logos: `Logoipsum` entries spaced with `pl-20 sm:pl-36 lg:pl-40 pr-6 sm:pr-10 lg:pr-16 flex items-center gap-6 sm:gap-10`. --- ## 5. Motion & Entrance Animations - Use `motion/react` with spring/cubic-bezier easing: `transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}`. - Fade-in & slide-up entrances for headline, avatar stats block, and floating VR model. --- ## 6. Section 2: About Us - The Digital Frontier ### Visual Philosophy & Layout - **Theme:** Obsidian dark mode (`#0a0a0c`) contrast section directly following the light hero section. - **Composition:** 12-column grid layout with image of a person wearing a glossy futuristic space helmet on the left, and crisp light headline typography and controls on the right. ### Asset Specification - **Model Image URL:** ``` https://res.cloudinary.com/dynj3cnew/image/upload/v1784873491/sec2-model_v1brbg.png ``` *Cutout of person wearing a dark futuristic helmet with transparent/seamless bottom edge. Container sizing: `relative w-full max-w-[540px] sm:max-w-[640px] md:max-w-[740px] lg:max-w-[850px] xl:max-w-[960px] lg:scale-115 xl:scale-125 lg:-ml-6 xl:-ml-12 origin-center`.* ### Content & Typography - **Eyebrow:** `ABOUT US` (`text-xs sm:text-sm font-semibold tracking-[0.35em] uppercase text-neutral-400 font-sans`). - **Headline:** ```html <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-[4.2rem] xl:text-[4.8rem] font-light tracking-tight text-white leading-[1.04] uppercase"> <span className="block">THE DIGITAL</span> <span className="block text-neutral-100 font-normal">FRONTIER</span> </h2> ``` - **Pill Badges:** `Digital`, `Reality`, `Next` (`px-5 py-1.5 rounded-full border border-neutral-800 bg-neutral-900/90 text-neutral-300 text-xs sm:text-sm font-medium tracking-wide`). - **Body Text:** `"Step into The Digital Frontier, where the boundaries between reality and virtual innovation disappear. This is the next era of immersive technology."` (`text-neutral-400 text-sm sm:text-base leading-relaxed max-w-lg font-normal`). - **Action Buttons:** 1. `Learn More` button (`px-7 py-3.5 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-white text-xs sm:text-sm font-medium border border-neutral-700/60 shadow-md`). 2. `Watch a Video` with Play circle button (`w-9 h-9 sm:w-10 sm:h-10 rounded-full border border-neutral-600 flex items-center justify-center` containing `Play` icon + `"Watch a Video"` text). --- ## 7. Section 3: Our Service ### Visual Philosophy & Layout - **Theme:** Obsidian dark canvas (`#0a0a0c`) with 3 sleek, dark rounded service cards (`bg-[#121215] border border-neutral-800/80 rounded-[24px]`). - **Header:** Uppercase headline `OUR SERVICE` on the left, paired with circular left/right chevron navigation buttons on the top right. ### Card Details & Structure 1. **Card 1: Reality Development** - Icon: VR Headset / Glasses (`Glasses` from `lucide-react`) in circular badge (`w-14 h-14 bg-neutral-800/60 border border-neutral-700/50 rounded-full`). - Title: `Reality Development` - Description: `"Step into the future with our custom VR development services, designed to create immersive digital experiences."` - Link: `Learn More` 2. **Card 2: Digital Assistants** - Icon: Compass / AI Navigator (`Compass` from `lucide-react`) in circular badge. - Title: `Digital Assistants` - Description: `"Enhance customer engagement and operational efficiency with our AI-driven virtual assistants. These intelligent avatars."` - Link: `Learn More` 3. **Card 3: Gaming Solutions** - Icon: Gamepad (`Gamepad2` from `lucide-react`) in circular badge. - Title: `Gaming Solutions` - Description: `"Revolutionize the gaming industry with our next-generation VR game development services."` - Link: `Learn More` --- ## 8. Section 4: Limitless Possibilities with NeoVision ### Visual Philosophy & Layout - **Theme:** Dark obsidian background (`#0a0a0c`). - **Headline:** Uppercase display typography: `LIMITLESS POSSIBILITIES WITH NEOVISION`. - **Composition (3-Column Grid):** - **Left Navigation:** Vertical interactive tab list (`Innovation` [Active], `Technology`, `Experience`). - **Center Card:** Large rounded rectangular image frame (`rounded-[24px]` / `rounded-[28px]` overflow-hidden shadow-2xl) containing the model image: ``` https://res.cloudinary.com/dynj3cnew/image/upload/v1784874696/sec4-model_qumxod.png ``` - **Right Detail Panel:** - Subheading: `How VR is Transforming Our Digital World` - Body Paragraph: `"Virtual Reality (VR) is no longer a concept of the future—it's a reality reshaping how we interact, work, and entertain ourselves."` - CTA Link: Underlined `Learn More` button. - Footer Meta Row: Date (`08 February 2025`) aligned left, Author (`Henry Leonardo`) aligned right. --- ## 9. Section 5: Voices of the Future (Testimonials) ### Visual Philosophy & Layout - **Theme:** Obsidian dark canvas (`#0a0a0c`) with ambient background ribbon vector graphic. - **Left Column:** - Headline: Uppercase display typography `VOICES OF THE FUTURE`. - Horizontal Divider Line: `w-full h-[1px] bg-neutral-800/90`. - Description Copy: `"Here, you'll hear firsthand from users, pioneers, and tech enthusiasts who are shaping the next generation of virtual reality and futuristic technology. Explore their stories and discover how we is transforming the way we interact with the digital world."` - **Right Column (3 Stacked Testimonial Cards):** - Card Container: `bg-[#121215] border border-neutral-800/80 rounded-[20px] p-6 sm:p-7 shadow-2xl flex items-center justify-between gap-6`. - **Card 1:** - Quote: `"NeoVision completely transformed the way I interact with virtual reality."` - Author: `James Rizaki` - Avatar: `https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=250` - **Card 2:** - Quote: `"Our team has adopted NeoVision's VR collaboration tools"` - Author: `Samantha Leonardo` - Avatar: `https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=250` - **Card 3:** - Quote: `"I've been gaming in VR for years, but NeoVision's technology"` - Author: `Mark Trevor` - Avatar: `https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=250` --- ## 10. Section 6: Dive Into The Future ### Visual Philosophy & Layout - **Theme:** Obsidian dark canvas (`#0a0a0c`) centering a large full-width hero card container (`rounded-[24px] sm:rounded-[32px] overflow-hidden border border-neutral-800/80 shadow-2xl`). - **Asset:** Model Image with cybernetic mask & visor: ``` https://res.cloudinary.com/dynj3cnew/image/upload/v1784876231/sec6-model_qhwenn.png ``` - **Typography & Controls:** - Headline (Left): Uppercase `DIVE INTO THE FUTURE` (`font-heading text-4xl sm:text-5xl md:text-6xl lg:text-[4.2rem] xl:text-[4.6rem] font-light tracking-tight text-white uppercase leading-[1.02]`). - Play Button (Right): Translucent glassmorphism circular play icon button (`w-12 h-12 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center`). - Paragraph (Right): `"invites you to immerse yourself in the groundbreaking world of NeoVision. Explore the limitless possibilities of futuristic technology and virtual reality."` (`text-neutral-300 text-xs sm:text-sm leading-relaxed max-w-sm`). --- ## 11. Section 7: Main Footer ### Visual Philosophy & Layout - **Theme:** Obsidian dark background (`#0a0a0c`) with 5-column navigation grid & bottom partner logos strip. - **Brand Header:** `NeoVision` logo with standard 3D cube symbol (`Box` from `lucide-react`) at the top left. - **5-Column Structure:** 1. **Email & Address:** `Email` (`contact@neovision.com`) and `Address` (`NeoVision Technologies 123`, `FutureTech Blvd`). 2. **Phone Number:** `Phone Number` (`+1 (800) 123-4567`). 3. **Quick Links:** Links to `Home`, `About Us`, `Services`, `Blog`. 4. **Explore:** Links to `Product Demos`, `Case Studies`, `Testimonials`, `Media & Press`, `Events & Webinars`. 5. **Brand Statement & Socials:** - Uppercase Title: `FUTURISTIC TECH & VR WEBSITE`. - Description Copy: `"Dive into a world where technology and virtual reality converge to create mind-blowing experiences."` - Circular Social Icon Badges: Dribbble, Behance (`Bē`), Instagram, Twitter. - **Bottom Partner Row:** 5 distinct `Logoipsum` partner badge items evenly spaced across the bottom.