Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a multi-page company website focused on providing information about dirt and related products. It will feature a home page, a contact page with a functional form, and additional pages such as tutorials or product information. The site aims to deliver a clean and user-friendly experience across all devices while ensuring that all functionalities, including forms and links, are operational.

## CORE FEATURES
1. **Home Page**: A welcoming introduction to the company, showcasing the primary offerings and a brief overview of what the site provides.
2. **Contact Page**: A fully functional contact form that sends messages directly to the designated email, ensuring users can easily reach out for inquiries.
3. **Tutorials/Products Page**: An informative section that details various products and tutorials related to dirt, enhancing user engagement and providing valuable content.
4. **Responsive Design**: The website will be optimized for mobile devices, ensuring that all pages look good and function well on smaller screens.
5. **User Authentication**: A signup/login system that allows users to create accounts and possibly access a message board or cart feature to demonstrate functionality.
6. **Footer Information**: The footer will include statements about the time taken to build the site, the tools used, and the number of prompts required to create the site.

## 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 header with navigation links, a hero section on the home page, content sections for each additional page, and a footer with company information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (as needed for user authentication and state handling)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and components.
3. **Create the Main Structure**: Set up routing for the home, contact, and additional pages using React Router.
4. **Design the Home Page**: Implement the hero section, key features, and a brief introduction to dirt.
5. **Develop the Contact Page**: Create a form that captures user input and integrates with an email service to send messages.
6. **Build Additional Pages**: Develop the tutorials/products page with informative content about dirt.
7. **Implement User Authentication**: Set up signup/login functionality with Redux or Context API to manage user sessions.
8. **Ensure Responsiveness**: Test and optimize the design for mobile and tablet devices using Tailwind's responsive utilities.
9. **Deploy the Website**: Publish the site using platforms like Vercel or Netlify to ensure it's available online.

## USER EXPERIENCE
Users will have a seamless experience navigating through the site. The home page will offer clear links to the contact form and product information. The contact page will provide an intuitive form that validates user input and offers confirmation upon submission. Additional content pages will be easy to locate and read, with a consistent layout and design. The responsive nature of the site will ensure that users on mobile devices have just as effective an experience as those on desktops. The footer will provide essential information about the site's development, enhancing user trust and transparency.