Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based landing page designed to promote a digital product, specifically an e-book. The main purpose is to provide users with an aesthetic and minimalist experience that facilitates easy navigation, showcasing the e-book's details, pricing, and a direct contact option via WhatsApp.

## CORE FEATURES
1. **Light/Dark Mode Switcher**: Users can toggle between light and dark modes for a personalized viewing experience, enhancing accessibility and comfort.
2. **Call-to-Action (CTA)**: Prominent buttons encouraging users to purchase the e-book or contact support via WhatsApp, strategically placed throughout the page.
3. **FAQ Section**: A collapsible FAQ section addressing common queries to assist potential buyers in making informed decisions.
4. **Book List with Covers**: A visually appealing list of e-books with accompanying cover images, descriptions, and pricing to entice users.
5. **Contact Information**: Clearly displayed WhatsApp contact details for users to easily reach out for inquiries or support.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist approach featuring a clean and simple design, incorporating ample white space to create a sense of openness and clarity. The minimal color palette emphasizes the content without distractions, ensuring a focus on typography.
- **Color Mode**: The default light theme will feature dark text on light backgrounds, ensuring high readability and a modern aesthetic. 
- **Layout**: The main layout will feature a top navigation bar, a hero section for the e-book overview, followed by the book list, FAQ, and a footer with contact information. Each section should have clear visual separation with generous spacing.
- **Typography**: Use sans-serif fonts such as 'Roboto' or 'Helvetica' for body text, with larger, bolded headings for clear hierarchy and readability. Ensure consistent font sizes and weights to maintain a cohesive look throughout the page.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a scalable and maintainable application.
- **Styling**: Tailwind CSS for rapid styling and utility-first design, enabling quick adjustments without compromising the overall aesthetic.
- **UI Components**: Utilize shadcn/ui components for consistent UI elements that align with the minimalist design philosophy.
- **State Management**: Use React's built-in state management for handling UI state transitions, such as the light/dark mode switcher.

## IMPLEMENTATION STEPS
1. **Set up the React Application**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the Layout Structure**: Develop the main layout, including the header, hero section, book list, FAQ section, and footer.
3. **Implement the Light/Dark Mode Switcher**: Create a toggle component that alters class names based on the user's preference, affecting the overall theme.
4. **Develop the Book List Component**: Create a reusable component to display each e-book's cover, title, description, and price.
5. **Build the FAQ Section**: Implement collapsible FAQ items to enhance user engagement and information retrieval.
6. **Add Call-to-Action Elements**: Position CTA buttons strategically throughout the page to facilitate user actions.
7. **Integrate WhatsApp Contact Option**: Ensure that the contact information is easily accessible, with a clickable link to initiate a chat.

## USER EXPERIENCE
Users will be greeted with a visually appealing hero section that succinctly presents the e-book. They will easily navigate through the book list, where they can view covers and details. The FAQ section will help address any concerns, while the CTA buttons will encourage immediate action. The light/dark mode switcher enhances personalization and comfort, ensuring an enjoyable browsing experience across devices. Responsive design principles will be applied to ensure that all elements adapt seamlessly to different screen sizes, maintaining functionality and aesthetics.