Spaces:
Running
Running
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Jitware - Minimalistisch</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| gold: '#D4AF37', | |
| dark: '#111111', | |
| darker: '#0A0A0A', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gold-gradient-text { | |
| background: linear-gradient(90deg, #D4AF37, #F9D423); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hover-gold:hover { | |
| color: #D4AF37; | |
| transition: all 0.3s ease; | |
| } | |
| .border-gold { | |
| border-color: #D4AF37; | |
| } | |
| .gold-shadow { | |
| box-shadow: 0 4px 6px -1px rgba(212, 175, 55, 0.2), 0 2px 4px -1px rgba(212, 175, 55, 0.06); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-gray-200 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-darker border-b border-gold/20 sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <span class="text-2xl font-bold gold-gradient-text">JITWARE</span> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover-gold">Home</a> | |
| <a href="#" class="hover-gold">Diensten</a> | |
| <a href="#" class="hover-gold">Over ons</a> | |
| <a href="#" class="hover-gold">Portfolio</a> | |
| <a href="#" class="hover-gold">Contact</a> | |
| </nav> | |
| <!-- Mobile menu button --> | |
| <button class="md:hidden text-gold focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-darker py-20"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6"> | |
| <span class="gold-gradient-text">Digitale oplossingen</span><br> | |
| die werken | |
| </h1> | |
| <p class="text-gray-400 mb-8 text-lg"> | |
| Wij creëren op maat gemaakte software die uw bedrijf vooruit helpt. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-gold text-darker font-bold px-6 py-3 rounded hover:bg-opacity-90 transition"> | |
| Onze diensten | |
| </button> | |
| <button class="border border-gold text-gold font-bold px-6 py-3 rounded hover:bg-gold hover:bg-opacity-10 transition"> | |
| Contacteer ons | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 bg-gold/10 rounded-xl gold-shadow"></div> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Digitale oplossingen" | |
| class="relative rounded-xl w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="py-20 bg-darker"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4 gold-gradient-text">Onze diensten</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Wij bieden een breed scala aan digitale diensten om uw bedrijf te laten groeien. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-darker p-8 rounded-lg border border-gold/10 hover:border-gold/30 transition group"> | |
| <div class="text-gold mb-4 text-4xl"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 group-hover:text-gold transition">Web Development</h3> | |
| <p class="text-gray-400"> | |
| Op maat gemaakte websites en webapplicaties die perfect aansluiten bij uw behoeften. | |
| </p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-darker p-8 rounded-lg border border-gold/10 hover:border-gold/30 transition group"> | |
| <div class="text-gold mb-4 text-4xl"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 group-hover:text-gold transition">App Development</h3> | |
| <p class="text-gray-400"> | |
| Native en hybride mobiele applicaties voor iOS en Android. | |
| </p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-darker p-8 rounded-lg border border-gold/10 hover:border-gold/30 transition group"> | |
| <div class="text-gold mb-4 text-4xl"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 group-hover:text-gold transition">Digital Strategy</h3> | |
| <p class="text-gray-400"> | |
| Strategisch advies om uw digitale aanwezigheid te optimaliseren. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-dark"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Over Jitware" | |
| class="rounded-xl w-full h-auto"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h2 class="text-3xl font-bold mb-6 gold-gradient-text">Over Jitware</h2> | |
| <p class="text-gray-400 mb-6"> | |
| Jitware is een digitaal bureau gespecialiseerd in het ontwikkelen van hoogwaardige softwareoplossingen. Ons team van ervaren ontwikkelaars en designers werkt nauw samen met klanten om oplossingen te creëren die echt werken. | |
| </p> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-gold rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-check text-darker"></i> | |
| </div> | |
| <p class="text-gray-300">Ervaren team van specialisten</p> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 bg-gold rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-check text-darker"></i> | |
| </div> | |
| <p class="text-gray-300">Op maat gemaakte oplossingen</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-gold rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-check text-darker"></i> | |
| </div> | |
| <p class="text-gray-300">Focus op kwaliteit en resultaat</p> | |
| </div> | |
| </div> | |
| <button class="border border-gold text-gold font-bold px-6 py-3 rounded hover:bg-gold hover:bg-opacity-10 transition"> | |
| Meer over ons | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section class="py-20 bg-darker"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4 gold-gradient-text">Onze projecten</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Bekijk enkele van onze recente projecten en ontdek wat we voor onze klanten hebben gerealiseerd. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="group relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" | |
| alt="Project 1" | |
| class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-2">E-commerce Platform</h3> | |
| <p class="text-gray-300">Een volledig op maat gemaakt e-commerce platform voor een modebedrijf.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="group relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1436&q=80" | |
| alt="Project 2" | |
| class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-2">Mobile Banking App</h3> | |
| <p class="text-gray-300">Een veilige en gebruiksvriendelijke bankapplicatie voor iOS en Android.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="group relative overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" | |
| alt="Project 3" | |
| class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-2">Enterprise Software</h3> | |
| <p class="text-gray-300">Complex managementsysteem voor een internationale logistieke onderneming.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border border-gold text-gold font-bold px-6 py-3 rounded hover:bg-gold hover:bg-opacity-10 transition"> | |
| Bekijk alle projecten | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-dark"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4 gold-gradient-text">Wat onze klanten zeggen</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| We zijn trots op de relaties die we hebben opgebouwd en de resultaten die we hebben behaald. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-darker p-8 rounded-lg border border-gold/10"> | |
| <div class="text-gold mb-4 text-2xl"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| "Jitware heeft ons geholpen een complexe webapplicatie te ontwikkelen die perfect aansluit bij onze bedrijfsprocessen. De communicatie was uitstekend en het eindresultaat overtrof onze verwachtingen." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gold/10 flex items-center justify-center text-gold mr-4"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-gray-400 text-sm">CEO, TechSolutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-darker p-8 rounded-lg border border-gold/10"> | |
| <div class="text-gold mb-4 text-2xl"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| "De mobiele app die Jitware voor ons heeft ontwikkeld heeft onze klantbetrokkenheid aanzienlijk verbeterd. Het team was professioneel, responsief en zeer bekwaam." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gold/10 flex items-center justify-center text-gold mr-4"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael van Dijk</h4> | |
| <p class="text-gray-400 text-sm">Marketing Director, RetailCo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-darker p-8 rounded-lg border border-gold/10"> | |
| <div class="text-gold mb-4 text-2xl"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| "We werken al jaren samen met Jitware voor al onze digitale behoeften. Ze begrijpen ons bedrijf en leveren altijd hoogwaardige oplossingen op tijd en binnen budget." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gold/10 flex items-center justify-center text-gold mr-4"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Lisa de Vries</h4> | |
| <p class="text-gray-400 text-sm">CTO, FinanceGroup</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-darker to-dark border-t border-b border-gold/10"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 gold-gradient-text">Klaar om uw project te starten?</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto mb-8 text-lg"> | |
| Neem vandaag nog contact met ons op en ontdek hoe we uw bedrijf kunnen helpen groeien met op maat gemaakte digitale oplossingen. | |
| </p> | |
| <button class="bg-gold text-darker font-bold px-8 py-4 rounded-lg hover:bg-opacity-90 transition text-lg"> | |
| Contacteer ons | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-darker py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <!-- Column 1 --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 gold-gradient-text">JITWARE</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Digitale oplossingen die werken voor uw bedrijf. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-gold transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gold transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gold transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gold transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-gray-300">Diensten</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-gold transition">Web Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-gold transition">App Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-gold transition">UI/UX Design</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-gold transition">Digital Strategy</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-gray-300">Bedrijf</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-gold transition">Over ons</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-gold transition">Team</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-gold transition">Vacatures</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-gold transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-gray-300">Contact</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-gold mr-2 mt-1"></i> | |
| <span>Straatnaam 123, 1234 AB, Stad</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone text-gold mr-2"></i> | |
| <span>+31 123 456 789</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-gold mr-2"></i> | |
| <span>info@jitware.nl</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gold/10 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0"> | |
| © 2023 Jitware. Alle rechten voorbehouden. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-gold transition">Privacybeleid</a> | |
| <a href="#" class="text-gray-500 hover:text-gold transition">Algemene voorwaarden</a> | |
| <a href="#" class="text-gray-500 hover:text-gold transition">Cookiebeleid</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple mobile menu toggle | |
| document.querySelector('button[aria-label="Mobile menu"]').addEventListener('click', function() { | |
| document.querySelector('nav').classList.toggle('hidden'); | |
| }); | |
| </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/digitale-oplossingen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |