Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modern landing page for a cat shelter donation center. The primary goal is to create an engaging and visually appealing web presence that encourages visitors to make donations and support the shelter's mission. The design will focus on simplicity and user experience, making it easy for users to navigate and contribute.

## CORE FEATURES
1. **Hero Section**: A captivating hero area that features an appealing image of cats available for adoption, a catchy tagline, and a prominent call-to-action (CTA) button to donate.
2. **About Us**: A brief section that tells the story of the shelter, its mission, and the impact donations have on the lives of the cats.
3. **Donation Options**: Clear and straightforward options for users to make donations, including one-time and recurring donation options.
4. **Success Stories**: Testimonials and stories from adopters highlighting the positive impact of the shelter, encouraging visitors to contribute.
5. **Contact Information**: A simple contact form and social media links for visitors to reach out or follow the shelter's updates.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean and simple design that utilizes plenty of white space, ensuring a calm and inviting atmosphere.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and visual comfort.
- **Layout**: A single-scroll layout featuring a hero section at the top, followed by the About Us section, Donation Options, Success Stories, and a footer with contact information and social links.
- **Typography**: Use a modern sans-serif font like 'Montserrat' or 'Open Sans' for headings and body text. Ensure a clear hierarchy with larger font sizes for headings and smaller sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and utility-first styling
- **UI Components**: Utilize shadcn/ui for consistent and reusable UI components
- **State Management**: Use React's built-in state management for handling form submissions and dynamic content

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Structure**: Set up the main layout components: Header, HeroSection, AboutUs, DonationOptions, SuccessStories, and Footer.
3. **Design Hero Section**: Implement the hero section with a full-width background image, tagline, and CTA button styled with Tailwind CSS.
4. **Develop About Us Section**: Add content to explain the shelter’s mission and values, utilizing typography styles for clarity.
5. **Implement Donation Options**: Create a simple form allowing users to select donation amounts and frequencies, ensuring it is user-friendly and visually appealing.
6. **Add Success Stories**: Showcase testimonials in a visually engaging manner, possibly using cards or slider components for better presentation.
7. **Build Contact Information Section**: Include a contact form with fields for name, email, message, and links to social media.
8. **Ensure Responsiveness**: Test the layout on various devices to ensure a seamless experience across screen sizes.

## USER EXPERIENCE
Key interactions include an intuitive navigation experience where users can easily scroll down to learn about the shelter, view donation options, and read success stories. The donation process should be straightforward, with clear instructions and prompts guiding users through the form submission. Overall, the design will prioritize simplicity and clarity to foster a positive user experience and encourage donations.