Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a professional landing page designed to showcase a business with a unique and interactive experience. The page will feature 3D animations, scroll animations, and transitions, all aimed at engaging users and providing a visually captivating experience. It will also include essential business information pulled from Google Maps, ensuring users can easily access location details.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with 3D objects and animations that capture user attention immediately.
2. **Interactive 3D Items**: Elements within the page that users can interact with, enhancing engagement and providing a unique browsing experience.
3. **Scroll Animations**: Smooth transitions and animations as the user scrolls, creating a dynamic and immersive experience.
4. **Business Information**: Integration with Google Maps to display business location, hours, and contact details prominently.
5. **Call to Action (CTA)**: Clear and compelling buttons that direct users to take specific actions, such as contacting the business or visiting physical locations.

## 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 consist of a full-width hero section, followed by a grid layout for features, and a footer containing business details and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required for this landing page, but consider using React's built-in state management for any interactive elements.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Hero Component**: Design the hero section with 3D animations using CSS and JavaScript libraries for interactivity.
3. **Develop Interactive Items**: Implement 3D items that respond to user interactions, utilizing libraries such as Three.js or similar.
4. **Implement Scroll Animations**: Use Intersection Observer API and CSS animations to create smooth transitions as the user scrolls through the page.
5. **Integrate Google Maps**: Use Google Maps API to fetch and display business location and details.
6. **Design CTA Elements**: Create buttons and calls to action that are visually appealing and encourage user interaction.
7. **Testing and Optimization**: Ensure responsiveness and performance across devices, optimizing load times and animations.

## USER EXPERIENCE
Users will be greeted with an engaging hero section that draws them in with unique 3D animations. As they scroll down, they will experience smooth transitions and interactive elements that invite them to explore more about the business. The integration of Google Maps ensures they have all necessary contact information at their fingertips, enhancing usability and encouraging them to take action. The overall experience will be seamless, visually appealing, and focused on converting visitors into customers.