Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to modernize the homepage of Nutrador, transforming it into a sleek, minimalist landing page that emphasizes clean design and user engagement. The new design will focus on delivering a clear message about the brand while showcasing its offerings in an appealing and accessible manner.

## CORE FEATURES
1. **Hero Section**: A striking hero area featuring a captivating headline, a subheadline, and a prominent call-to-action (CTA) button, encouraging visitors to explore more or sign up.
   
2. **Features Showcase**: A visually appealing section that highlights key benefits and features of Nutrador’s services, using icons and concise text to ensure clarity and engagement.
   
3. **Testimonials**: A dedicated area for customer testimonials to build trust and credibility, presented in a clean, easy-to-read format with user photos.
   
4. **Call-to-Action**: Clear and compelling CTAs strategically placed throughout the page, guiding users toward desired actions, such as signing up for a newsletter or exploring products.
   
5. **Contact Information**: A simple and accessible contact section with a form and alternative contact methods, ensuring users can easily reach out for inquiries.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasize a clean and simple design with ample white space, focusing on essential elements.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and create a fresh atmosphere.
- **Layout**: Utilize a single-column layout that flows smoothly from the hero section down to features, testimonials, and contact information, ensuring a seamless user experience.
- **Typography**: Use modern sans-serif fonts for headlines and body text for a contemporary feel. Maintain a clear hierarchy with larger font sizes for headings and smaller sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for a utility-first approach, ensuring responsive design and easy customization.
- **UI Components**: Implement shadcn/ui components for consistency and ease of use.
- **State Management**: Utilize React's built-in state management for handling form inputs and user interactions, if necessary.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Build reusable components for the header, footer, and main sections (hero, features, testimonials, contact).
3. **Implement Hero Section**: Design the hero section with an eye-catching background image or color, compelling text, and a prominent CTA button.
4. **Develop Features Showcase**: Create a grid layout for displaying features, incorporating icons and brief descriptions.
5. **Add Testimonials**: Implement a carousel or grid layout for customer testimonials, ensuring each testimonial is visually distinct.
6. **Build Contact Form**: Design a simple contact form section with fields for user input and a submit button.
7. **Ensure Responsiveness**: Test and adjust the layout for various screen sizes using Tailwind CSS breakpoints.
8. **Optimize Performance**: Minimize assets and optimize images for faster load times.

## USER EXPERIENCE
The user experience will focus on simplicity and ease of navigation. Visitors will first be greeted by an engaging hero section, guiding them to explore features and testimonials. Clear CTAs will lead users to take action, such as signing up or contacting the company. The layout will be responsive, ensuring a smooth experience across devices, and the minimalist design will keep distractions to a minimum, allowing users to focus on the content.