Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web platform for a new marketing agency specializing in automation services, software development, and custom software solutions. The primary goal is to provide potential clients with information about the agency's offerings while ensuring an intuitive user experience that highlights the agency's expertise and services.

## CORE FEATURES
1. **Homepage**: A clean, engaging landing page that showcases the agency's mission, values, and primary services using concise text and impactful visuals.
2. **Service Pages**: Dedicated sections for automation services, software development, and custom software solutions, providing detailed descriptions, case studies, and testimonials.
3. **Contact Form**: A simple, user-friendly contact form for inquiries, including fields for name, email, service interest, and message, with validation for a seamless submission experience.
4. **Blog Section**: A space for sharing insights, updates, and tips related to marketing and automation, allowing for integration of articles with social sharing features.
5. **Client Portal**: A secure area for existing clients to access project updates, invoices, and communication history, enhancing client engagement and satisfaction.
6. **About Us Page**: A brief overview of the team, their expertise, and the agency's history, fostering trust and connection with potential clients.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasizing a clean and simple design with ample white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds for optimal legibility.
- **Layout**: A grid-based layout that organizes content into clearly defined sections, with a fixed navigation bar at the top for easy access to key areas. Each section will have sufficient padding and margin to maintain visual breathing space.
- **Typography**: Use a modern sans-serif font like "Roboto" for body text and "Montserrat" for headings to create a visual hierarchy. Headings should be bold to capture attention, while body text should be regular-weight for easy reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and component reusability.
- **Styling**: Tailwind CSS for rapid styling and responsive design capabilities.
- **UI Components**: Utilize shadcn/ui for modern and accessible user interface components.
- **State Management**: Consider using React Context API or Zustand for state management to handle user sessions and form states efficiently.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project using Create React App with TypeScript templates. Install Tailwind CSS and configure it to work with the project.
2. **Create the Homepage**: Design and implement the homepage layout, including a hero section with a call-to-action, a services overview, and a footer with social media links.
3. **Develop Service Pages**: Create separate pages for each service offered, ensuring consistent design with the homepage.
4. **Implement the Contact Form**: Build a responsive contact form component, ensuring proper validation and submission handling.
5. **Set Up Blog Section**: Develop a blog layout that pulls in articles dynamically, allowing for categorization and tagging.
6. **Build the Client Portal**: Create the client portal layout, focusing on user authentication and secure access to project-related information.
7. **Finalize About Us Page**: Complete the About Us section, incorporating team member profiles and agency history.
8. **Test Across Devices**: Ensure the application is responsive and visually appealing on various screen sizes, adjusting styles as necessary.

## USER EXPERIENCE
Key user interactions include navigating through the homepage and service pages via a sticky navigation bar, filling out the contact form with real-time validation feedback, and accessing the client portal with secure authentication. The blog section will allow users to seamlessly browse articles, with easy sharing options to enhance engagement. The overall flow focuses on guiding users intuitively from interest to action, ensuring a streamlined experience.