Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a donation-focused website for a cat shelter in Bakersfield, California. The primary purpose is to encourage donations through an engaging and fun design, featuring multiple donation packages. The site will include essential pages like Home, Donate, About, and Contact, all aimed at maximizing conversion rates.

## CORE FEATURES
1. **Hero Section**: A captivating hero area on the homepage with an impactful image of the shelter's cats, a brief tagline, and a prominent "Donate Now" button to drive immediate action.
  
2. **Donation Packages**: A dedicated shop page displaying multiple donation options with descriptions and suggested amounts, allowing visitors to choose their level of contribution easily.
  
3. **About Page**: A page detailing the shelter's mission, stories of rescued cats, and the impact of donations, fostering a connection with potential donors.
  
4. **Contact Page**: A simple contact form for inquiries and additional information, along with the shelter's location and contact details.
  
5. **Navigation Header**: A clear and accessible header containing links to Home, Donate, About, and Contact pages along with the shelter's logo.
  
6. **Social Media Integration**: Links to social media profiles to encourage community engagement and sharing to widen the reach.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on a fun and engaging presentation of the shelter and its cats.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high readability and a friendly atmosphere.
- **Layout**: A single-page layout with a clear flow from the hero section to donation options, followed by the about section, and concluding with the contact information. The pages will be easy to navigate with smooth scrolling.
- **Typography**: Use a modern, sans-serif font for headings and body text, ensuring a friendly and approachable feel. Headings should be bold and larger to create a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and type-safe application.
- **Styling**: Tailwind CSS to create responsive and customizable designs effortlessly.
- **UI Components**: Utilize shadcn/ui for consistent and visually appealing user interface components.
- **State Management**: Context API or React Query as needed for managing state and data fetching.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Page Structure**: Set up the main pages: Home, Donate (Shop), About, and Contact, ensuring proper routing.
3. **Build Navigation Header**: Implement a responsive header component with navigation links and the "Donate Now" button.
4. **Design Hero Section**: Create the hero section with a captivating image, tagline, and call-to-action button.
5. **Implement Donation Packages**: Design the shop page with various donation options, including descriptions and amounts. Integrate payment processing methods as necessary.
6. **Develop About Page**: Populate the about page with engaging content about the shelter and its mission.
7. **Create Contact Page**: Implement a functional contact form and include the shelter's contact information.
8. **Responsive Design**: Ensure the website is fully responsive, testing on different devices and screen sizes.

## USER EXPERIENCE
The user experience will be engaging and straightforward. Visitors will be greeted by a warm hero section that captures their attention and encourages them to donate immediately. The process of selecting a donation package will be streamlined, with clear options presented. Each page will have easy navigation, allowing users to learn about the shelter or reach out for more information effortlessly. The overall design will evoke a sense of community and support, motivating users to contribute to the shelter's cause.