Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page designed to showcase a footwear design portfolio, simulating the experience of entering a shoe store. Each footwear project will be presented as if it were a product displayed in a store, allowing users to click on a product to "pick it up" and view detailed project information. 

## CORE FEATURES
1. **Hero Section**: A captivating introduction with an engaging headline and a background that evokes the feeling of stepping into a shoe store.
2. **Portfolio Display**: A grid layout showcasing individual footwear projects, each represented as a "product" that users can hover over to reveal more details or click to enter the project view.
3. **Project Detail View**: When a user clicks on a project, it opens in a new view with detailed images, descriptions, and insights into the design process.
4. **Contact Section**: A simple contact form for inquiries, allowing potential clients or collaborators to reach out easily.
5. **Responsive Design**: The layout adapts seamlessly to various screen sizes, ensuring an optimal experience on mobile and desktop devices.

## 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 feature a full-width hero section at the top, followed by a grid layout for the portfolio display, and a contact section at the bottom. The project detail view will overlay the grid, allowing users to return easily.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux (optional, for managing project states).

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project with TypeScript using `create-react-app` or a similar tool.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and any other necessary libraries through npm or yarn.
3. **Create the Layout**: Design the main layout structure using Tailwind CSS, ensuring the hero, portfolio, and contact sections are clearly defined.
4. **Implement the Hero Section**: Create a visually appealing hero section that captures the essence of a shoe store.
5. **Develop the Portfolio Grid**: Create a grid component to display the footwear projects, ensuring each project card has hover effects and clickable areas.
6. **Build Project Detail View**: Implement a modal or separate page to show detailed information for each project when clicked.
7. **Create the Contact Form**: Add a simple contact form with fields for name, email, and message, and handle form submission.
8. **Ensure Responsiveness**: Use media queries and Tailwind’s responsive utilities to make sure the site looks great on all devices.
9. **Test Interactivity**: Test all interactions, including project clicks and form submissions, to ensure a smooth user experience.

## USER EXPERIENCE
Users will be greeted by a visually striking hero section that draws them into the site. As they scroll down, they will encounter the portfolio display, where they can hover over projects to see quick details. Clicking on a project will transition them into a detailed view, providing an immersive look at the work. The contact section will be easily accessible for inquiries, encouraging user interaction and engagement. Overall, the experience will be fluid and intuitive, simulating the feel of exploring a shoe store online.