Premium Air - Landing Page

A modern, clean landing page for the world's most unnecessary product: Premium Air. Features a complete mock checkout flow and 5 unique products.

Features

• Clean, modern responsive design
• Mock checkout flow (no payment integration required)
• 5 unique premium air products
• Multiple content sections:
  • Hero with trust indicators
  • Statistics showcase
  • Product collection
  • Process explanation
  • Customer testimonials
  • Feature highlights
  • Call-to-action
• Success page with order confirmation
• Network-accessible server
• Mobile-responsive design

Products

1. Mountain Peak Air - $99

   • Captured from the Himalayas at 8,000 meters
   • Oxygen-rich formula
   • 500ml bottle

2. Ocean Breeze Air - $149 (Premium)

   • Harvested from Bora Bora at dawn
   • Salt-infused essence
   • 750ml bottle

3. Desert Mirage Air - $129 (New)

   • Collected from the Sahara at sunset
   • Heat-treated
   • 600ml bottle

4. Arctic Aurora Air - $199 (Exclusive)

   • Bottled under Northern Lights in Iceland
   • Aurora-enhanced, ultra-pure
   • 1L bottle

5. Rainforest Mist Air - $119 (Eco-Friendly)

   • Harvested from the Amazon at dawn
   • 30% more oxygen, botanical infusion
   • 500ml bottle

Setup Instructions

1. Install Dependencies

npm install

2. Run the Server

npm start

The server will start and display:

• Local URL: http://localhost:3000
• Network URLs: http://[your-ip]:3000 (accessible from other devices on your network)

3. Test the Mock Checkout

• Browse products on the homepage
• Click "Purchase Now" on any product
• Fill out the mock checkout form (accepts any input)
• View the success page with order confirmation

Project Structure

.
├── index.html          # Main landing page with all sections
├── checkout.html       # Mock checkout page
├── success.html        # Purchase success page
├── styles.css          # All styling (modern, responsive)
├── app.js              # Main JavaScript (navigation, purchase flow)
├── checkout.js         # Checkout form handling
├── server.js           # Express server
├── package.json        # Dependencies
├── .env                # Environment variables (optional)
├── .env.example        # Example environment variables
├── .gitignore          # Git ignore rules
└── README.md           # This file

Key Sections

Landing Page

• Hero - Eye-catching gradient header with floating animation
• Stats - Impressive (fake) statistics
• Products - 5-product grid with hover effects
• Process - 4-step process explanation
• Testimonials - 3 humorous customer reviews
• About - Why Premium Air features
• CTA - Final call-to-action section
• Footer - Complete footer with links

Mock Checkout

• Contact information
• Shipping address
• Payment details (simulated)
• Order summary
• Smooth form validation

Success Page

• Order confirmation
• Mock order ID generation
• Product and amount display
• Animated success indicators

Environment Variables (Optional)

You can create a .env file for configuration:

PORT=3000
NODE_ENV=development

The .env file is gitignored to prevent accidental commits.

Technology Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Backend: Node.js, Express.js
• Styling: CSS Grid, Flexbox, Custom Properties
• No external dependencies for frontend (no React, Vue, etc.)
• No payment processing (mock checkout only)

Design Highlights

• Purple gradient hero section
• Floating bottle animation
• Smooth scroll navigation
• Hover effects on cards
• Responsive grid layouts
• Modern glassmorphism effects
• Mobile-first responsive design

Mock Checkout Flow

1. User clicks "Purchase Now" on any product
2. Redirects to checkout page with product details in URL
3. User fills out form (any input accepted)
4. Simulated 1.5s processing delay
5. Generates mock order ID
6. Redirects to success page with order details

Development

The server runs on 0.0.0.0 to be accessible on your local network. Perfect for:

• Testing on mobile devices
• Showing to others on the same WiFi
• Development across multiple devices

Deployment

When deploying to production:

1. Set NODE_ENV=production in environment variables
2. Update PORT if needed
3. Ensure your hosting platform supports Node.js
4. All static files are served from the same directory

Notes

• This is a parody product for demonstration purposes
• Mock checkout - no real payment processing
• No database - all data is ephemeral
• Perfect for portfolio or learning projects
• All "customer reviews" are fictional and humorous

---

Premium Air - Because nothing says luxury like paying for something that's abundantly free! 💨

No air was harmed in the making of this product.