Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for TuPorta+, a fiber optic and telecommunications services comparison tool aimed at the Spanish market. The primary purpose of the landing page is to generate qualified leads by encouraging users to complete a personalized consultation form.

## CORE FEATURES
1. **Hero Section**: Engaging introductory area with a clear value proposition and a call-to-action (CTA) button for users to start comparing services.
2. **Personalized Form**: A conversational, multi-step form that collects user information progressively, enhancing user experience and reducing overwhelm.
3. **Trust Indicators**: A section highlighting the benefits of using TuPorta+, reinforcing trust without using numerical claims or testimonials.
4. **How It Works**: Visual representation of the steps involved in the comparison process, guiding users through what to expect.
5. **FAQs**: An accessible accordion-style FAQ section addressing common queries to alleviate user concerns.
6. **Final CTA**: A strong concluding call-to-action encouraging users to start their comparison, reinforced with a clear message of value.

## 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 layout will be structured with a fixed header, a prominent hero section, followed by sections for benefits, how it works, FAQs, and a final CTA. Each section will be clearly distinct with adequate spacing and visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but can be implemented using React's built-in state management or Context API if needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling.
2. **Create Components**: Build reusable components for the header, hero section, form, trust indicators, how it works, FAQs, and final CTA.
3. **Implement Routing**: Set up navigation routes using React Router if the design includes any further sections or to facilitate smooth user flow.
4. **Develop the Hero Section**: Design the hero section with a strong headline, sub-headline, and a prominent CTA button styled with the primary color.
5. **Build the Multi-Step Form**: Create a multi-step form component that captures user input progressively, including validation and error handling.
6. **Design Trust Indicators and How It Works Sections**: Create visually engaging sections that communicate the value proposition and process without using aggressive sales tactics.
7. **Develop the FAQ Section**: Implement an accordion component for FAQs, ensuring clear and concise answers to common questions.
8. **Final Touches**: Ensure responsiveness across devices, implement any necessary micro-interactions, and refine the design for clarity and engagement.
9. **Testing**: Conduct thorough testing for functionality, responsiveness, and accessibility compliance.

## USER EXPERIENCE
Users will first encounter a clean and inviting hero section that immediately communicates the value of TuPorta+. As they scroll, they will find sections that progressively build trust and inform them about the service, leading them naturally to the personalized form. The multi-step form will guide users through providing their information without overwhelming them, while the FAQs section addresses any lingering concerns. The final CTA will encourage users to take action, ensuring a smooth and engaging experience from start to finish. 

This landing page will be designed to convert visitors into qualified leads by emphasizing clarity, trust, and a human touch throughout the user journey.