Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a modern, sophisticated landing page for Lojas Comax that enhances user experience through a clean and elegant design. The goal is to provide a visually attractive site that engages customers, incorporates animations, and invites users to explore the offerings.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area with a captivating headline, subheadline, and a prominent call-to-action (CTA) button that encourages users to explore products or services.
2. **Product Showcase**: A dynamic section displaying featured products or services with high-quality images, brief descriptions, and links to detailed pages.
3. **Animations**: Smooth animations for various elements like buttons, transitions between sections, and hover effects to create an engaging user experience.
4. **Testimonials**: A section highlighting customer reviews and testimonials to build trust and credibility.
5. **Contact Form**: An easy-to-use contact form allowing users to reach out for inquiries, featuring fields for name, email, and message.
6. **Footer**: A comprehensive footer with links to social media, contact information, and additional site navigation.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Focus on clean lines, ample white space, and a simple design that encourages user interaction.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a pleasant viewing experience.
- **Layout**: 
  - A single-page scroll layout with sections for the hero, product showcase, testimonials, contact form, and footer.
  - Smooth scrolling and anchored navigation for easy access to different sections.
- **Typography**: 
  - Use modern, sans-serif fonts like "Roboto" or "Montserrat" for headings and body text.
  - Establish a clear hierarchy with larger fonts for headlines and smaller, readable sizes for body content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling that allows for rapid design adjustments.
- **UI Components**: Utilize shadcn/ui for pre-built components that enhance functionality and design consistency.
- **State Management**: While not strictly necessary for a landing page, consider using React’s built-in state management for handling form submissions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and configure Tailwind CSS.
2. **Create Components**: Build individual components for the hero section, product showcase, testimonials, contact form, and footer.
3. **Implement Animations**: Use CSS transitions and animations for buttons and section changes to create a lively experience.
4. **Design Layout**: Structure the main layout with a single-page format, ensuring smooth scrolling and clear section visibility.
5. **Integrate Forms**: Set up the contact form with appropriate validation for user inputs.
6. **Deploy**: Test the landing page for responsiveness across devices and deploy to a hosting service.

## USER EXPERIENCE
The user journey begins at the hero section, where visitors are immediately drawn in by the captivating visuals and clear CTA. As they scroll down, they encounter the product showcase, allowing them to explore offerings. The inclusion of testimonials enhances trust, while the contact form provides a straightforward way for users to engage further. The smooth animations throughout the site create an enjoyable browsing experience, ensuring users feel welcomed and encouraged to return.