Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project "Barcelona" is a minimalist landing page designed to showcase a brand or service with a clean and simple aesthetic. Its main purpose is to attract visitors and convert them into leads or customers through compelling content, clear calls to action, and an easy-to-navigate layout.

## CORE FEATURES
1. **Hero Section**: A captivating introduction that includes a headline, subheadline, and a prominent call-to-action button encouraging users to engage.
2. **Features Section**: A concise overview of key features or services offered, presented in a visually appealing format with icons or images.
3. **Testimonials Section**: A space to display customer reviews or quotes that build trust and credibility for the brand.
4. **Call to Action (CTA)**: Strategically placed buttons that guide users toward taking specific actions, such as signing up or contacting for more information.
5. **Contact Information**: A simple contact form or section where users can easily reach out for inquiries or support.
6. **Responsive Design**: Ensure the layout adapts seamlessly across different devices and screen sizes for optimal user experience.

## 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 in sections—starting with a full-width hero area, followed by features in a grid format, testimonials in a slider or card format, and a footer containing contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not needed for a landing page but can be integrated if dynamic content is required.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project with TypeScript using Create React App or your preferred setup.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create the Layout**: Structure the application with sections for the hero, features, testimonials, and contact.
4. **Implement the Hero Section**: Add a full-width image or background with text overlay, including a CTA button.
5. **Develop the Features Section**: Use grid layout to showcase features with icons and short descriptions.
6. **Add Testimonials**: Implement a carousel or grid for displaying testimonials, ensuring it is visually appealing.
7. **Create the Contact Section**: Design a simple contact form for user inquiries.
8. **Apply Styling**: Use Tailwind CSS classes to style components according to the design specifications.
9. **Test Responsiveness**: Ensure that the layout works well on different devices and screen sizes.

## USER EXPERIENCE
Visitors will be greeted with a striking hero section that highlights the brand's value proposition. As they scroll down, they will encounter well-organized sections detailing features, followed by testimonials that build credibility. Clear calls to action will guide users to engage further, whether that’s signing up for a newsletter or reaching out for more information. The responsive design ensures a seamless experience across all devices, enhancing user engagement and conversion potential.