I can see you have a beautiful romantic gift-sharing app. Now let me explore the codebase structure to build an integrated Next.js app:

Now I'll create an integrated Next.js app with your romantic gift-sharing website. Let me build the complete solution with proper components and styling:

Now let me create the main page component and all the necessary component files:

I've successfully integrated all the files into a complete Next.js app. Here's what I created:

Architecture Overview:

• Main Page (app/page.tsx) - State management and view navigation for all four screens
• Layout (app/layout.tsx) - Arabic RTL support with Cairo font
• Styles (app/globals.css) - Romantic theme with glass-morphism effects and floating heart animations

• Components:

  • HeartBackground - Continuously spawning floating heart animations
  • HomeView - Initial welcome screen with two CTA buttons
  • LoginView - Password-protected gift reveal with validation
  • EditorView - Gift creation with message, password, and optional media upload
  • GiftView - Beautiful gift reveal showing message, image, or video

Key Features:

• Full Arabic (RTL) support with proper language settings
• Romantic design with dark red gradient background and gold accents
• Glass-morphism containers with backdrop blur effects
• Smooth animations and transitions
• Password protection for gifts
• Media support (images/videos)
• Responsive mobile-first design
• Floating heart particle effects throughout

The app is now fully functional and ready to use! All views seamlessly navigate between each other while maintaining the romantic aesthetic.