SkyElite — Premium Private Jet Charter

by Samin Sami

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>

<base target="_blank">

<!-- ==================== NAVIGATION ==================== -->
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500">
  <div class="max-w-7xl mx-auto px-6 lg:px-8">
    <div class="flex items-center justify-between h-20">
      <a href="#" class="flex items-center gap-2.5 group">
        <div class="w-2 h-7 bg-brand rounded-full group-hover:h-8 transition-all duration-300"></div>
        <span class="text-xl font-semibold text-gray-900 tracking-tight">SkyElite</span>
      </a>
      <div class="hidden md:flex items-center gap-8">
        <a href="#start" class="nav-link text-sm font-medium text-gray-700 hover:text-brand transition-colors relative group">
          Start<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand transition-all duration-300 group-hover:w-full"></span>
        </a>
        <a href="#story" class="nav-link text-sm font-medium text-gray-700 hover:text-brand transition-colors relative group">
          Story<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand transition-all duration-300 group-hover:w-full"></span>
        </a>
        <a href="#rates" class="nav-link text-sm font-medium text-gray-700 hover:text-brand transition-colors relative group">
          Rates<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand transition-all duration-300 group-hover:w-full"></span>
        </a>
        <a href="#benefits" class="nav-link text-sm font-medium text-gray-700 hover:text-brand transition-colors relative group">
          Benefits<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand...

CSS

html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .animate-fade-in-up { animation: fadeInUp 0.7s ease-out forwards; opacity: 0; }
  .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; opacity: 0; }
  .animate-scale-in { animation: scaleIn 0.35s ease-out forwards; }
  .animate-slide-down { animation: slideDown 0.3s ease-out forwards; }
  .animate-float { animation: float 3s ease-in-out infinite; }

  .delay-100 { animation-delay: 0.1s; }
  .delay-200 { animation-delay: 0.2s; }
  .delay-300 { animation-delay: 0.3s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-500 { animation-delay: 0.5s; }

  .glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.3);
  }
  .glass-dark {
    background: rgba(32,42,54,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  }

  .btn-primary {
    background: linear-gradient(135deg,...

JavaScript

tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        serif: ['Playfair Display', 'serif'],
      },
      colors: {
        brand: {
          DEFAULT: '#202A36',
          hover: '#1a2229',
          light: '#2d3a4a',
        },
        gold: {
          DEFAULT: '#c9a96e',
          light: '#e0c898',
        }
      }
    }
  }
}

// ==================== STATE ====================
let isMobileMenuOpen = false;
let bookingStep = 1;
let activeTab = 'features';
let tripType = 'one-way';

// ==================== NAVBAR SCROLL ====================
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
  if (window.scrollY > 50) {
    navbar.classList.add('glass', 'shadow-sm');
    navbar.classList.remove('bg-transparent');
  } else {
    navbar.classList.remove('glass', 'shadow-sm');
    navbar.classList.add('bg-transparent');
  }
});

// ==================== MOBILE MENU ====================
function toggleMobileMenu() {
  isMobileMenuOpen = !isMobileMenuOpen;
  const menu = document.getElementById('mobileMenu');
  const menuIcon = document.getElementById('menuIcon');
  const closeIcon = document.getElementById('closeIcon');

  if (isMobileMenuOpen) {
    menu.classList.remove('hidden');
    menu.classList.add('animate-slide-down');
    menuIcon.classList.add('hidden');
    closeIcon.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  } else {
    menu.classList.add('hidden');
    menu.classList.remove('animate-slide-down');
    menuIcon.classList.remove('hidden');
    closeIcon.classList.add('hidden');
    document.body.style.overflow = '';
  }
}

// ==================== MODAL ====================
function openModal() {
  const modal = document.getElementById('bookingModal');
  const content = document.getElementById('modalContent');
  modal.classList.remove('hidden');
  // Trigger...