Get a Free Consultation - modern, professional B2B website for an MSP (Managed Service Provider) company.
Generated Prompt
## APPLICATION OVERVIEW DEVOLUX is a modern, professional B2B website designed for a Managed Service Provider (MSP) company. The site aims to establish DEVOLUX as a premium, reliable partner for small and medium enterprises (SMEs) in need of comprehensive IT infrastructure solutions. The website will showcase services, highlight key offerings, and facilitate easy contact for consultations. ## CORE FEATURES 1. **Home Page**: A strong headline with a subheadline, a clear call to action, and sections detailing services, reasons to choose DEVOLUX, key offerings, and trust indicators. 2. **Services Page**: A breakdown of core services including IT Infrastructure Setup, Security & Monitoring, Redundancy & High Availability, Odoo Solutions, and Support. 3. **Solutions Page**: Tailored solutions for SMEs without IT teams, businesses needing secure infrastructure, and companies scaling operations. 4. **About Page**: Information on DEVOLUX’s mission, vision, and proactive approach to IT services. 5. **Contact Page**: A contact form with placeholders for email and a strong call to action. 6. **Mobile Responsiveness**: The design will ensure a seamless experience across devices. ## 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 structure will include a top navigation bar, hero section, service sections, testimonials, and contact information, organized in a vertical flow to guide users naturally through the content. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not specified, but consider using React Context or Redux if needed for state handling. ## IMPLEMENTATION STEPS 1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling components. 2. **Create the Header Component**: Implement the header with the DEVOLUX logo, navigation links, and a consistent color palette. 3. **Design the Home Page**: Create the hero section with a strong headline, subheadline, and CTA button. Include sections for services, features, and trust indicators. 4. **Develop the Services Page**: Structure the page to highlight individual services with detailed descriptions and corresponding icons. 5. **Build the Solutions Page**: Create sections targeting different SME use cases, detailing how DEVOLUX can meet their needs. 6. **Construct the About Page**: Write content that outlines the company’s mission, vision, and approach to IT services. 7. **Implement the Contact Page**: Develop a contact form with input fields and a submission button, ensuring it flows with the overall design. 8. **Ensure Mobile Responsiveness**: Use Tailwind CSS utility classes to make the design responsive across various devices, testing on different screen sizes. 9. **Test and Deploy**: Conduct thorough testing for functionality and responsiveness before deploying the site to a web hosting platform. ## USER EXPERIENCE Key interactions include smooth navigation through the site, easy access to service information, and straightforward contact methods. The design ensures that users can quickly understand the offerings and benefits of partnering with DEVOLUX, leading to higher engagement and conversion rates. The minimalist aesthetic will enhance readability and user satisfaction, making information easy to digest.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
