Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive web application for a company website, featuring a clean and minimalist design. The application consists of multiple pages, including a home page, a contact page with a functional form, and additional informational pages such as tutorials or product details. The site will be responsive and user-friendly, ensuring a seamless experience across devices.

## CORE FEATURES
1. **Home Page**: A visually appealing landing section that introduces the company, showcases key services or products, and includes a clear call to action (CTA).
2. **Contact Page**: A fully functional contact form that sends messages directly to the specified email using Formspree or a custom HTML solution.
3. **Additional Pages**: Sections for tutorials, product information, or other relevant content that engage users and provide value.
4. **User Authentication**: A signup/login system integrated with Supabase to manage users and authenticate sessions.
5. **Responsive Design**: Optimized for both desktop and mobile devices to ensure accessibility and usability across all platforms.
6. **Footer Information**: A footer on the home page that includes details about the site creation time, tools used, and the number of prompts utilized in the development process.

## 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**: A simple vertical layout with a hero section at the top, followed by content sections, and a footer. Each page will maintain a consistent look and feel.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for styling components.
- **UI Components**: shadcn/ui for pre-built components to ensure a cohesive design.
- **State Management**: Use React Context API or Zustand for managing state if needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies (React, Tailwind CSS, shadcn/ui, Supabase).
2. **Design the Layout**: Create a responsive layout structure using Tailwind CSS, ensuring that it adheres to the minimalist design principles.
3. **Develop the Home Page**: Implement the hero section, key features, and the footer with the specified information.
4. **Create the Contact Page**: Develop the contact form, integrate Formspree or utilize a custom HTML solution, and ensure functionality.
5. **Add Additional Pages**: Create pages for tutorials or product information, ensuring consistent styling and navigation.
6. **Implement User Authentication**: Set up Supabase for user management and integrate it into the application for login and signup functionality.
7. **Test Functionality**: Ensure all forms, links, and images work as intended, and check responsiveness on various devices.
8. **Deploy the Application**: Publish the website to a hosting service (e.g., Vercel or Netlify) and verify accessibility.

## USER EXPERIENCE
The application will prioritize user experience by providing intuitive navigation, clear CTAs, and a straightforward contact process. Users will easily access information, interact with the contact form, and authenticate their accounts. The minimalist design will facilitate focus on content while ensuring that the site is visually appealing and user-friendly across all devices.