Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
This project is a premium portfolio landing page for a beginner web designer, aimed at showcasing the designer's work and attracting clients. The site will emphasize a structured approach to design, focusing on business solutions and automation, while maintaining a high-end aesthetic typical of professional portfolios.

# CORE FEATURES
1. **Hero Section**: A compelling introduction featuring a strong headline, subheadline, and a call-to-action button that invites users to view the designer's projects.
2. **About Section**: A brief narrative about the designer’s approach and philosophy, highlighting their systematic thinking and focus on solving business challenges through design.
3. **Portfolio Section**: A showcase of completed projects with visuals, descriptions, and direct links for clients to explore further.
4. **Automation Section**: Explanation of how automation through n8n enhances the functionality of the sites designed, with a visual flow diagram illustrating the process.
5. **Blog Section**: A collection of posts discussing design experiences, mistakes, and the advantages of automation, automatically published to social media.
6. **Services Section**: A clear overview of services offered, pricing, and a call-to-action to encourage inquiries.
7. **Contact Section**: A simple form for potential clients to reach out, along with links to social media profiles for additional engagement.

# DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The layout will be grid-based, utilizing ample whitespace to create a clean aesthetic. Sections will be clearly defined, with smooth transitions and hover effects to enhance user engagement.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but React's built-in state management can be utilized.

# IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Develop individual components for each section (Hero, About, Portfolio, Automation, Blog, Services, Contact).
3. **Implement Routing**: Although primarily a landing page, consider using React Router for potential future expansion.
4. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design with the specified primary color, typography, and border radius.
5. **Integrate Automation**: Use n8n API or similar to demonstrate the automation flow in the Automation section.
6. **Content Management**: Use a simple JSON or markdown format to manage blog posts and portfolio items for easy updates.
7. **Testing**: Ensure responsiveness across devices and test all interactions for smooth user experience.

# USER EXPERIENCE
Users will experience smooth scrolling and hover animations on cards, providing feedback on their interactions. The clean spacing system will guide users naturally through the content, with a premium visual hierarchy ensuring that important information stands out. The overall design will reflect professionalism while remaining approachable, appealing to potential clients looking for a competent web designer.