Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a scroll animation landing page focused on promoting a meme coin represented by a green pork. The main purpose is to provide an engaging and interactive experience as users scroll through the page, with pop-up cards that display relevant information at various scroll points.

## CORE FEATURES
1. **Scroll Animation**: The page features smooth scrolling with animations that trigger as the user scrolls down, enhancing user engagement.
2. **3D Pop-Up Cards**: At each scroll stop, a 3D card pops up in the center of the screen displaying information related to that section, providing a dynamic and visually appealing experience.
3. **Responsive Design**: The layout will adjust seamlessly across different devices, ensuring a consistent experience on desktops, tablets, and mobile devices.
4. **Information Sections**: Each section will include visuals and brief descriptions about the meme coin, its purpose, and community benefits.
5. **Call to Action (CTA)**: A prominent CTA button will encourage users to engage with the meme coin, whether through a buy link or a community forum.
6. **Minimalist Aesthetic**: The overall design will maintain a clean and simple look, emphasizing usability and clarity.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout will consist of a vertical scroll with distinct sections for each information card, utilizing a centered alignment for the pop-up cards at each scroll stop.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management for handling animations and pop-up visibility.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui components.
2. **Design Layout**: Create the basic layout structure using Tailwind CSS, focusing on a vertical scroll experience.
3. **Implement Scroll Animation**: Use React's useEffect and useState to handle scroll events and trigger animations.
4. **Create 3D Cards**: Develop the pop-up card component with 3D styling using CSS transformations, ensuring it appears in the center of the viewport on scroll.
5. **Integrate Content**: Populate each section with information about the meme coin, ensuring it aligns with the overall theme and aesthetics.
6. **Add CTA**: Position a CTA button at the end of the page to drive user engagement, utilizing the primary color for emphasis.
7. **Test Responsiveness**: Ensure the layout and animations work seamlessly on various screen sizes and devices.
8. **Optimize Performance**: Refine animations and loading times for a smooth user experience.

## USER EXPERIENCE
Users will experience a captivating journey as they scroll through the landing page, with each section revealing new information about the meme coin. The 3D cards will provide interactive insights, encouraging users to engage further with the content. The minimalist design will ensure that users focus on the information presented without distractions, while the responsive design will accommodate all device types for a broader reach.