Lovable Prompt Creator - AI Prompt Generator

# OPNOT WORLD CLEAN TOUR Web Application Prompt

## APPLICATION OVERVIEW
This application is a comprehensive platform designed to promote and manage the "OPNOT World Clean Tour," a global music movement that unites communities to clean cities and create permanent parks from ocean plastic. The interactive website will engage users with immersive visuals and provide essential information about the tour, its mission, and how to get involved.

## CORE FEATURES
1. **Hero Section**: An animated world map displaying cities cleaned and upcoming events, featuring live counters and a compelling call-to-action to view the next city or volunteer.
   
2. **Interactive Map**: A dynamic, filterable world map that shows completed cities, upcoming locations, and voting options for future destinations, providing users with an interactive experience.

3. **The Cycle Animation**: A scroll-based animation illustrating the journey from festivals to park creation, showcasing community involvement and the transformation process.

4. **Cities Cleaned Gallery**: A grid layout displaying completed park projects with detailed statistics, photographs, and links to short documentaries.

5. **Parks Showcase**: A visual display of parks created from recycled materials, featuring 3D renders or real images, technical specifications, and testimonials from local officials and children.

6. **Community Engagement**: A social section showing the global Instagram feed, top volunteer leaderboard, and inspirational stories highlighting the movement's impact.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, focusing on clean, simple design with ample white space, ensuring a striking visual impact that aligns with the global rave theme.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and accessibility.
- **Layout**: 
  - Full-width hero section at the top.
  - Interactive map prominently displayed as a central feature.
  - Sections for animations, galleries, and community engagement arranged in a vertical scroll format.
  - Clear separation for the B2B section and transparency features towards the bottom.
- **Typography**: 
  - Headlines in bold geometric sans-serif font for emphasis.
  - Monospace font for data representation to maintain clarity and consistency.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for component-based architecture and strong type safety.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design iteration.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: React Context or Zustand for managing application state effectively.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Build Hero Section**: Create a full-width hero section with an animated world map and live counters using libraries like D3.js for animations.
3. **Develop Interactive Map**: Integrate Mapbox or Leaflet for the interactive map, ensuring it supports filtering by continent and displaying relevant data on click.
4. **Implement The Cycle Animation**: Use CSS animations and scroll-trigger libraries to create the animated cycle that highlights the process of cleaning and park creation.
5. **Create Cities Cleaned Gallery**: Design a grid layout for the gallery that pulls data dynamically for each city cleaned, including images and statistics.
6. **Build Parks Showcase**: Develop a section for park showcases that includes technical details and video testimonials.
7. **Implement Community Engagement Features**: Integrate social media feeds, volunteer leaderboards, and stories with dynamic content updates.
8. **Add B2B Section**: Create a form for cities interested in joining the tour and provide a downloadable dossier for local authorities.
9. **Ensure Responsiveness**: Test and optimize the application for mobile devices, ensuring a seamless user experience across all devices.

## USER EXPERIENCE
Users will be greeted by a visually striking hero section that captures the essence of the movement. They can explore the interactive map to learn about the impact of the tour in their cities, scroll through engaging animations that tell the story of the initiative, and participate in community activities through social media and volunteering opportunities. The application will also provide transparency through clear data tracking and insights into the movement’s achievements, fostering trust and encouraging new users to join the cause.