Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase tattoos and provide a shop for tattoo-themed apparel. The site will highlight the artist's portfolio and merchandise, featuring a clean, minimalist design that emphasizes visual impact and ease of navigation to enhance user engagement and conversion.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a large image of tattoos, a brief description, and a call-to-action (CTA) button leading to the shop.
2. **Tattoo Gallery**: A visually appealing gallery displaying high-quality images of the tattoos, allowing users to explore the artist's work.
3. **Apparel Shop**: An integrated e-commerce section where users can browse and purchase tattoo-themed apparel directly from the site.
4. **Testimonials**: A section showcasing customer reviews and experiences to build trust and encourage new customers.
5. **Contact Form**: An easy-to-use contact form for inquiries, allowing potential clients to reach out for custom tattoo requests.
6. **Social Links**: Icons linking to social media platforms to enhance community engagement and allow users to follow the artist’s work.

## 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 layout will be structured in a single-column format, with sections stacked vertically for easy scrolling. The hero will be at the top, followed by the tattoo gallery, shop, testimonials, and contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page, simple props and state management will suffice.

## IMPLEMENTATION STEPS
1. **Set Up React Project**:
   - Initialize a new React project using Create React App with TypeScript.
   - Install necessary dependencies: React Router (for navigation), Tailwind CSS, and shadcn/ui.
   
2. **Configure Tailwind CSS**:
   - Set up Tailwind CSS by creating a configuration file and including it in your project.
   - Define the primary color and typography in the Tailwind CSS configuration.

3. **Create Component Structure**:
   - Develop the Hero, Gallery, Shop, Testimonials, and Contact components.
   - Ensure each component is reusable and styled according to the design specifications.

4. **Add Routing**:
   - Implement React Router to handle navigation between sections if necessary (e.g., linking from the hero to the shop).

5. **Build E-commerce Functionality**:
   - Integrate a simple shopping cart solution to allow users to add items and manage their purchases.

6. **Test and Optimize**:
   - Test the website on various devices to ensure responsiveness and user experience.
   - Optimize images for faster loading times.

## USER EXPERIENCE
The user journey will begin with an engaging hero section that invites visitors to explore the tattoo portfolio. Users can easily navigate to the tattoo gallery to view different works and click through to the apparel shop for purchases. Testimonials will provide social proof, and the contact form will facilitate communication for custom inquiries. The minimalist design will keep distractions to a minimum, allowing users to focus on the content and enhancing overall satisfaction.