Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new React project using Vite with TypeScript support. Your project structure should resemble the following:

```
/schiffmiller-technik
├── /public
├── /src
│   ├── /components
│   │   ├── ProductHero.tsx
│   │   ├── FeatureGrid.tsx
│   │   ├── ArchitectureDiagram.tsx
│   │   ├── IntegrationGrid.tsx
│   │   ├── ProductComparison.tsx
│   │   ├── CTASection.tsx
│   │   ├── IndustryCard.tsx
│   │   └── WorkflowTimeline.tsx
│   ├── /pages
│   │   ├── Home.tsx
│   │   ├── IQLine.tsx
│   │   ├── Vendiqo.tsx
│   │   ├── Domiqo.tsx
│   │   ├── Parkiqo.tsx
│   │   ├── MParking.tsx
│   │   ├── FSM.tsx
│   │   ├── Platform.tsx
│   │   ├── Integrations.tsx
│   │   ├── Industries.tsx
│   │   ├── Projects.tsx
│   │   ├── About.tsx
│   │   └── Contact.tsx
│   ├── /styles
│   │   └── main.css
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── vite.config.ts
```
Make sure to install necessary dependencies such as React Router for navigation.

DESIGN REQUIREMENTS
- 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

CORE COMPONENTS
1. **ProductHero**: Displays the main product information with a title, description, and CTA.
2. **FeatureGrid**: A grid layout showcasing the core features of each product.
3. **ArchitectureDiagram**: Visual representation of how the system components interact.
4. **IntegrationGrid**: Lists the various hardware and software integrations.
5. **ProductComparison**: A side-by-side comparison of PARKIQO and mParking.
6. **CTASection**: A call-to-action section encouraging visitors to learn more or contact.
7. **IndustryCard**: Displays different industries served by the company.
8. **WorkflowTimeline**: Shows the workflows involved in different operations.

IMPLEMENTATION APPROACH
1. Install the necessary packages:
   ```
   npm install react-router-dom
   npm install -D tailwindcss postcss autoprefixer
   ```

2. Set up Tailwind by creating the `tailwind.config.js` and including the base styles in `main.css`.

3. Create the main layout in `App.tsx` with routes for different pages:
   ```javascript
   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   import Home from './pages/Home';
   import IQLine from './pages/IQLine';
   // Import other pages

   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/iq-line" element={<IQLine />} />
           {/* Define other routes */}
         </Routes>
       </Router>
     );
   }

   export default App;
   ```

4. Create components using functional components with TypeScript. For example, `ProductHero.tsx` can look like this:
   ```javascript
   const ProductHero = () => {
     return (
       <section className="bg-white p-8 rounded-[8px] shadow-md">
         <h1 className="text-3xl font-bold">Smart Infrastructure Software for Real-World Operations</h1>
         <p className="mt-4">Schiffmiller Technik develops connected platforms for vending, parking, buildings and field service.</p>
         <button className="bg-[#1978E5] text-white rounded-[8px] p-2 mt-4">Explore IQ Line</button>
       </section>
     );
   };

   export default ProductHero;
   ```

ARCHITECTURE CONSIDERATIONS
Use a component-based architecture to ensure reusability and maintainability. Each component should manage its state where necessary and communicate through props. Use context for global state management if needed.

ERROR HANDLING
Implement error boundaries for components that may fail. Use try-catch blocks around asynchronous calls and provide fallback UI to handle errors gracefully. For form submissions, validate inputs and provide user-friendly error messages.

TESTING STRATEGY
Use Jest and React Testing Library for testing components. Write unit tests for each component to ensure they render correctly and respond to user interactions as expected. Include integration tests to check the routing and overall application behavior.

By following the above structure and guidelines, you can create a polished, responsive website that meets the specifications and enhances the user experience while presenting Schiffmiller Technik as a professional technology company.