42 lines
80 KiB
HTML
42 lines
80 KiB
HTML
<!DOCTYPE html><html lang="nl" class="scroll-smooth"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Astro v5.12.3"><!-- Font Preloading --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"></noscript><!-- DNS Prefetch --><link rel="dns-prefetch" href="//fonts.googleapis.com"><link rel="dns-prefetch" href="//fonts.gstatic.com"><!-- SEO Meta Tags --><title>Diensten | Tiber365 - Professionele IT Services | Tiber365 - Professionele IT Services</title><meta name="description" content="Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects."><meta name="keywords" content="IT diensten, Microsoft 365, netwerken, webhosting, automatisering, kleine bedrijven IT"><meta name="author" content="Tiber365"><!-- Robots Meta --><meta name="robots" content="index, follow"><!-- Canonical URL --><link rel="canonical" href="https://tiber365.it/nl/services/"><!-- Language and Localization --><meta name="google" content="notranslate"><meta http-equiv="Content-Language" content="nl"><!-- Theme Color --><meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#1f2937" media="(prefers-color-scheme: dark)"><meta name="msapplication-TileColor" content="#3b82f6"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://tiber365.it/nl/services/"><meta property="og:title" content="Diensten | Tiber365 - Professionele IT Services | Tiber365 - Professionele IT Services"><meta property="og:description" content="Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects."><meta property="og:image" content="https://tiber365.it/images/og-image.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:site_name" content="Tiber365 - Professionele IT Services"><meta property="og:locale" content="nl_NL"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://tiber365.it/nl/services/"><meta name="twitter:title" content="Diensten | Tiber365 - Professionele IT Services | Tiber365 - Professionele IT Services"><meta name="twitter:description" content="Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects."><meta name="twitter:image" content="https://tiber365.it/images/og-image.png"><meta name="twitter:creator" content="@tiber365"><!-- Favicons --><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="apple-touch-icon" href="/favicon.svg"><link rel="manifest" href="/manifest.json"><!-- Language alternates --><link rel="alternate" hreflang="en" href="https://tiber365.it/services/"><link rel="alternate" hreflang="nl" href="https://tiber365.it/nl/services/"><link rel="alternate" hreflang="de" href="https://tiber365.it/de/services/"><link rel="alternate" hreflang="fr" href="https://tiber365.it/fr/services/"><!-- Structured Data --><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Tiber365 - Professionele IT Services","description":"Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects.","url":"https://tiber365.it","logo":"https://tiber365.it/images/TIBER365.png","sameAs":["https://support.tiber365.it"],"contactPoint":{"@type":"ContactPoint","contactType":"customer service","availableLanguage":["English","Dutch","German","French"]},"address":{"@type":"PostalAddress","addressCountry":"NL"},"serviceArea":{"@type":"Country","name":"Netherlands"}}</script><link rel="stylesheet" href="/_astro/about.D_EvXghT.css">
|
|
<link rel="stylesheet" href="/_astro/about.UzmqI4ov.css"></head> <body class="min-h-screen bg-background text-foreground"> <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="main-header" data-astro-cid-3ef6ksr2> <!-- Glass morphism navigation --> <nav class="nav-glass" data-astro-cid-3ef6ksr2> <div class="container-custom" data-astro-cid-3ef6ksr2> <div class="flex h-20 items-center justify-between" data-astro-cid-3ef6ksr2> <!-- Logo with modern styling --> <div class="flex items-center" data-astro-cid-3ef6ksr2> <a href="/nl/" class="group flex items-center space-x-3 transition-all" data-astro-cid-3ef6ksr2> <div class="relative" data-astro-cid-3ef6ksr2> <div class="absolute inset-0 bg-primary/20 rounded-xl blur-md opacity-0 group-hover:opacity-100 transition-opacity" data-astro-cid-3ef6ksr2></div> <div class="relative h-10 w-10 bg-gradient-to-br from-primary to-accent rounded-xl flex items-center justify-center" data-astro-cid-3ef6ksr2> <img src="/images/TIBER365.png" alt="Tiber365 Logo" class="h-6 w-6 object-contain brightness-0 invert" data-astro-cid-3ef6ksr2> </div> </div> <div class="flex flex-col" data-astro-cid-3ef6ksr2> <span class="font-bold text-lg text-foreground group-hover:text-primary transition-colors" data-astro-cid-3ef6ksr2>Tiber365</span> <span class="text-xs text-subtle -mt-1" data-astro-cid-3ef6ksr2>IT Excellence</span> </div> </a> </div> <!-- Desktop Navigation with modern hover effects --> <div class="hidden lg:flex items-center space-x-1" data-astro-cid-3ef6ksr2> <a href="/nl/" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Home </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="/nl/services" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Diensten </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="/nl/about" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Over Ons </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="/nl/contact" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Contact </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="/nl/blog" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Blog </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Ondersteuning <svg class="h-3 w-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" data-astro-cid-3ef6ksr2></path> </svg> </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a> <!-- CTA Button in nav --> <a href="/nl/contact" class="ml-4 btn btn-primary btn-sm" data-astro-cid-3ef6ksr2>
|
|
Get Started
|
|
</a> </div> <!-- Right side controls --> <div class="flex items-center space-x-3" data-astro-cid-3ef6ksr2> <!-- Language switcher with modern styling --> <div class="relative inline-block text-left" id="language-switcher"> <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary" id="language-menu-button" aria-expanded="false" aria-haspopup="true"> <span class="mr-2">🇳🇱</span> <span class="hidden sm:inline">Nederlands</span> <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-background shadow-lg ring-1 ring-border" id="language-menu" role="menu" aria-orientation="vertical" aria-labelledby="language-menu-button"> <div class="py-1" role="none"> <a href="/services" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors text-muted-foreground" role="menuitem"> <span class="mr-3">🇬🇧</span> English </a><a href="/nl/services" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors bg-accent text-foreground font-medium" role="menuitem"> <span class="mr-3">🇳🇱</span> Nederlands </a><a href="/de/services" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors text-muted-foreground" role="menuitem"> <span class="mr-3">🇩🇪</span> Deutsch </a><a href="/fr/services" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors text-muted-foreground" role="menuitem"> <span class="mr-3">🇫🇷</span> Français </a> </div> </div> </div> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("language-menu-button"),t=document.getElementById("language-menu");e&&t&&(e.addEventListener("click",()=>{const n="true"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",(!n).toString()),t.classList.toggle("hidden")}),document.addEventListener("click",n=>{e?.contains(n.target)||t?.contains(n.target)||(e?.setAttribute("aria-expanded","false"),t?.classList.add("hidden"))}))});</script> <!-- Theme toggle with modern animation --> <button id="theme-toggle" class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary" aria-label="nav.theme.toggle" title="nav.theme.toggle"> <!-- Sun icon (light mode) --> <svg id="theme-toggle-light-icon" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path> </svg> <!-- Moon icon (dark mode) --> <svg id="theme-toggle-dark-icon" class="h-5 w-5 hidden" fill="currentColor" viewBox="0 0 20 20"> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> </svg> </button> <script type="module" src="/_astro/ThemeToggle.astro_astro_type_script_index_0_lang.DrBH2BW7.js"></script> <!-- Mobile Menu Button --> <button id="mobile-menu-button" class="lg:hidden p-2 rounded-xl bg-surface/50 border border-border/50 text-muted hover:text-foreground hover:bg-surface transition-all" aria-expanded="false" aria-label="Toggle mobile menu" data-astro-cid-3ef6ksr2> <svg id="mobile-menu-icon" class="h-5 w-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-3ef6ksr2></path> </svg> <svg id="mobile-close-icon" class="h-5 w-5 hidden transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" data-astro-cid-3ef6ksr2></path> </svg> </button> </div> </div> </div> <!-- Mobile Navigation Menu --> <div id="mobile-menu" class="lg:hidden hidden border-t border-border/50" data-astro-cid-3ef6ksr2> <div class="container-custom py-6" data-astro-cid-3ef6ksr2> <div class="space-y-2" data-astro-cid-3ef6ksr2> <a href="/nl/" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Home </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="/nl/services" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Diensten </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="/nl/about" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Over Ons </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="/nl/contact" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Contact </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="/nl/blog" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Blog </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Ondersteuning <svg class="h-4 w-4 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" data-astro-cid-3ef6ksr2></path> </svg> </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a> <!-- Mobile CTA --> <div class="pt-4 mt-4 border-t border-border/50" data-astro-cid-3ef6ksr2> <a href="/nl/contact" class="btn btn-primary w-full justify-center" data-astro-cid-3ef6ksr2>
|
|
Get Started Today
|
|
</a> </div> </div> </div> </div> </nav> <!-- Progress bar for scroll --> <div class="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300" id="scroll-progress" data-astro-cid-3ef6ksr2></div> </header> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("main-header"),t=document.getElementById("mobile-menu-button"),n=document.getElementById("mobile-menu"),s=document.getElementById("mobile-menu-icon"),d=document.getElementById("mobile-close-icon"),a=document.getElementById("scroll-progress");let i=window.scrollY;window.addEventListener("scroll",function(){const t=window.scrollY;t>100?(e?.classList.add("backdrop-blur-xl","bg-background/80"),e?.classList.remove("bg-transparent")):(e?.classList.remove("backdrop-blur-xl","bg-background/80"),e?.classList.add("bg-transparent")),t>i&&t>100?e?.classList.add("-translate-y-full"):e?.classList.remove("-translate-y-full"),i=t;const n=t/(document.documentElement.scrollHeight-window.innerHeight)*100;a&&(a.style.width=`${Math.min(n,100)}%`)},{passive:!0}),t&&n&&s&&d&&(t.addEventListener("click",()=>{const e=!("true"===t.getAttribute("aria-expanded"));t.setAttribute("aria-expanded",e.toString()),e?(n.classList.remove("hidden"),requestAnimationFrame(()=>{n.style.opacity="0",n.style.transform="translateY(-10px)",n.style.transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",requestAnimationFrame(()=>{n.style.opacity="1",n.style.transform="translateY(0)"})}),s.classList.add("hidden"),d.classList.remove("hidden"),document.body.style.overflow="hidden"):(n.style.opacity="0",n.style.transform="translateY(-10px)",setTimeout(()=>{n.classList.add("hidden"),document.body.style.overflow=""},300),s.classList.remove("hidden"),d.classList.add("hidden"))}),document.addEventListener("click",e=>{t.contains(e.target)||n.contains(e.target)||n.classList.contains("hidden")||t.click()}),document.addEventListener("keydown",e=>{"Escape"!==e.key||n.classList.contains("hidden")||t.click()}))});</script> <main> <!-- Services Hero --> <section class="py-20 bg-gradient-to-br from-background via-background to-muted"> <div class="container-custom"> <div class="text-center max-w-4xl mx-auto animate-on-scroll"> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6"> Onze Diensten </h1> <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed"> Uitgebreide IT-oplossingen op maat voor kleine bedrijven en freelancers </p> </div> </div> </section> <!-- Detailed Services --> <section class="py-20 bg-background"> <div class="container-custom"> <div class="space-y-32"> <div id="microsoft365" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll "> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🗂️</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Microsoft 365 Ondersteuning </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Complete Microsoft 365 installatie, migratie en doorlopende ondersteuning. </p> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Seamless transition to Microsoft 365 with expert guidance</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Zero downtime email migrations and data transfer</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Custom configuration of all Office applications</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Enhanced team collaboration through Microsoft Teams</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Secure document management with SharePoint</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Streamlined admin center management</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Initial assessment of your current setup</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Custom migration plan development</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Step-by-step implementation</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">User training and support</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Ongoing maintenance and optimization</span> </li> </ul> </div> <!-- CTA button --> <a href="/nl/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">🗂️</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">E-mail & data migraties</h4> <p class="text-sm text-muted-foreground"> Seamless data transfer with zero downtime </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Office apps configuratie</h4> <p class="text-sm text-muted-foreground"> Full setup and optimization of Office applications </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Microsoft Teams installatie</h4> <p class="text-sm text-muted-foreground"> Custom Teams environment configuration </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">SharePoint samenwerking</h4> <p class="text-sm text-muted-foreground"> Document management and collaboration setup </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Beheerportaal management</h4> <p class="text-sm text-muted-foreground"> Complete admin portal configuration </p> </div> </div> </div> </div> </div> </div><div id="management" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll lg:grid-flow-col-reverse"> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">⚙️</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Volledig M365 Beheer </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Laat ons uw volledige Microsoft 365 omgeving beheren met proactief management. </p> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Proactive system monitoring and maintenance</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Automated workflow implementation</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Enhanced security and compliance</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Regular performance optimization</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Cost-effective resource utilization</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Reduced IT management overhead</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Environment assessment</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Automation opportunity identification</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Monitoring setup and configuration</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">Regular maintenance scheduling</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Continuous improvement implementation</span> </li> </ul> </div> <!-- CTA button --> <a href="/nl/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">⚙️</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Geautomatiseerde workflows</h4> <p class="text-sm text-muted-foreground"> Custom workflow automation solutions </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">24/7 systeembewaking</h4> <p class="text-sm text-muted-foreground"> Proactive system monitoring and alerts </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Regelmatig onderhoud</h4> <p class="text-sm text-muted-foreground"> Regular updates and maintenance tasks </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Prestatie optimalisatie</h4> <p class="text-sm text-muted-foreground"> Performance tuning and improvements </p> </div> </div> </div> </div> </div> </div><div id="networking" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll "> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🌐</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Netwerken & Infrastructuur </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Professionele netwerkoplossingen met Ubiquiti en UniFi apparatuur. </p> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Enterprise-grade network infrastructure</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">High-performance Ubiquiti/UniFi solutions</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Advanced security implementation</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Reliable and fast connectivity</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Scalable network architecture</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Professional network monitoring</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Network requirements analysis</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Infrastructure design and planning</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Equipment selection and deployment</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">Security implementation</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Performance optimization</span> </li> </ul> </div> <!-- CTA button --> <a href="/nl/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">🌐</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Ubiquiti/UniFi specialisten</h4> <p class="text-sm text-muted-foreground"> Expert Ubiquiti/UniFi implementation </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Netwerkinfrastructuur</h4> <p class="text-sm text-muted-foreground"> Enterprise-grade network setup </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Netwerkbeveiliging</h4> <p class="text-sm text-muted-foreground"> Advanced security measures </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Verkeer monitoring</h4> <p class="text-sm text-muted-foreground"> Proactive system monitoring and alerts </p> </div> </div> </div> </div> </div> </div><div id="hosting" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll lg:grid-flow-col-reverse"> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🛠️</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Webhosting & Beheer </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Betrouwbare webhosting met volledig beheer en onderhoud inbegrepen. </p> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">High-performance web hosting</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Secure and reliable infrastructure</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Automated backup systems</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">SSL certificate management</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Domain name administration</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Regular maintenance and updates</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Hosting requirements assessment</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Server configuration and setup</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Security implementation</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">Backup system configuration</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Ongoing monitoring and maintenance</span> </li> </ul> </div> <!-- CTA button --> <a href="/nl/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">🛠️</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Betrouwbare webhosting</h4> <p class="text-sm text-muted-foreground"> High-performance hosting solutions </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Domeinbeheer</h4> <p class="text-sm text-muted-foreground"> Complete domain management </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">SSL certificaten</h4> <p class="text-sm text-muted-foreground"> SSL certificate installation and renewal </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Geautomatiseerde backups</h4> <p class="text-sm text-muted-foreground"> Automated backup and recovery </p> </div> </div> </div> </div> </div> </div><div id="custom" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll "> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🔒</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Aangepaste IT Projecten </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Op maat gemaakte IT-oplossingen speciaal ontworpen voor uw bedrijfsbehoeften. </p> <div class="mb-8 p-4 bg-primary/5 rounded-lg border border-primary/10"> <p class="text-muted-foreground leading-relaxed"> While we offer standardized services for common IT needs, we understand that every business is unique. We're open to discussing and supporting custom IT projects that may fall outside our standard service offerings. Our professional approach ensures that all stakeholders are involved in the consultation, planning, and implementation phases. This collaborative process helps us deliver solutions that truly meet your specific requirements. </p> </div> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Flexible solutions tailored to your unique business needs</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Professional project management and documentation</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Clear communication and consultation throughout the process</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Integration with existing systems and workflows</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Scalable and future-proof implementations</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Support for requirements beyond our standard services</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Initial consultation and requirements gathering</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Feasibility study and stakeholder alignment</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Detailed project planning with all involved parties</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">Phased implementation with regular checkpoints</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Thorough testing and quality assurance</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 6 </div> <span class="text-foreground">Post-implementation support and maintenance</span> </li> </ul> </div> <!-- CTA button --> <a href="/nl/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">🔒</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">IT consultatie</h4> <p class="text-sm text-muted-foreground"> </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Aangepaste ontwikkeling</h4> <p class="text-sm text-muted-foreground"> </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Systeemintegratie</h4> <p class="text-sm text-muted-foreground"> </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Doorlopende ondersteuning</h4> <p class="text-sm text-muted-foreground"> </p> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Why Choose Us --> <section class="py-20 bg-muted/30"> <div class="container-custom"> <div class="text-center mb-16 animate-on-scroll"> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
|
|
Why Choose Tiber365?
|
|
</h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
We're dedicated to providing reliable, professional IT services that help your business thrive.
|
|
</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="card p-6 text-center animate-on-scroll"> <div class="text-4xl mb-4">⚡</div> <h3 class="text-xl font-semibold text-foreground mb-3">Fast Response</h3> <p class="text-muted-foreground">Quick turnaround times and 24/7 support when you need it most.</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.1s"> <div class="text-4xl mb-4">🎯</div> <h3 class="text-xl font-semibold text-foreground mb-3">Expert Knowledge</h3> <p class="text-muted-foreground">Years of experience with Microsoft 365, networking, and modern IT solutions.</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.2s"> <div class="text-4xl mb-4">💼</div> <h3 class="text-xl font-semibold text-foreground mb-3">Business Focus</h3> <p class="text-muted-foreground">We understand small business needs and provide cost-effective solutions.</p> </div> </div> </div> </section> <section class="py-20 bg-gradient-to-br from-primary via-primary to-secondary text-primary-foreground relative overflow-hidden"> <!-- Background decoration --> <div class="absolute inset-0 opacity-10"> <div class="absolute top-10 left-10 w-32 h-32 rounded-full bg-white blur-2xl"></div> <div class="absolute bottom-10 right-10 w-48 h-48 rounded-full bg-white blur-3xl"></div> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-white blur-3xl"></div> </div> <div class="container-custom relative z-10"> <div class="text-center max-w-4xl mx-auto animate-on-scroll"> <!-- CTA heading --> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold mb-6"> Klaar om te Beginnen? </h2> <!-- CTA subtitle --> <p class="text-lg sm:text-xl mb-8 opacity-90 leading-relaxed"> Laten we bespreken hoe wij uw IT-infrastructuur kunnen transformeren. </p> <!-- CTA button --> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> <a href="/nl/contact" class="bg-background text-foreground hover:bg-background/90 px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center group"> Neem Vandaag Contact Op <svg class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path> </svg> </a> <a href="tel:+391234567890" class="border-2 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105 inline-flex items-center">
|
|
Call Now
|
|
<svg class="h-5 w-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> </a> </div> <!-- Contact info --> <div class="mt-8 opacity-80"> <p class="text-sm">
|
|
📧 info@tiber365.it | 📞 +39 123 456 7890
|
|
</p> </div> </div> </div> </section> </main> <footer class="relative bg-gradient-to-br from-surface via-background to-surface border-t border-border/50" data-astro-cid-sz7xmlte> <!-- Background pattern --> <div class="absolute inset-0 opacity-30" data-astro-cid-sz7xmlte> <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, rgb(var(--color-primary) / 0.1) 1px, transparent 0); background-size: 32px 32px;" data-astro-cid-sz7xmlte></div> </div> <div class="container-custom relative z-10" data-astro-cid-sz7xmlte> <!-- Main footer content --> <div class="section-padding" data-astro-cid-sz7xmlte> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8" data-astro-cid-sz7xmlte> <!-- Company info - spans 5 columns --> <div class="lg:col-span-5 space-y-8" data-astro-cid-sz7xmlte> <!-- Logo and tagline --> <div class="space-y-4" data-astro-cid-sz7xmlte> <div class="flex items-center space-x-3 group" data-astro-cid-sz7xmlte> <div class="relative" data-astro-cid-sz7xmlte> <div class="absolute inset-0 bg-primary/20 rounded-xl blur-md opacity-0 group-hover:opacity-100 transition-all duration-500" data-astro-cid-sz7xmlte></div> <div class="relative h-12 w-12 bg-gradient-to-br from-primary to-accent rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300" data-astro-cid-sz7xmlte> <img src="/images/TIBER365.png" alt="Tiber365 Logo" class="h-7 w-7 object-contain brightness-0 invert" data-astro-cid-sz7xmlte> </div> </div> <div data-astro-cid-sz7xmlte> <span class="font-bold text-2xl text-foreground group-hover:text-primary transition-colors duration-300" data-astro-cid-sz7xmlte>Tiber365</span> <div class="text-sm text-gradient font-medium" data-astro-cid-sz7xmlte>IT Excellence Delivered</div> </div> </div> <!-- Description --> <p class="text-muted leading-relaxed max-w-md" data-astro-cid-sz7xmlte>
|
|
Professional IT services for freelancers and small businesses. We specialize in making technology work seamlessly for your business.
|
|
</p> </div> <!-- Contact info with modern styling --> <div class="space-y-4" data-astro-cid-sz7xmlte> <h4 class="font-semibold text-foreground mb-4 flex items-center gap-2" data-astro-cid-sz7xmlte> <div class="w-1 h-6 bg-gradient-to-b from-primary to-accent rounded-full" data-astro-cid-sz7xmlte></div>
|
|
Contact Information
|
|
</h4> <div class="space-y-3" data-astro-cid-sz7xmlte> <div class="group flex items-center gap-3 p-3 hover:bg-surface/50 rounded-xl transition-all cursor-pointer" data-astro-cid-sz7xmlte> <div class="flex-shrink-0 w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center group-hover:bg-primary/20 transition-colors" data-astro-cid-sz7xmlte> <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" data-astro-cid-sz7xmlte></path> </svg> </div> <div data-astro-cid-sz7xmlte> <div class="text-sm text-subtle" data-astro-cid-sz7xmlte>Email</div> <a href="mailto:info@tiber365.it" class="text-foreground hover:text-primary transition-colors font-medium" data-astro-cid-sz7xmlte>
|
|
info@tiber365.it
|
|
</a> </div> </div> <div class="group flex items-center gap-3 p-3 hover:bg-surface/50 rounded-xl transition-all cursor-pointer" data-astro-cid-sz7xmlte> <div class="flex-shrink-0 w-10 h-10 bg-accent/10 rounded-lg flex items-center justify-center group-hover:bg-accent/20 transition-colors" data-astro-cid-sz7xmlte> <svg class="h-5 w-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" data-astro-cid-sz7xmlte></path> </svg> </div> <div data-astro-cid-sz7xmlte> <div class="text-sm text-subtle" data-astro-cid-sz7xmlte>Phone</div> <a href="tel:+391234567890" class="text-foreground hover:text-accent transition-colors font-medium" data-astro-cid-sz7xmlte>
|
|
+39 123 456 7890
|
|
</a> </div> </div> <div class="group flex items-center gap-3 p-3 hover:bg-surface/50 rounded-xl transition-all cursor-pointer" data-astro-cid-sz7xmlte> <div class="flex-shrink-0 w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center group-hover:bg-success/20 transition-colors" data-astro-cid-sz7xmlte> <svg class="h-5 w-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" data-astro-cid-sz7xmlte></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" data-astro-cid-sz7xmlte></path> </svg> </div> <div data-astro-cid-sz7xmlte> <div class="text-sm text-subtle" data-astro-cid-sz7xmlte>Location</div> <div class="text-foreground font-medium" data-astro-cid-sz7xmlte>
|
|
Amsterdam, Netherlands
|
|
</div> </div> </div> </div> </div> <!-- Social proof --> <div class="p-6 bg-gradient-to-br from-primary/5 to-accent/5 rounded-2xl border border-primary/10" data-astro-cid-sz7xmlte> <div class="flex items-center gap-4 mb-4" data-astro-cid-sz7xmlte> <div class="flex -space-x-2" data-astro-cid-sz7xmlte> <div class="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-full border-2 border-background flex items-center justify-center text-white text-xs font-bold" data-astro-cid-sz7xmlte>T</div> <div class="w-8 h-8 bg-gradient-to-br from-accent to-primary rounded-full border-2 border-background flex items-center justify-center text-white text-xs font-bold" data-astro-cid-sz7xmlte>I</div> <div class="w-8 h-8 bg-gradient-to-br from-success to-primary rounded-full border-2 border-background flex items-center justify-center text-white text-xs font-bold" data-astro-cid-sz7xmlte>B</div> </div> <div data-astro-cid-sz7xmlte> <div class="text-sm font-semibold text-foreground" data-astro-cid-sz7xmlte>100+ Happy Clients</div> <div class="text-xs text-subtle" data-astro-cid-sz7xmlte>Trusted by businesses across Europe</div> </div> </div> <div class="flex items-center gap-1" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg><svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg><svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg><svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg><svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg> <span class="text-sm text-muted ml-2" data-astro-cid-sz7xmlte>4.9/5 average rating</span> </div> </div> </div> <!-- Quick Links - spans 3 columns --> <div class="lg:col-span-3" data-astro-cid-sz7xmlte> <h4 class="font-semibold text-foreground mb-6 flex items-center gap-2" data-astro-cid-sz7xmlte> <div class="w-1 h-6 bg-gradient-to-b from-primary to-accent rounded-full" data-astro-cid-sz7xmlte></div>
|
|
Quick Links
|
|
</h4> <ul class="space-y-3" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a href="/" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Home</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="/services" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Diensten</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="/about" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Over Ons</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="/contact" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Contact</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li> <li data-astro-cid-sz7xmlte> <a href="/contact" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Contact</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li> </ul> </div> <!-- Resources - spans 4 columns --> <div class="lg:col-span-4" data-astro-cid-sz7xmlte> <h4 class="font-semibold text-foreground mb-6 flex items-center gap-2" data-astro-cid-sz7xmlte> <div class="w-1 h-6 bg-gradient-to-b from-accent to-primary rounded-full" data-astro-cid-sz7xmlte></div>
|
|
Resources & Links
|
|
</h4> <div class="space-y-6" data-astro-cid-sz7xmlte> <!-- External links --> <ul class="space-y-3" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-accent/50 rounded-full group-hover:bg-accent transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Blog</span> <svg class="w-3 h-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" data-astro-cid-sz7xmlte></path> </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-accent/50 rounded-full group-hover:bg-accent transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Ondersteuning</span> <svg class="w-3 h-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" data-astro-cid-sz7xmlte></path> </svg> </a> </li> <!-- Legal links --> <li data-astro-cid-sz7xmlte> <a href="/privacy" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-accent/50 rounded-full group-hover:bg-accent transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Privacy Policy</span> </a> </li> <li data-astro-cid-sz7xmlte> <a href="/terms" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-accent/50 rounded-full group-hover:bg-accent transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Terms of Service</span> </a> </li> </ul> <!-- Newsletter signup --> <div class="p-4 bg-gradient-to-br from-surface/50 to-background/50 border border-border/50 rounded-xl" data-astro-cid-sz7xmlte> <h5 class="font-medium text-foreground mb-2 flex items-center gap-2" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" data-astro-cid-sz7xmlte></path> </svg>
|
|
Stay Updated
|
|
</h5> <p class="text-sm text-muted mb-3" data-astro-cid-sz7xmlte>Get the latest IT tips and updates</p> <form class="flex gap-2" data-astro-cid-sz7xmlte> <input type="email" placeholder="your@email.com" class="flex-1 px-3 py-2 text-sm bg-background border border-border rounded-lg focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all" data-astro-cid-sz7xmlte> <button type="submit" class="px-4 py-2 bg-gradient-to-r from-primary to-accent text-white text-sm font-medium rounded-lg hover:shadow-lg transition-all" data-astro-cid-sz7xmlte> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" data-astro-cid-sz7xmlte></path> </svg> </button> </form> </div> </div> </div> </div> </div> <!-- Footer bottom --> <div class="border-t border-border/50 py-8" data-astro-cid-sz7xmlte> <div class="flex flex-col lg:flex-row justify-between items-center gap-6" data-astro-cid-sz7xmlte> <!-- Copyright --> <div class="flex items-center gap-4" data-astro-cid-sz7xmlte> <p class="text-subtle text-sm" data-astro-cid-sz7xmlte>
|
|
© 2024 Tiber365. All rights reserved.
|
|
</p> <div class="flex items-center gap-1 text-xs text-subtle" data-astro-cid-sz7xmlte> <span data-astro-cid-sz7xmlte>Made with</span> <svg class="w-3 h-3 text-error animate-pulse" fill="currentColor" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" data-astro-cid-sz7xmlte></path> </svg> <span data-astro-cid-sz7xmlte>in Amsterdam</span> </div> </div> <!-- Social links and additional info --> <div class="flex items-center gap-6" data-astro-cid-sz7xmlte> <!-- Business info --> <div class="flex items-center gap-4 text-xs text-subtle" data-astro-cid-sz7xmlte> <div class="flex items-center gap-1" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-success rounded-full animate-pulse" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Online</span> </div> <span data-astro-cid-sz7xmlte>•</span> <span data-astro-cid-sz7xmlte>CET Timezone</span> <span data-astro-cid-sz7xmlte>•</span> <span data-astro-cid-sz7xmlte>VAT: NL123456789B01</span> </div> <!-- Social/External links --> <div class="flex items-center gap-3" data-astro-cid-sz7xmlte> <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="group p-2 bg-surface/50 hover:bg-primary/10 border border-border/50 hover:border-primary/30 rounded-lg transition-all" aria-label="Blog" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-muted group-hover:text-primary transition-colors" fill="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" data-astro-cid-sz7xmlte></path> </svg> </a> <a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="group p-2 bg-surface/50 hover:bg-accent/10 border border-border/50 hover:border-accent/30 rounded-lg transition-all" aria-label="Support Portal" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-muted group-hover:text-accent transition-colors" fill="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" data-astro-cid-sz7xmlte></path> </svg> </a> <!-- Back to top button --> <button id="back-to-top" class="group p-2 bg-surface/50 hover:bg-success/10 border border-border/50 hover:border-success/30 rounded-lg transition-all opacity-0" aria-label="Back to top" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-muted group-hover:text-success transition-all group-hover:-translate-y-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" data-astro-cid-sz7xmlte></path> </svg> </button> </div> </div> </div> </div> </div> <!-- Decorative bottom border --> <div class="h-1 bg-gradient-to-r from-transparent via-primary to-transparent" data-astro-cid-sz7xmlte></div> </footer> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("back-to-top");window.addEventListener("scroll",function(){window.scrollY>500?(e?.classList.remove("opacity-0"),e?.classList.add("opacity-100")):(e?.classList.add("opacity-0"),e?.classList.remove("opacity-100"))},{passive:!0}),e?.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})});const t=document.querySelector("form");t?.addEventListener("submit",e=>{e.preventDefault();const t=e.target.querySelector('input[type="email"]');if(t.value){const o=e.target.querySelector('button[type="submit"]'),s=o.innerHTML;o.innerHTML='<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>',o.disabled=!0,setTimeout(()=>{o.innerHTML='<svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',t.value="",setTimeout(()=>{o.innerHTML=s,o.disabled=!1},2e3)},1e3)}});document.querySelectorAll(".group").forEach(e=>{e.addEventListener("mouseenter",()=>{const t=e.querySelector(".flex-shrink-0");t?.classList.add("animate-pulse")}),e.addEventListener("mouseleave",()=>{const t=e.querySelector(".flex-shrink-0");t?.classList.remove("animate-pulse")})})});</script> <!-- Initialize animations and service worker --> <script type="module" src="/_astro/BaseLayout.astro_astro_type_script_index_0_lang.C5sG_tfp.js"></script> </body> </html> |