Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a premium, professional, and futuristic website for "Mangueras y Conexiones de Toluca," specializing in hydraulic hoses and industrial parts. The website will feature multiple independent sections that communicate exclusivity, industrial power, and advanced technology, aiming to provide a sophisticated user experience that reflects the company’s high standards.

## CORE FEATURES
1. **Hero Section**: A dynamic, cinematic hero section featuring an automatic image slider showcasing modern Freightliner trucks, heavy machinery, and premium hydraulic hoses with smooth transitions and subtle red lighting effects.
2. **About Us**: A dedicated section outlining the company's mission, vision, and core values with elegant design and modern animations.
3. **Brands Showcase**: An attractive carousel displaying logos of partnered brands with hover effects, set against a dark background to maintain visual impact.
4. **Product Catalog**: A categorized and elegantly designed product catalog that allows for smooth navigation through various premium product cards, each featuring professional images and essential details.
5. **Contact Information**: A professional contact section with integrated Google Maps and prominent calls-to-action for WhatsApp, Facebook, and Instagram.
6. **Social Media Integration**: Direct links to the company's social media profiles to engage with customers on popular platforms.

## 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 website will be structured into distinct sections (Home, About Us, Brands, Catalog, Contact), with a fixed premium navigation menu for seamless user experience. Each section will feature its own unique design and animations.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, can use context API or Redux if necessary for state handling.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**: Build individual components for each section (Hero, About Us, Brands, Catalog, Contact).
3. **Implement Navigation**: Create a fixed top navigation bar that links to each section for smooth scrolling.
4. **Design Hero Section**: Implement the dynamic image slider using a library like Swiper.js, ensuring smooth transitions and effects.
5. **Build About Us Section**: Incorporate mission, vision, and values using stylish typography and animations.
6. **Develop Brands Showcase**: Use a carousel component to display brand logos with hover effects and dark backgrounds.
7. **Construct Product Catalog**: Design the catalog layout with categorized cards, ensuring responsiveness and elegant animations.
8. **Integrate Contact Section**: Embed Google Maps and add buttons for WhatsApp and social media links.
9. **Testing and Optimization**: Test for responsiveness across devices and optimize loading times for images and animations.
10. **Deployment**: Deploy the website using a service like Vercel or Netlify.

## USER EXPERIENCE
Key user interactions will involve smooth scrolling between sections through the navigation menu, engaging with the hero section's dynamic visuals, and easily accessing product information via the categorized catalog. Animation effects will enhance the modern feel, making the experience feel premium and technologically advanced. Each section will be designed to maintain user interest while providing all necessary information in an elegant format.