Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Soluciones Digitales del Norte is a multi-page web application designed to provide web development services to small and medium-sized businesses. The main purpose of the site is to showcase web development offerings, including upcoming services like data analysis and automation, while maintaining a professional yet approachable image.

## CORE FEATURES
1. **Home Page**: A welcoming introduction with three service cards—Web Development, Data Analysis, and Automation (the latter two marked as "Coming Soon").
2. **Services Page**: Detailed descriptions of the web development services provided, emphasizing tailored solutions and client engagement.
3. **Projects Page**: Showcase of completed projects, highlighting the quality and range of services offered.
4. **Portfolio Page**: A dedicated section for recruiters to view personal projects and gain insights into the applicant's skills and experience.
5. **Blog Page**: Informative articles that establish authority in the field and provide valuable insights to clients.
6. **Contact Page**: A simple contact form allowing potential clients to reach out for inquiries or consultations.

## 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 main layout will feature a header with navigation links, a hero section on the homepage, service cards displayed in a grid format, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this simple application but can be added if necessary in the future.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize the React project with TypeScript and install Tailwind CSS.
2. **Create Component Structure**: Design components for Header, Footer, Service Cards, Project Listings, and Forms.
3. **Implement Routing**: Use React Router to manage navigation between the Home, Services, Projects, Portfolio, Blog, and Contact pages.
4. **Design the Home Page**: Add the hero section with a brief description and three service cards with "Coming Soon" labels for data analysis and automation.
5. **Develop Services and Projects Pages**: Populate with content relevant to the services offered and showcase projects.
6. **Build Portfolio and Blog Sections**: Create a layout for personal projects and blog articles to attract potential recruiters.
7. **Implement Contact Form**: Create a simple form using controlled components to collect user inquiries.
8. **Testing**: Ensure that all components are responsive and function correctly across different devices.

## USER EXPERIENCE
The application will provide a seamless user experience with easy navigation between sections. Users will be greeted on the homepage with a clear overview of services, enticing them to explore further. The service cards will lead to detailed descriptions, while the portfolio will serve as a showcase for recruiters. The contact page will facilitate direct communication, ensuring potential clients can easily reach out for services. The overall design will inspire trust while remaining approachable, striking a balance between professionalism and friendliness.