skyelite-private-jets

name	skyelite-private-jets
description	Use this plugin when the user wants a premium private-jet landing page hero: a fullscreen autoplay CloudFront video background, a max-w-7xl nav with a Lucide hamburger mobile dropdown, and a centered overlapping two-line headline (Premium. / Accessible.) with Discover + Book Now pill CTAs. Invoke for 'private jet landing', 'aviation hero', 'luxury travel hero', or when the user references the SkyElite template.
version	0.1.0
od	{"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}}

SkyElite Private Jets — Premium Hero Landing

Produce a premium private jet landing-page hero with a fullscreen video background, a clean centered overlapping headline, and two pill CTAs. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, video URL, layout, typography, and responsive behavior described below.

This is the authoritative build brief. Follow it exactly — the named colors, font weights, video URL, spacing, and breakpoints are locked.

Stack

• Default output: a single self-contained HTML file (the example.html seed). It already includes everything inline.
• If the user explicitly asks for a React + TypeScript + Vite + Tailwind project, port the seed faithfully: same tokens, same markup structure, lucide-react for the Menu/X icons, useState for the mobile-menu toggle, Inter (weights 400/500/600/700) from Google Fonts applied to the whole body. Do not change the design while porting.

Video Background (locked)

Use this exact CloudFront video URL (keep it remote — large stable CDN media):

https://plugin-assets.open-design.ai/plugins/skyelite-private-jets/hf_20260328_091828_e240eb17-6edc-4129-ad9d-98678e3fd238-86655b.mp4

• Attributes: autoplay muted loop playsInline.
• object-fit: cover, fills the entire hero viewport (height: 100vh), position: absolute; inset: 0; z-index: 0. No overlay.

Typography

• Inter loaded from Google Fonts, weights 400, 500, 600, 700, applied to the entire body via CSS.

Layout Structure

• Outer page: min-height: 100vh, background --gray-50 (#f9fafb).
• Hero section: position: relative; height: 100vh; overflow: hidden.
• Content wrapper: position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column (sits above the video).
• Main content area: flex: 1; display: flex; align-items: center; justify-content: center.

Navigation Bar

• Container: max-width: 80rem (7xl), centered, padding: 24px 32px (py-6 px-8), display: flex; align-items: center; justify-content: space-between.
• Brand on the left: "SkyElite" — font-size: 1.5rem (text-2xl), font-weight: 600, color --gray-900 (#111827).
• Desktop menu (hidden on mobile, md:flex), gap 40px: Start, Story, Rates, Benefits, FAQ. Links are --gray-900 with hover → --gray-700 (#374151), transition: color.
• Mobile hamburger button (visible only ≤767px): Lucide Menu ↔ X icons swap on toggle. Use useState (React) / a vanilla click handler (HTML).
• Mobile dropdown: absolutely positioned below the nav, background: rgba(255,255,255,0.95), backdrop-filter: blur(12px), border-radius: 16px, soft shadow, padded; the same five links stacked, each link has a hover background. Hidden by default; toggles open/closed with the hamburger.

Hero Content (centered, pulled up)

• Wrapper: centered text, margin-top: -320px (-mt-80) to pull the block up over the video.
• Eyebrow label: "PRIVATE JETS" — text-sm, font-weight: 600, color --gray-600 (#4b5563), letter-spacing: 0.1em (tracking-wider), uppercase, margin-bottom: 16px.
• Headline — two lines with an overlapping effect, font-weight: 400 (font-normal), line-height: 1 (leading-none), letter-spacing: -0.04em (tracking-tighter):
  • Line 1: "Premium." — color --gray-500 (#6b7280).
  • Line 2: "Accessible." — color --ink (#202A36), margin-top: -12px so it overlaps line 1.
  • Sizes: base 3.75rem (text-6xl), md 4.5rem (text-7xl), lg 6rem (text-8xl).
• Subtitle: "Your dedication deserves recognition." — text-lg (md: text-xl), color --gray-600, vertical margin 24px, max-width: 42rem (max-w-2xl).
• CTA row (gap 16px, centered):
  • Discover button: padding: 8px 16px, border-radius: 9999px (rounded-full), background --gray-300 (#d1d5db), text --gray-800 (#1f2937), font-weight: 500, hover background --gray-400 (#9ca3af).
  • Book Now button: same padding + rounded-full, white text, background --ink (#202A36), hover background #1a2229, smooth transition-colors.

CSS Variables (:root) — locked

--ink: #202A36;        --ink-hover: #1a2229;
--gray-50: #f9fafb;    --gray-300: #d1d5db;   --gray-400: #9ca3af;
--gray-500: #6b7280;   --gray-600: #4b5563;   --gray-700: #374151;
--gray-800: #1f2937;   --gray-900: #111827;

Animations / Transitions

• All interactive elements (nav links, both CTAs): transition-colors only (color / background-color), ~0.2s ease. No transforms, no scale — keep it clean and restrained.
• Mobile menu opens/closes by toggling a class; swap the Menu/X icon at the same time.

State / Interactions

• isMobileMenuOpen (React useState) / a boolean in vanilla JS toggles the mobile dropdown and swaps the hamburger icon.
• Tapping any link in the mobile dropdown closes it.

Responsive (mobile-first)

• Base (mobile): desktop menu hidden, hamburger shown; headline text-6xl; subtitle text-lg. Pull-up reduced so content stays on screen.
• md (≥768px): desktop menu visible, hamburger hidden; headline text-7xl; subtitle text-xl.
• lg (≥1024px): headline text-8xl.

Color Rules — hard

Neutral premium palette only: grays #f9fafb → #111827, plus the locked dark ink #202A36 (hover #1a2229). No purple/indigo, no saturated accent. The video carries all the color; the UI stays neutral. Keep all text contrast-safe over the light-toned video frames.