Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to effectively redirect users to a planning session when they click the "Ver Planes" button on the homepage. The main purpose is to create a seamless user experience that emphasizes simplicity and clarity, ensuring that visitors can easily navigate to learn more about the available plans.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that captures attention and clearly communicates the purpose of the site, with the "Ver Planes" button prominently displayed.
2. **Plans Overview**: A concise section that outlines different plans available, with brief descriptions to help users understand their options.
3. **Call to Action (CTA)**: A compelling CTA encouraging users to explore plans, with the button redirecting them to the plans section seamlessly.
4. **Contact Information**: A footer or section that provides contact details or a simple contact form for inquiries.
5. **Responsive Design**: Optimized for mobile and desktop experiences, ensuring accessibility and usability across devices.

## 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 feature a vertical stack with the hero section at the top, followed by the plans overview, and concluding with the contact information in the footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required for this landing page.

## IMPLEMENTATION STEPS
1. **Setup Project**: Create a new React project using TypeScript and install Tailwind CSS.
2. **Create Components**:
   - Develop the Hero component with a prominent "Ver Planes" button.
   - Build the Plans Overview component to display plan options.
   - Design the Contact Information component for user inquiries.
3. **Implement Routing**: Use React Router (if necessary) to handle navigation, ensuring the button redirects users to the Plans Overview section.
4. **Apply Styles**: Use Tailwind CSS to style components according to the design specifications.
5. **Testing**: Check the responsiveness of the layout across different devices and browsers.

## USER EXPERIENCE
The user will land on a clean homepage featuring a hero section that clearly states the purpose of the site. By clicking the "Ver Planes" button, users will be smoothly redirected to the Plans Overview section where they can easily explore their options. The design will prioritize clarity and ease of navigation, ensuring that users can find the information they need without distractions.