A beautifully designed React + Vite application that showcases the complete journey of an artwork order from selection to delivery and celebration. This interactive page features six unique animated sections highlighting each stage of the process.
- Browse through a collection of beautiful artworks and sculptures from Ziguurats Company
- Professional framing with detailed product specifications
- Left-aligned images with right-aligned details
- Smooth slide transitions and indicators
- Displays artwork title, description, price, and specifications
- Celebrates the order placement with confetti animations
- Shows the joy of purchasing and the beginning of the delivery journey
- Features multiple celebration phases with celebratory images
- Animated confetti particles during celebration moments
- Progress tracking with visual indicators
- Step-by-step visualization of how the artwork is packaged
- Five stages: Quality Inspection, Protective Wrapping, Silk Ribbon, Premium Packaging, and Final Seal
- Timeline-based navigation
- Detailed descriptions of each packaging stage
- Highlighted key points for each process
- Shows the dispatch process from warehouse to delivery station
- Visual progress tracking with completed and current stages
- Five stages: Warehouse Prep, Carrier Pickup, Sorting & Routing, Regional Distribution, Ready for Delivery
- Detailed information about what happens at each stage
- Line-based progress indicator
- Animated delivery vehicle showing the journey to customer's doorstep
- Five phases with phase markers and progress tracking
- Visual checklist showing order journey
- Estimated time indicators
- Interactive phase selection with smooth transitions
- Final celebration of successful delivery
- Journey milestones: Package Received, Unwrapping, Inspection, Placement, and Celebration
- Celebration burst animation on final milestone
- Success checklist with verified delivery details
- Thank you message from Ziguurats Company
- React - UI Framework
- Vite - Fast build tool and development server
- CSS3 - Custom styling with animations
- JavaScript - Interactive functionality
src/
├── components/
│ ├── ArtworksSlider.jsx
│ ├── CelebrationSlider.jsx
│ ├── PackagingSlider.jsx
│ ├── DispatchSlider.jsx
│ ├── OutForDeliverySlider.jsx
│ └── DeliveredSlider.jsx
├── styles/
│ ├── global.css
│ ├── artworks-slider.css
│ ├── celebration-slider.css
│ ├── packaging-slider.css
│ ├── dispatch-slider.css
│ ├── out-for-delivery-slider.css
│ └── delivered-slider.css
├── App.jsx
├── App.css
├── main.jsx
└── index.css
- Node.js (v14 or higher)
- npm or yarn
- Navigate to the project directory:
cd order786- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and visit:
http://localhost:5173
- Slide animations for smooth content transitions
- Confetti effects during celebration moments
- Progress indicators that animate based on user navigation
- Hover effects on interactive elements
- Staggered animations for list items
- Vehicle animation showing delivery journey
- Burst animations for celebration finale
- Click navigation using arrow buttons
- Dot/circle indicators for direct slide selection
- Milestone cards that highlight current progress
- Progress bars showing completion status
- Responsive design for all device sizes
- Professional color scheme with earth tones (#8b7355 as primary)
- Gradient backgrounds for visual appeal
- Box shadows for depth
- Typography hierarchy with varied font sizes
- Border styling with decorative frames
- Smooth transitions and hover states
The application is fully responsive and works seamlessly on:
- Desktop browsers (1024px and above)
- Tablets (768px - 1023px)
- Mobile devices (below 768px)
All components adapt their layout and styling for different screen sizes.
This project uses pure CSS3 without any CSS frameworks like Tailwind CSS. The styling includes:
- Custom animations and keyframes
- Flexbox and CSS Grid layouts
- CSS variables for consistency
- Media queries for responsiveness
- Transform and transition properties for smooth animations
npm run devStarts the Vite development server with hot module replacement.
npm run buildCreates an optimized production build.
npm run previewPreviews the production build locally.
Edit the primary color by searching for #8b7355 in the CSS files and replacing with your desired color.
Replace the image URLs in each component's data array with your own Ziguurats Company artwork images.
Modify the CSS animations in global.css and component-specific CSS files to adjust timing and effects.
Edit the artworks array in ArtworksSlider.jsx to add more artwork items.
✨ Beautiful UI - Professional design with elegant color scheme and typography 🎬 Smooth Animations - Engaging animations throughout the journey 📱 Fully Responsive - Works perfectly on all device sizes ♿ Accessible - ARIA labels and semantic HTML 🚀 Fast Performance - Optimized with Vite 💻 Pure CSS - No CSS frameworks, lightweight styling 🎯 Interactive - Multiple ways to navigate through the content
- All images use placeholder URLs from Unsplash
- Replace these with actual Ziguurats Company artwork images
- The page is optimized for scroll-based navigation
- Each section takes up full viewport height for immersive experience
For issues or questions about this project, please refer to the component files and CSS sheets for detailed comments and structure.
Potential additions:
- Real image upload functionality
- Customer testimonials
- Augmented Reality (AR) preview
- Email notifications at each step
- Customer tracking dashboard
- Integration with order management system
Made with ❤️ for Ziguurats Company