Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a luxury, multi-page wedding photography website designed to showcase stunning visuals and provide an elegant user experience. The website will feature sophisticated animations to enhance engagement and a minimalist aesthetic that highlights the photography.

## CORE FEATURES
1. **Dynamic Hero Section**: A 50/50 split-screen design featuring a black and white candid shot that transitions to color on hover, paired with a clean cream background showcasing the brand name and a primary CTA.
2. **About Page**: Details about the photographer’s philosophy and style, presented in a clean, readable format with fade-in animations.
3. **Filterable Gallery**: A visually stunning gallery of images with smooth hover effects that display the couple's names. The gallery will allow users to filter images based on themes or types of shoots.
4. **Packages Page**: Display three-tier pricing cards with a clear breakdown of services offered, utilizing subtle animations to draw attention.
5. **Contact Page**: A dedicated page with contact details, including a phone number and email, ensuring easy client inquiries.
6. **Testimonial Slider**: An auto-playing slider that showcases client testimonials with a cross-fade effect, enhancing credibility and engagement.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, focusing on elegant serif typography and a muted color palette.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: The main layout features a split-screen hero section, followed by a vertically stacked About section, a filterable Gallery, a Packages page, and a straightforward Contact page. Each section will have smooth transitions between pages.
- **Typography**: Use elegant serif fonts like Playfair Display for headings and a simple sans-serif for body text, ensuring a hierarchy that guides the user’s eye effortlessly.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive and utility-first design.
- **UI Components**: Incorporate `shadcn/ui` for consistent and modern UI elements.
- **State Management**: Use React's Context API or a simple state management solution for managing the gallery filter and testimonial slider.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components library.
3. **Create the Hero Component**: Develop the dynamic split-screen hero section with hover effects using CSS for animations.
4. **Build the About Component**: Design the About section with fade-in animations for all text blocks.
5. **Develop the Gallery Component**: Implement the filterable gallery, ensuring smooth hover effects and animations.
6. **Create the Packages Component**: Design the pricing cards with clear information and subtle animations to enhance user experience.
7. **Set Up the Contact Component**: Create the Contact page with easy-to-access information and a clean layout.
8. **Implement Page Transitions**: Use React Router for navigation and implement smooth transitions between pages.
9. **Add Testimonial Slider**: Create the testimonial slider with auto-play and cross-fade effects.
10. **Test Responsiveness**: Ensure the website is fully responsive across different devices and screen sizes.

## USER EXPERIENCE
The website offers a seamless user experience, allowing visitors to navigate effortlessly between sections. Users will be greeted by an engaging hero section that captures their attention, followed by informative and visually appealing pages. Smooth animations and transitions enhance the overall aesthetic, making the browsing experience enjoyable and memorable. The filterable gallery allows users to easily find specific types of photography, while the testimonial slider builds trust and credibility. The responsive design ensures that all elements are accessible and usable on both desktop and mobile devices.