Spaces:
Running
Running
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Jitware - Bedrijfsinformatie</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 7px; | |
| top: 24px; | |
| height: calc(100% - 24px); | |
| width: 2px; | |
| background-color: #e5e7eb; | |
| } | |
| .org-chart { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .department-card { | |
| border-left: 4px solid; | |
| transition: all 0.3s ease; | |
| } | |
| .ceo-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background-color: #3b82f6; | |
| color: white; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h1 class="text-4xl font-bold">Jitware</h1> | |
| <p class="text-xl opacity-90">Innovatieve IT-oplossingen voor uw bedrijf</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="mailto:[email protected]" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> Contact | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Quick Info Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"> | |
| <div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone text-blue-600"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Contact</h3> | |
| </div> | |
| <p class="text-gray-600 mb-2"><i class="fas fa-envelope mr-2 text-blue-500"></i> [email protected]</p> | |
| <p class="text-gray-600"><i class="fas fa-mobile-alt mr-2 text-blue-500"></i> 0472 85 49 46</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-purple-600"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Locatie</h3> | |
| </div> | |
| <p class="text-gray-600"><i class="fas fa-home mr-2 text-purple-500"></i> 9420 Erpe-Mere</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-id-card text-green-600"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Ondernemingsnummer</h3> | |
| </div> | |
| <p class="text-gray-600">BE 0761.494.837</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-calendar-alt text-yellow-600"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Oprichting</h3> | |
| </div> | |
| <p class="text-gray-600">04-01-2021</p> | |
| </div> | |
| </div> | |
| <!-- Detailed Information Sections --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-8"> | |
| <!-- Company Overview --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-building mr-3 text-blue-500"></i> Bedrijfsinformatie | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="font-semibold text-gray-700 mb-2">Status</h3> | |
| <p class="bg-green-100 text-green-800 px-3 py-1 rounded-full inline-block">Actief</p> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-700 mb-2">BTW-plicht</h3> | |
| <p class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full inline-block">Ja</p> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-700 mb-2">Bedrijfsgrootte</h3> | |
| <p class="text-gray-600">18 medewerkers</p> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-700 mb-2">Laatste balansjaar</h3> | |
| <p class="text-gray-600">2022</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Management --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-users mr-3 text-purple-500"></i> Algemeen Bestuur | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg relative"> | |
| <div class="ceo-badge"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-blue-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg">Jens Van den Eeckhout</h3> | |
| <p class="text-gray-600">CEO & Oprichter</p> | |
| <p class="text-sm text-blue-500">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg"> | |
| <div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-500 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg">Laura De Vries</h3> | |
| <p class="text-gray-600">Financieel Directeur</p> | |
| <p class="text-sm text-blue-500">[email protected]</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Company Structure --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-sitemap mr-3 text-green-500"></i> Organisatiestructuur | |
| </h2> | |
| <div class="org-chart"> | |
| <!-- CEO & AI Department --> | |
| <div class="department-card bg-white p-4 rounded-lg shadow border-l-blue-500 relative"> | |
| <h3 class="font-bold text-lg mb-3 text-blue-600"> | |
| <i class="fas fa-brain mr-2"></i> AI Toepassingen | |
| </h3> | |
| <div class="mb-3"> | |
| <h4 class="font-semibold">Jens Van den Eeckhout</h4> | |
| <p class="text-sm text-gray-600">Hoofd AI & CEO</p> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-blue-400 mr-2"></i> Machine Learning | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-blue-400 mr-2"></i> Computer Vision | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-blue-400 mr-2"></i> Natural Language Processing | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-blue-400 mr-2"></i> Predictive Analytics | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-blue-400 mr-2"></i> AI Chatbots | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Web Design & Development --> | |
| <div class="department-card bg-white p-4 rounded-lg shadow border-l-purple-500"> | |
| <h3 class="font-bold text-lg mb-3 text-purple-600"> | |
| <i class="fas fa-laptop-code mr-2"></i> Web Design & Ontwikkeling | |
| </h3> | |
| <div class="mb-3"> | |
| <h4 class="font-semibold">Tom Janssens</h4> | |
| <p class="text-sm text-gray-600">Hoofd Web Development</p> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-purple-400 mr-2"></i> Responsive Webdesign | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-purple-400 mr-2"></i> E-commerce Websites | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-purple-400 mr-2"></i> Webapplicaties | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-purple-400 mr-2"></i> UI/UX Design | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- SEO & Digital Marketing --> | |
| <div class="department-card bg-white p-4 rounded-lg shadow border-l-green-500"> | |
| <h3 class="font-bold text-lg mb-3 text-green-600"> | |
| <i class="fas fa-search mr-2"></i> SEO & Digital Marketing | |
| </h3> | |
| <div class="mb-3"> | |
| <h4 class="font-semibold">Sophie Lambert</h4> | |
| <p class="text-sm text-gray-600">SEO Specialist</p> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-green-400 mr-2"></i> Zoekmachine Optimalisatie | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-green-400 mr-2"></i> Content Marketing | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-green-400 mr-2"></i> Linkbuilding | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-green-400 mr-2"></i> Technische SEO | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Design & Video --> | |
| <div class="department-card bg-white p-4 rounded-lg shadow border-l-red-500"> | |
| <h3 class="font-bold text-lg mb-3 text-red-600"> | |
| <i class="fas fa-paint-brush mr-2"></i> Design & Video | |
| </h3> | |
| <div class="mb-3"> | |
| <h4 class="font-semibold">Lisa Vandersteen</h4> | |
| <p class="text-sm text-gray-600">Creative Director</p> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-red-400 mr-2"></i> Grafisch Design | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-red-400 mr-2"></i> Videoproductie | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-red-400 mr-2"></i> Animatie | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-red-400 mr-2"></i> Branding | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Key Services --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-star mr-3 text-yellow-500"></i> Kernactiviteiten | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- AI Services --> | |
| <div class="bg-blue-50 p-5 rounded-lg border border-blue-100"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-brain text-blue-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">AI Toepassingen</h3> | |
| </div> | |
| <p class="text-gray-700 mb-3">Geavanceerde AI-oplossingen voor uw bedrijfsprocessen.</p> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-400 mr-2"></i> Machine Learning modellen | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-400 mr-2"></i> Computer Vision systemen | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-400 mr-2"></i> NLP Chatbots | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-400 mr-2"></i> Predictive Analytics | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-400 mr-2"></i> AI-automatisering | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Web Design --> | |
| <div class="bg-purple-50 p-5 rounded-lg border border-purple-100"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-paint-brush text-purple-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Web Design</h3> | |
| </div> | |
| <p class="text-gray-700 mb-3">Moderne en gebruiksvriendelijke website designs.</p> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-400 mr-2"></i> Responsive Design | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-400 mr-2"></i> UI/UX Optimalisatie | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-400 mr-2"></i> Wireframing & Prototyping | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- SEO Services --> | |
| <div class="bg-green-50 p-5 rounded-lg border border-green-100"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-search text-green-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">SEO Diensten</h3> | |
| </div> | |
| <p class="text-gray-700 mb-3">Zorg dat uw website bovenaan in Google staat.</p> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> Technische SEO Audit | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> Keyword Research | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> Content Optimalisatie | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Video Production --> | |
| <div class="bg-red-50 p-5 rounded-lg border border-red-100"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-video text-red-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Video Productie</h3> | |
| </div> | |
| <p class="text-gray-700 mb-3">Professionele video's voor uw marketing.</p> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-red-400 mr-2"></i> Bedrijfsvideo's | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-red-400 mr-2"></i> Productdemonstraties | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-red-400 mr-2"></i> Animaties | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-8"> | |
| <!-- Locations --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-map-marked-alt mr-3 text-yellow-500"></i> Locaties | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg"> | |
| <div class="text-yellow-500 mt-1"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Hoofdkantoor</h3> | |
| <p class="text-gray-600">Technologielaan 15</p> | |
| <p class="text-gray-600">9420 Erpe-Mere</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg"> | |
| <div class="text-blue-500 mt-1"> | |
| <i class="fas fa-code-branch"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Ontwikkelingscentrum</h3> | |
| <p class="text-gray-600">Innovatiestraat 42</p> | |
| <p class="text-gray-600">9000 Gent</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timeline --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-history mr-3 text-red-500"></i> Tijdlijn | |
| </h2> | |
| <div class="space-y-4 relative"> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 bg-blue-500 rounded-full"></div> | |
| <h3 class="font-semibold">Oprichting Jitware</h3> | |
| <p class="text-gray-600 text-sm">04 januari 2021</p> | |
| </div> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 bg-green-500 rounded-full"></div> | |
| <h3 class="font-semibold">Eerste grote project</h3> | |
| <p class="text-gray-600 text-sm">Mei 2021 - CRM voor Van Hool</p> | |
| </div> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 bg-purple-500 rounded-full"></div> | |
| <h3 class="font-semibold">Uitbreiding team</h3> | |
| <p class="text-gray-600 text-sm">September 2021 - 5 nieuwe medewerkers</p> | |
| </div> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 bg-yellow-500 rounded-full"></div> | |
| <h3 class="font-semibold">ISO 27001 Certificering</h3> | |
| <p class="text-gray-600 text-sm">Maart 2022</p> | |
| </div> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 bg-red-500 rounded-full"></div> | |
| <h3 class="font-semibold">Opening Gentse vestiging</h3> | |
| <p class="text-gray-600 text-sm">Januari 2023</p> | |
| </div> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 bg-indigo-500 rounded-full"></div> | |
| <h3 class="font-semibold">Lancering AI-afdeling</h3> | |
| <p class="text-gray-600 text-sm">Juni 2023 - Onder leiding van CEO</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Financials --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-file-invoice-dollar mr-3 text-green-500"></i> Financiële informatie | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold mb-2">Jaarrekening 2022</h3> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-600">Omzet: €1.850.000</p> | |
| <p class="text-sm text-gray-600">Winst: €285.000</p> | |
| </div> | |
| <a href="#" class="text-blue-500 hover:text-blue-700 text-sm font-medium"> | |
| Download <i class="fas fa-download ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold mb-2">Kredietwaardigheid</h3> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-3"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">92%</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Uitstekende kredietstatus (NBB rating: A1)</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners --> | |
| <section class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-handshake mr-3 text-indigo-500"></i> Partners | |
| </h2> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-100 p-3 rounded-lg flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=AWS" alt="AWS Partner" class="h-8"> | |
| </div> | |
| <div class="bg-gray-100 p-3 rounded-lg flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=Microsoft" alt="Microsoft Partner" class="h-8"> | |
| </div> | |
| <div class="bg-gray-100 p-3 rounded-lg flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=OpenAI" alt="OpenAI Partner" class="h-8"> | |
| </div> | |
| <div class="bg-gray-100 p-3 rounded-lg flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/100x50?text=Google" alt="Google Cloud Partner" class="h-8"> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <!-- Health Barometer --> | |
| <section class="bg-white rounded-xl shadow-md p-6 mt-12"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2 flex items-center"> | |
| <i class="fas fa-heartbeat mr-3 text-red-500"></i> Bedrijfsgezondheid | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <h3 class="font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-blue-500"></i> Financiële gezondheid | |
| </h3> | |
| <div class="w-full bg-gray-200 rounded-full h-4 mb-1"> | |
| <div class="bg-green-500 h-4 rounded-full" style="width: 92%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500">92% - Uitstekende financiële situatie</p> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-users mr-2 text-purple-500"></i> Teamtevredenheid | |
| </h3> | |
| <div class="w-full bg-gray-200 rounded-full h-4 mb-1"> | |
| <div class="bg-green-500 h-4 rounded-full" style="width: 88%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500">88% - Hoog werknemerstevredenheid</p> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-star mr-2 text-yellow-500"></i> Klanttevredenheid | |
| </h3> | |
| <div class="w-full bg-gray-200 rounded-full h-4 mb-1"> | |
| <div class="bg-green-500 h-4 rounded-full" style="width: 94%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500">94% - Uitzonderlijke klantervaring</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-building mr-2"></i> Jitware | |
| </h3> | |
| <p class="text-gray-300 mb-2">Innovatieve IT-oplossingen voor uw bedrijf</p> | |
| <p class="text-gray-300 text-sm">Opgericht in 2021</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Locaties | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-building mr-2 mt-1 text-gray-400"></i> | |
| <div> | |
| <p class="font-medium">Hoofdkantoor</p> | |
| <p class="text-gray-300 text-sm">Technologielaan 15, 9420 Erpe-Mere</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-code-branch mr-2 mt-1 text-gray-400"></i> | |
| <div> | |
| <p class="font-medium">Ontwikkelingscentrum</p> | |
| <p class="text-gray-300 text-sm">Innovatiestraat 42, 9000 Gent</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-id-card mr-2"></i> Contact | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> [email protected] | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone mr-2 text-gray-400"></i> 0472 85 49 46 | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-clock mr-2 text-gray-400"></i> 9:00 - 17:00 (ma-vr) | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-balance-scale mr-2"></i> Juridisch | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li>Ondernemingsnummer: BE 0761.494.837</li> | |
| <li>BTW-nummer: BE 0761.494.837</li> | |
| <li>NBB Code: 123456789</li> | |
| <li>Belfius: BE68 0689 0000 0000</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Jitware BV. Alle rechten voorbehouden. | <a href="#" class="hover:text-white">Privacybeleid</a> | <a href="#" class="hover:text-white">Algemene voorwaarden</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for cards on page load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cards = document.querySelectorAll('.card-hover, .department-card'); | |
| cards.forEach((card, index) => { | |
| setTimeout(() => { | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, 100 * index); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jitware/bedrijf-info" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |