Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Gabe's Basketball is a web application designed to serve as an informational and interactive platform for a basketball team based in Livermore, California. The application will feature a clean, minimalist design that allows users to easily navigate through pages containing tutorials, product information, a contact form, and a member login system. 

## CORE FEATURES
1. **Home Page**: An engaging landing page with information about Gabe's Basketball, showcasing team highlights, upcoming events, and CTA buttons for signing up or contacting the team.
2. **Contact Page**: A functional contact form that sends messages directly to your email, ensuring clear communication with visitors.
3. **Tutorials/Information Page**: A dedicated section for basketball tutorials or tips, providing valuable content for players and fans.
4. **User Authentication**: A login/signup system allowing users to register and access exclusive content or features.
5. **Message Board or Cart**: An interactive feature for users to discuss topics or manage products, demonstrating the functionality of the site.
6. **Responsive Design**: The application will be optimized for mobile devices, ensuring accessibility for all users.

## 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 top navigation bar, a hero section on the home page, followed by content sections (features, tutorials, etc.), and a footer with contact information and site credits.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context or Zustand (depending on complexity)

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Core Components**:
   - Build a functional navigation bar with links to Home, Contact, and Tutorials/Information pages.
   - Design the Home page to include a hero section, an introduction to Gabe's Basketball, and highlights.
3. **Develop the Contact Page**:
   - Implement a contact form using Formspree or HTML with proper styling.
   - Ensure form validation and error handling are in place.
4. **Create Tutorials/Information Page**:
   - Design a layout for displaying tutorials or information related to basketball.
5. **User Authentication**:
   - Set up a simple login/signup system using local storage or an external service.
6. **Implement Message Board or Cart**:
   - Develop an interactive feature where users can post messages or manage items.
7. **Ensure Responsiveness**: Test the application on various devices and screen sizes to ensure a seamless user experience.
8. **Deploy the Application**: Publish the site using a suitable service (e.g., Vercel, Netlify) and ensure all links and images are functional.

## USER EXPERIENCE
Users will have a straightforward experience navigating through the site. The landing page will attract attention with vibrant visuals and key information. The contact form will be easily accessible, allowing users to reach out without hassle. Tutorials and user authentication will provide engaging content and create a sense of community among users. The minimalist design will ensure that the focus remains on the content, enhancing user satisfaction. 

This comprehensive prompt provides a clear roadmap for developing Gabe's Basketball website, ensuring all key features and design elements are addressed effectively.