Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a single-page landing page using React, TypeScript, Vite, and Tailwind CSS. The primary focus is on recreating an engaging hero section with smooth animations and interactions while ensuring a minimalist design aesthetic that emphasizes typography and whitespace.

## CORE FEATURES
1. **Responsive Hero Section**: A full-height hero section with a background image and a grid pattern overlay, featuring an engaging title and call-to-action buttons.
2. **Smooth Mouse Tracking**: An interactive effect where the background adjusts based on mouse movements, creating a dynamic user experience.
3. **Reveal Layer Effect**: A canvas-based radial mask that reveals the background image as the user interacts, enhancing visual appeal.
4. **Persistent Navigation Bar**: A fixed navigation bar that adapts to different screen sizes, providing easy access to site sections.
5. **Mobile Dropdown Menu**: A responsive navigation menu that appears on mobile devices, allowing users to easily navigate through sections.

## 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 consists of a full-screen hero section with a grid background, a fixed navigation bar, and responsive elements that adapt to various screen sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: Utilize `lucide-react` for icons.
- **State Management**: Use React's built-in state management with hooks (`useState`, `useRef`).

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Vite and TypeScript. Install necessary dependencies: `react`, `react-dom`, `lucide-react`, `@supabase/supabase-js`.
2. **Configure Tailwind CSS**: Set up Tailwind CSS following its documentation, ensuring it processes your CSS correctly. Include the font import in `src/index.css`.
3. **Create the Hero Section**:
   - Implement a full-height section with a background image and grid SVG.
   - Add a title and buttons within the hero section, styled according to the design specifications.
4. **Implement Mouse Tracking**:
   - Create a mouse tracking effect that updates the grid background and reveals the layer when the user moves the mouse.
5. **Navigation Bar**:
   - Add a fixed navigation bar with responsive elements, ensuring it displays properly on both desktop and mobile devices.
   - Implement a dropdown for mobile navigation that toggles visibility based on the hamburger icon.
6. **Reveal Layer Functionality**:
   - Set up a canvas that draws a radial gradient based on mouse position, applying it as a mask for the background image.
7. **Testing and Optimization**: Test responsiveness across various devices and screen sizes, ensuring animations are smooth and visual elements are correctly positioned.

## USER EXPERIENCE
Users will encounter a visually engaging landing page that dynamically responds to their interactions. The mouse tracking feature provides a unique experience as they navigate, while the reveal layer effect adds depth to the hero section. The navigation bar facilitates easy access to content, ensuring a seamless browsing experience whether on mobile or desktop. The minimalist design enhances readability and user engagement, making the content the focal point.