Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a comprehensive and interactive web application for Rimal Engineering, a construction products supplier in the UAE since 1989. The application will feature a modern, premium aesthetic with smooth transitions, engaging animations, and interactive elements that transform visitors into active participants.

## CORE FEATURES
1. **Hero Section**: A visually captivating hero area that showcases Rimal Engineering's products and brand identity with striking imagery and dynamic animations.
2. **Product Showcase**: An interactive display of engineering products featuring detailed descriptions, images, and 3D visualizations that allow users to explore products in depth.
3. **Interactive Elements**: Incorporate micro-interactions, such as buttons changing color on hover and layouts that morph or reveal content based on user actions.
4. **User Engagement Tools**: Features like interactive maps, quizzes, and personalization tools to enhance user engagement and keep visitors on the site longer.
5. **Cinematic Transitions**: Implement scrollytelling zoom transitions and parallax effects to guide users through a visually immersive experience.
6. **Contact and Inquiry Section**: A streamlined contact form that enables users to reach out for more information or product inquiries easily.

## 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 main layout will be a single-page format with a vertical scroll structure, featuring a hero section at the top, followed by product showcases, interactive elements, and a contact section.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (if needed)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React with TypeScript project and install Tailwind CSS and shadcn/ui components.
2. **Design the Hero Section**: Create a responsive hero section with high-quality images and animations that reflect the brand's luxury aesthetic.
3. **Build the Product Showcase**: Develop an interactive product display with 3D visualizations using Three.js or similar libraries for depth and engagement.
4. **Implement Micro-Interactions**: Add subtle animations and transitions throughout the application to enhance user experience.
5. **Develop User Engagement Tools**: Integrate tools such as interactive maps and quizzes to promote user interaction and keep visitors engaged.
6. **Create the Contact Section**: Develop a user-friendly contact form that allows visitors to easily get in touch for inquiries.

## USER EXPERIENCE
The key user interactions will involve seamless navigation through smooth scrolling and cinematic transitions. Users will experience an engaging environment where they can explore products and features interactively. Hover effects and micro-interactions will provide immediate feedback, enhancing the overall experience and keeping users engaged with the content.

This prompt outlines a comprehensive plan to create a minimalist, interactive web application for Rimal Engineering, aligning with the user's vision for a modern, engaging digital presence.