🎨 OrderlyX Premium 3D Landing Page

A Chanel-level sophisticated 3D product carousel with auto-advance functionality.

🚀 View Full Landing Page 📖 Read Documentation

⚡ Quick Start: Click the button above to see the full premium landing page in action!

✨ Key Features

🎬 Premium Animations

Products fly in from right, exit to left with smooth 1.5s cubic ease-out transitions and arc motion.

⏱️ Auto-Advance

Automatically cycles through 4 products every 5 seconds. Manual navigation resets the timer.

✨ 1000 Particles

Animated magenta particles create depth and premium atmosphere in the 3D scene.

📱 Fully Responsive

Optimized for desktop, tablet, and mobile with smooth 60fps performance.

🎨 Brand Colors

Background Gradient: #6A0E5A → #d134aa → #6A0E5A
Primary Buttons: #F97F02 → #F9B233 → #F97F02
Particles: #d134aa (magenta)
Accents: #F97F02 (orange) and #F9B233 (gold)

🎯 Product Showcase

1. Reduce Waste

Identify Overstocked Products

Automatically identifies overstocked products and recommends action.

2. Increase Profits

Automated Replenishment

Provides automated recommendations based on sales patterns.

3. Prevent Spoilage

Rotate Dormant Products

Identify and rotate products to prevent spoilage and loss.

4. Save Time

Advanced Analytics

Advanced algorithms provide actionable insights.

🚀 Integration Options

Option 1: Standalone HTML

Perfect for immediate deployment. No build process required!

            
                <!-- Simply link to the file -->

                <a href="orderlyx-landing.html">View Landing Page</a>

                <!-- Or embed in an iframe -->

                <iframe src="orderlyx-landing.html" width="100%" height="800px"></iframe>

Option 2: React Component

For React 18+ projects with Three.js installed.

            
                import OrderlyXLanding from './orderlyx-landing';

                function App() {

                  return <OrderlyXLanding />;

                }

🎮 User Interactions

Auto-Advance: Products cycle every 5 seconds
Arrow Navigation: Click left/right arrows to navigate manually
Progress Bars: Click any of the 4 progress indicators
Timer Reset: Manual actions reset the auto-advance timer

🔧 Technical Specs

Three.js r128

WebGL renderer with antialiasing and optimal performance settings.

Camera Setup

FOV 45°, Position Z=8 for perfect product viewing angle.

4 GLB Models

Premium 3D product models with auto-scaling and centering.

Dynamic Lighting

Ambient, directional, and spot lights for premium look.

📁 Files Included:
• orderlyx-landing.html - Standalone version (ready to use)
• orderlyx-landing.jsx - React component
• README-LANDING.md - Complete documentation
• demo-integration.html - This file (integration guide)

Ready to Experience It?

🎨 Launch Premium Landing Page →

Built with ❤️ for OrderlyX | Inspired by Chanel Bleu parfum website

Version 1.0 | October 2025