Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to modernize an outdated website by enhancing its UI/UX with a sleek, minimalist aesthetic. The primary goal is to create a user-friendly interface that emphasizes readability and accessibility while showcasing the website's content in an engaging manner.

## CORE FEATURES
1. **Homepage Redesign**: A fresh layout that introduces a clean and visually appealing presentation of key content, featuring prominent calls to action.
2. **Responsive Navigation**: A streamlined, intuitive navigation menu that adapts seamlessly across devices, ensuring easy access to all sections.
3. **Content Management System (CMS)**: An integrated system allowing users to easily update and manage website content without technical expertise.
4. **Contact Form**: A simplified contact form that encourages user interaction, featuring input validation and real-time feedback.
5. **Blog Section**: A dedicated space for articles and updates, designed for easy readability and engagement, including options for comments and sharing.
6. **User Authentication**: A secure login system that allows users to create accounts, manage profiles, and access personalized content.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design focusing on clarity and simplicity, with ample white space to enhance readability and reduce visual clutter.
- **Color Mode**: A light theme with dark text on light backgrounds, ensuring high contrast for optimal legibility.
- **Layout**: A grid-based layout that organizes content into clearly defined sections, with a flexible structure that adapts to different screen sizes. Key elements should be centered, with ample padding and margin to create a spacious feel.
- **Typography**: Utilize a combination of sans-serif fonts for headers (e.g., Montserrat) and serif fonts for body text (e.g., Merriweather). Maintain a clear hierarchy with distinct sizes and weights for headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to enable type safety and improved developer experience.
- **Styling**: Tailwind CSS for a utility-first approach to styling, allowing for rapid design adjustments and customization.
- **UI Components**: shadcn/ui for pre-built components that align with the minimalist aesthetic, ensuring consistency and efficiency.
- **State Management**: Use React Context for global state management, enabling easy sharing of data across components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Develop reusable layout components (Header, Footer, Main Content) using Tailwind CSS for consistent styling.
3. **Implement Routing**: Set up React Router to manage navigation between different sections of the website.
4. **Design Homepage**: Build the homepage with a hero section, featured content area, and navigation links, ensuring responsiveness.
5. **Develop Core Features**: Create components for the blog section, contact form, and user authentication, focusing on usability and aesthetics.
6. **Test Responsiveness**: Use various device emulators to ensure the application is fully responsive and user-friendly on all screen sizes.
7. **Deploy Application**: Deploy the final application on a suitable hosting platform (e.g., Vercel or Netlify) for public access.

## USER EXPERIENCE
Key user interactions will include a streamlined onboarding process for new users, intuitive navigation that guides users through the site, and quick access to the contact form for inquiries. The blog section will encourage engagement through easy-to-read articles and an interactive comment system. Overall, the design will prioritize user satisfaction with fast load times, clear calls to action, and a cohesive layout that facilitates exploration.