365DevNet/Tiber365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fa52f07bc4f97358a7e0382ecda3f83ba3195cdb
Tiber365/dist/nl/index.html

84 lines
93 KiB
HTML
Raw Blame History

<!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>Tiber365 - Professionele IT Services</title><meta name="description" content="Professionele IT-diensten voor freelancers en kleine bedrijven. Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten."><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/"><!-- 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/"><meta property="og:title" content="Tiber365 - Professionele IT Services"><meta property="og:description" content="Professionele IT-diensten voor freelancers en kleine bedrijven. Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten."><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/"><meta name="twitter:title" content="Tiber365 - Professionele IT Services"><meta name="twitter:description" content="Professionele IT-diensten voor freelancers en kleine bedrijven. Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten."><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/"><link rel="alternate" hreflang="nl" href="https://tiber365.it/nl/"><link rel="alternate" hreflang="de" href="https://tiber365.it/de/"><link rel="alternate" hreflang="fr" href="https://tiber365.it/fr/"><!-- Structured Data --><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Tiber365 - Professionele IT Services","description":"Professionele IT-diensten voor freelancers en kleine bedrijven. Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten.","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.BkthZUHi.css">
<link rel="stylesheet" href="/_astro/about.DiFGXuh7.css">
<style>@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-10px) rotate(1deg)}66%{transform:translateY(-5px) rotate(-1deg)}}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.text-gradient[data-astro-cid-bbe6dxrz]{background-size:200% 200%;animation:gradient-shift 4s ease infinite}.group[data-astro-cid-g5jplrhu]:hover .card-glass[data-astro-cid-g5jplrhu]{transform:translateY(-8px)}.group[data-astro-cid-g5jplrhu]:hover .space-y-3[data-astro-cid-g5jplrhu]>div[data-astro-cid-g5jplrhu]{animation:slideInLeft .3s ease-out forwards}.group[data-astro-cid-g5jplrhu]:hover .space-y-3[data-astro-cid-g5jplrhu]>div[data-astro-cid-g5jplrhu]:nth-child(2){animation-delay:.1s}.group[data-astro-cid-g5jplrhu]:hover .space-y-3[data-astro-cid-g5jplrhu]>div[data-astro-cid-g5jplrhu]:nth-child(3){animation-delay:.2s}.group[data-astro-cid-g5jplrhu]:hover .space-y-3[data-astro-cid-g5jplrhu]>div[data-astro-cid-g5jplrhu]:nth-child(4){animation-delay:.3s}@keyframes slideInLeft{0%{opacity:.5;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.card-glass[data-astro-cid-g5jplrhu]:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:inherit;opacity:0;transition:opacity .3s ease;pointer-events:none}.group[data-astro-cid-g5jplrhu]:hover .card-glass[data-astro-cid-g5jplrhu]:before{opacity:1}
</style></head> <body class="min-h-screen bg-background text-foreground"> <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"Tiber365 - Professionele IT Services","description":"Professionele IT-diensten voor freelancers en kleine bedrijven. Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten.","url":"https://tiber365.it/nl","inLanguage":"nl","isPartOf":{"@type":"WebSite","name":"Tiber365","url":"https://tiber365.it"},"mainEntity":{"@type":"Organization","name":"Tiber365","description":"Professionele IT-diensten voor freelancers en kleine bedrijven. Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten.","url":"https://tiber365.it","logo":"https://tiber365.it/images/TIBER365.png","contactPoint":{"@type":"ContactPoint","contactType":"customer service","availableLanguage":["English","Dutch","German","French"]},"serviceArea":{"@type":"Country","name":"Netherlands"}}}</script> <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="/" 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/" 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/" 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/" 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> <section class="relative min-h-screen flex items-center justify-center overflow-hidden" data-astro-cid-bbe6dxrz> <!-- Animated background --> <div class="absolute inset-0 hero-gradient" data-astro-cid-bbe6dxrz> <!-- Floating geometric shapes --> <div class="absolute top-20 left-10 w-32 h-32 bg-primary/10 rounded-full blur-xl animate-float" data-astro-cid-bbe6dxrz></div> <div class="absolute top-40 right-20 w-24 h-24 bg-accent/10 rounded-full blur-lg animate-float" style="animation-delay: -2s;" data-astro-cid-bbe6dxrz></div> <div class="absolute bottom-40 left-1/4 w-40 h-40 bg-primary/5 rounded-full blur-2xl animate-float" style="animation-delay: -4s;" data-astro-cid-bbe6dxrz></div> <div class="absolute top-1/3 right-1/4 w-20 h-20 bg-accent/15 rounded-full blur-md animate-float" style="animation-delay: -1s;" data-astro-cid-bbe6dxrz></div> <!-- Grid pattern --> <div class="absolute inset-0 opacity-30" data-astro-cid-bbe6dxrz> <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, rgb(var(--color-primary) / 0.15) 1px, transparent 0); background-size: 40px 40px;" data-astro-cid-bbe6dxrz></div> </div> </div> <div class="container-custom relative z-10" data-astro-cid-bbe6dxrz> <div class="max-w-6xl mx-auto text-center space-content" data-astro-cid-bbe6dxrz> <!-- Floating badge --> <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-surface/60 border border-border/50 backdrop-blur-sm animate-on-scroll mb-8" data-astro-cid-bbe6dxrz> <span class="relative flex h-2 w-2" data-astro-cid-bbe6dxrz> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" data-astro-cid-bbe6dxrz></span> <span class="relative inline-flex rounded-full h-2 w-2 bg-primary" data-astro-cid-bbe6dxrz></span> </span> <span class="text-sm font-medium text-muted" data-astro-cid-bbe6dxrz>Trusted by 100+ businesses</span> </div> <!-- Main heading with gradient text --> <h1 class="animate-on-scroll mb-8" style="animation-delay: 0.1s;" data-astro-cid-bbe6dxrz> <span class="block text-foreground mb-4" data-astro-cid-bbe6dxrz>Professional IT Services</span> <span class="block text-gradient font-bold" data-astro-cid-bbe6dxrz>for Modern Businesses</span> </h1> <!-- Subtitle --> <p class="text-responsive-lg text-muted max-w-3xl mx-auto leading-relaxed animate-on-scroll mb-12" style="animation-delay: 0.2s;" data-astro-cid-bbe6dxrz> Ondersteuning van freelancers en kleine bedrijven met betrouwbare Microsoft 365 ondersteuning, netwerkoplossingen, webhosting en aangepaste IT-projecten. </p> <!-- CTA Buttons --> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center animate-on-scroll mb-16" style="animation-delay: 0.3s;" data-astro-cid-bbe6dxrz> <a href="/nl/contact" class="btn btn-primary group" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>Begin Vandaag</span> <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-bbe6dxrz> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-bbe6dxrz></path> </svg> </a> <a href="/nl/services" class="btn btn-outline group" data-astro-cid-bbe6dxrz> <svg class="h-4 w-4 transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-bbe6dxrz> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.586-4.586a2 2 0 118 8L18 18l-4-4m-5-5v12m0 0l-3-3m3 3l3-3" data-astro-cid-bbe6dxrz></path> </svg> <span data-astro-cid-bbe6dxrz>Bekijk Onze Diensten</span> </a> </div> <!-- Trust indicators --> <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center animate-on-scroll" style="animation-delay: 0.4s;" data-astro-cid-bbe6dxrz> <div class="text-center space-y-2" data-astro-cid-bbe6dxrz> <div class="text-2xl font-bold text-primary" data-astro-cid-bbe6dxrz>5+</div> <div class="text-sm text-subtle" data-astro-cid-bbe6dxrz>Years Experience</div> </div> <div class="text-center space-y-2" data-astro-cid-bbe6dxrz> <div class="text-2xl font-bold text-primary" data-astro-cid-bbe6dxrz>100+</div> <div class="text-sm text-subtle" data-astro-cid-bbe6dxrz>Happy Clients</div> </div> <div class="text-center space-y-2" data-astro-cid-bbe6dxrz> <div class="text-2xl font-bold text-primary" data-astro-cid-bbe6dxrz>24/7</div> <div class="text-sm text-subtle" data-astro-cid-bbe6dxrz>Support</div> </div> <div class="text-center space-y-2" data-astro-cid-bbe6dxrz> <div class="text-2xl font-bold text-primary" data-astro-cid-bbe6dxrz>99.9%</div> <div class="text-sm text-subtle" data-astro-cid-bbe6dxrz>Uptime</div> </div> <div class="text-center space-y-2" data-astro-cid-bbe6dxrz> <div class="text-2xl font-bold text-primary" data-astro-cid-bbe6dxrz>4.9★</div> <div class="text-sm text-subtle" data-astro-cid-bbe6dxrz>Rating</div> </div> </div> <!-- Service icons with modern styling --> <div class="flex justify-center gap-8 mt-16 mb-20 animate-on-scroll" style="animation-delay: 0.5s;" data-astro-cid-bbe6dxrz> <div class="group cursor-pointer" data-astro-cid-bbe6dxrz> <div class="w-16 h-16 rounded-2xl bg-surface/60 border border-border/50 backdrop-blur-sm flex items-center justify-center transition-all group-hover:scale-110 group-hover:bg-primary/10 group-hover:border-primary/30" data-astro-cid-bbe6dxrz> <span class="text-2xl" data-astro-cid-bbe6dxrz>🗂️</span> </div> <div class="text-xs text-subtle mt-2 text-center" data-astro-cid-bbe6dxrz>M365</div> </div> <div class="group cursor-pointer" data-astro-cid-bbe6dxrz> <div class="w-16 h-16 rounded-2xl bg-surface/60 border border-border/50 backdrop-blur-sm flex items-center justify-center transition-all group-hover:scale-110 group-hover:bg-primary/10 group-hover:border-primary/30" data-astro-cid-bbe6dxrz> <span class="text-2xl" data-astro-cid-bbe6dxrz>🌐</span> </div> <div class="text-xs text-subtle mt-2 text-center" data-astro-cid-bbe6dxrz>Hosting</div> </div> <div class="group cursor-pointer" data-astro-cid-bbe6dxrz> <div class="w-16 h-16 rounded-2xl bg-surface/60 border border-border/50 backdrop-blur-sm flex items-center justify-center transition-all group-hover:scale-110 group-hover:bg-primary/10 group-hover:border-primary/30" data-astro-cid-bbe6dxrz> <span class="text-2xl" data-astro-cid-bbe6dxrz>⚙️</span> </div> <div class="text-xs text-subtle mt-2 text-center" data-astro-cid-bbe6dxrz>Setup</div> </div> <div class="group cursor-pointer" data-astro-cid-bbe6dxrz> <div class="w-16 h-16 rounded-2xl bg-surface/60 border border-border/50 backdrop-blur-sm flex items-center justify-center transition-all group-hover:scale-110 group-hover:bg-primary/10 group-hover:border-primary/30" data-astro-cid-bbe6dxrz> <span class="text-2xl" data-astro-cid-bbe6dxrz>🔒</span> </div> <div class="text-xs text-subtle mt-2 text-center" data-astro-cid-bbe6dxrz>Security</div> </div> <div class="group cursor-pointer" data-astro-cid-bbe6dxrz> <div class="w-16 h-16 rounded-2xl bg-surface/60 border border-border/50 backdrop-blur-sm flex items-center justify-center transition-all group-hover:scale-110 group-hover:bg-primary/10 group-hover:border-primary/30" data-astro-cid-bbe6dxrz> <span class="text-2xl" data-astro-cid-bbe6dxrz>🛠️</span> </div> <div class="text-xs text-subtle mt-2 text-center" data-astro-cid-bbe6dxrz>Support</div> </div> </div> <!-- Scroll indicator - moved to separate container with proper spacing --> <div class="flex justify-center mt-8" data-astro-cid-bbe6dxrz> <div class="animate-bounce cursor-pointer" onclick="document.getElementById('services')?.scrollIntoView({behavior: 'smooth'})" data-astro-cid-bbe6dxrz> <div class="w-6 h-10 border-2 border-border rounded-full flex justify-center hover:border-primary transition-colors" data-astro-cid-bbe6dxrz> <div class="w-1 h-3 bg-primary rounded-full mt-2 animate-pulse" data-astro-cid-bbe6dxrz></div> </div> <div class="text-xs text-subtle mt-2 text-center" data-astro-cid-bbe6dxrz>Scroll</div> </div> </div> </div> </div> <!-- Decorative elements --> <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-border to-transparent" data-astro-cid-bbe6dxrz></div> </section> <section id="services" class="section-padding bg-gradient-to-b from-background to-surface/30" data-astro-cid-g5jplrhu> <div class="container-custom" data-astro-cid-g5jplrhu> <!-- Section header with modern typography --> <div class="text-center max-w-4xl mx-auto mb-20 animate-on-scroll" data-astro-cid-g5jplrhu> <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6" data-astro-cid-g5jplrhu> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" data-astro-cid-g5jplrhu> <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" data-astro-cid-g5jplrhu></path> </svg>
Our Services
</div> <h2 class="text-responsive-xl font-bold text-foreground mb-6" data-astro-cid-g5jplrhu>
Comprehensive IT Solutions
<span class="block text-gradient" data-astro-cid-g5jplrhu>Tailored for Your Success</span> </h2> <p class="text-responsive-base text-muted leading-relaxed" data-astro-cid-g5jplrhu> Uitgebreide IT-oplossingen op maat voor kleine bedrijven en freelancers </p> </div> <!-- Services grid with modern cards --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16" data-astro-cid-g5jplrhu> <div class="group relative animate-on-scroll" style="animation-delay: 0s" data-astro-cid-g5jplrhu> <!-- Background glow effect --> <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500 scale-95 group-hover:scale-100" data-astro-cid-g5jplrhu></div> <!-- Main card --> <div class="relative card-glass p-8 h-full flex flex-col hover:border-primary/30 transition-all duration-500" data-astro-cid-g5jplrhu> <!-- Service icon with modern container --> <div class="mb-6" data-astro-cid-g5jplrhu> <div class="relative inline-flex" data-astro-cid-g5jplrhu> <!-- Icon background with gradient --> <div class="absolute inset-0 bg-gradient-to-br from-primary to-accent rounded-2xl blur-md opacity-20 group-hover:opacity-40 transition-all duration-500" data-astro-cid-g5jplrhu></div> <div class="relative w-16 h-16 bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl flex items-center justify-center text-primary group-hover:scale-110 transition-all duration-500 border border-primary/20" data-astro-cid-g5jplrhu>
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none">
<rect x="2" y="2" width="9" height="9" rx="2" fill="currentColor" opacity="0.8"/>
<rect x="13" y="2" width="9" height="9" rx="2" fill="currentColor" opacity="0.6"/>
<rect x="2" y="13" width="9" height="9" rx="2" fill="currentColor" opacity="0.4"/>
<rect x="13" y="13" width="9" height="9" rx="2" fill="currentColor" opacity="0.2"/>
</svg>
</div> <!-- Floating dot indicator --> <div class="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div> <!-- Service title --> <h3 class="text-xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors duration-300" data-astro-cid-g5jplrhu> Microsoft 365 Ondersteuning </h3> <!-- Service description --> <p class="text-muted leading-relaxed mb-6 flex-grow" data-astro-cid-g5jplrhu> Complete Microsoft 365 installatie, migratie en doorlopende ondersteuning. </p> <!-- Service features with modern styling --> <div class="space-y-3 mb-8" data-astro-cid-g5jplrhu> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> E-mail &amp; data migraties </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Office apps configuratie </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Microsoft Teams installatie </span> </div> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-accent/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <span class="text-xs text-accent font-medium" data-astro-cid-g5jplrhu>+2</span> </div> <span class="text-subtle" data-astro-cid-g5jplrhu>
And 2 more features
</span> </div> </div> <!-- CTA Link with modern styling --> <div class="mt-auto" data-astro-cid-g5jplrhu> <a href="/nl/services#microsoft365" class="group/link inline-flex items-center gap-2 text-primary font-medium hover:text-accent transition-all duration-300" data-astro-cid-g5jplrhu> <span data-astro-cid-g5jplrhu>Learn more</span> <svg class="w-4 h-4 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-g5jplrhu></path> </svg> </a> </div> <!-- Decorative corner element --> <div class="absolute top-4 right-4 w-2 h-2 bg-gradient-to-br from-primary to-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div><div class="group relative animate-on-scroll" style="animation-delay: 0.1s" data-astro-cid-g5jplrhu> <!-- Background glow effect --> <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500 scale-95 group-hover:scale-100" data-astro-cid-g5jplrhu></div> <!-- Main card --> <div class="relative card-glass p-8 h-full flex flex-col hover:border-primary/30 transition-all duration-500" data-astro-cid-g5jplrhu> <!-- Service icon with modern container --> <div class="mb-6" data-astro-cid-g5jplrhu> <div class="relative inline-flex" data-astro-cid-g5jplrhu> <!-- Icon background with gradient --> <div class="absolute inset-0 bg-gradient-to-br from-primary to-accent rounded-2xl blur-md opacity-20 group-hover:opacity-40 transition-all duration-500" data-astro-cid-g5jplrhu></div> <div class="relative w-16 h-16 bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl flex items-center justify-center text-primary group-hover:scale-110 transition-all duration-500 border border-primary/20" data-astro-cid-g5jplrhu>
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div> <!-- Floating dot indicator --> <div class="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div> <!-- Service title --> <h3 class="text-xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors duration-300" data-astro-cid-g5jplrhu> Volledig M365 Beheer </h3> <!-- Service description --> <p class="text-muted leading-relaxed mb-6 flex-grow" data-astro-cid-g5jplrhu> Laat ons uw volledige Microsoft 365 omgeving beheren met proactief management. </p> <!-- Service features with modern styling --> <div class="space-y-3 mb-8" data-astro-cid-g5jplrhu> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Geautomatiseerde workflows </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> 24/7 systeembewaking </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Regelmatig onderhoud </span> </div> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-accent/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <span class="text-xs text-accent font-medium" data-astro-cid-g5jplrhu>+1</span> </div> <span class="text-subtle" data-astro-cid-g5jplrhu>
And 1 more features
</span> </div> </div> <!-- CTA Link with modern styling --> <div class="mt-auto" data-astro-cid-g5jplrhu> <a href="/nl/services#management" class="group/link inline-flex items-center gap-2 text-primary font-medium hover:text-accent transition-all duration-300" data-astro-cid-g5jplrhu> <span data-astro-cid-g5jplrhu>Learn more</span> <svg class="w-4 h-4 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-g5jplrhu></path> </svg> </a> </div> <!-- Decorative corner element --> <div class="absolute top-4 right-4 w-2 h-2 bg-gradient-to-br from-primary to-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div><div class="group relative animate-on-scroll" style="animation-delay: 0.2s" data-astro-cid-g5jplrhu> <!-- Background glow effect --> <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500 scale-95 group-hover:scale-100" data-astro-cid-g5jplrhu></div> <!-- Main card --> <div class="relative card-glass p-8 h-full flex flex-col hover:border-primary/30 transition-all duration-500" data-astro-cid-g5jplrhu> <!-- Service icon with modern container --> <div class="mb-6" data-astro-cid-g5jplrhu> <div class="relative inline-flex" data-astro-cid-g5jplrhu> <!-- Icon background with gradient --> <div class="absolute inset-0 bg-gradient-to-br from-primary to-accent rounded-2xl blur-md opacity-20 group-hover:opacity-40 transition-all duration-500" data-astro-cid-g5jplrhu></div> <div class="relative w-16 h-16 bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl flex items-center justify-center text-primary group-hover:scale-110 transition-all duration-500 border border-primary/20" data-astro-cid-g5jplrhu>
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="16" y="16" width="6" height="6" rx="1"/>
<rect x="2" y="16" width="6" height="6" rx="1"/>
<rect x="9" y="2" width="6" height="6" rx="1"/>
<path d="M9 9v1a2 2 0 0 0 2 2h1m0 0h1a2 2 0 0 1 2 2v1"/>
</svg>
</div> <!-- Floating dot indicator --> <div class="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div> <!-- Service title --> <h3 class="text-xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors duration-300" data-astro-cid-g5jplrhu> Netwerken &amp; Infrastructuur </h3> <!-- Service description --> <p class="text-muted leading-relaxed mb-6 flex-grow" data-astro-cid-g5jplrhu> Professionele netwerkoplossingen met Ubiquiti en UniFi apparatuur. </p> <!-- Service features with modern styling --> <div class="space-y-3 mb-8" data-astro-cid-g5jplrhu> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Ubiquiti/UniFi specialisten </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Netwerkinfrastructuur </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Netwerkbeveiliging </span> </div> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-accent/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <span class="text-xs text-accent font-medium" data-astro-cid-g5jplrhu>+1</span> </div> <span class="text-subtle" data-astro-cid-g5jplrhu>
And 1 more features
</span> </div> </div> <!-- CTA Link with modern styling --> <div class="mt-auto" data-astro-cid-g5jplrhu> <a href="/nl/services#networking" class="group/link inline-flex items-center gap-2 text-primary font-medium hover:text-accent transition-all duration-300" data-astro-cid-g5jplrhu> <span data-astro-cid-g5jplrhu>Learn more</span> <svg class="w-4 h-4 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-g5jplrhu></path> </svg> </a> </div> <!-- Decorative corner element --> <div class="absolute top-4 right-4 w-2 h-2 bg-gradient-to-br from-primary to-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div><div class="group relative animate-on-scroll" style="animation-delay: 0.30000000000000004s" data-astro-cid-g5jplrhu> <!-- Background glow effect --> <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500 scale-95 group-hover:scale-100" data-astro-cid-g5jplrhu></div> <!-- Main card --> <div class="relative card-glass p-8 h-full flex flex-col hover:border-primary/30 transition-all duration-500" data-astro-cid-g5jplrhu> <!-- Service icon with modern container --> <div class="mb-6" data-astro-cid-g5jplrhu> <div class="relative inline-flex" data-astro-cid-g5jplrhu> <!-- Icon background with gradient --> <div class="absolute inset-0 bg-gradient-to-br from-primary to-accent rounded-2xl blur-md opacity-20 group-hover:opacity-40 transition-all duration-500" data-astro-cid-g5jplrhu></div> <div class="relative w-16 h-16 bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl flex items-center justify-center text-primary group-hover:scale-110 transition-all duration-500 border border-primary/20" data-astro-cid-g5jplrhu>
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
</svg>
</div> <!-- Floating dot indicator --> <div class="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div> <!-- Service title --> <h3 class="text-xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors duration-300" data-astro-cid-g5jplrhu> Webhosting &amp; Beheer </h3> <!-- Service description --> <p class="text-muted leading-relaxed mb-6 flex-grow" data-astro-cid-g5jplrhu> Betrouwbare webhosting met volledig beheer en onderhoud inbegrepen. </p> <!-- Service features with modern styling --> <div class="space-y-3 mb-8" data-astro-cid-g5jplrhu> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Betrouwbare webhosting </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Domeinbeheer </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> SSL certificaten </span> </div> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-accent/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <span class="text-xs text-accent font-medium" data-astro-cid-g5jplrhu>+1</span> </div> <span class="text-subtle" data-astro-cid-g5jplrhu>
And 1 more features
</span> </div> </div> <!-- CTA Link with modern styling --> <div class="mt-auto" data-astro-cid-g5jplrhu> <a href="/nl/services#hosting" class="group/link inline-flex items-center gap-2 text-primary font-medium hover:text-accent transition-all duration-300" data-astro-cid-g5jplrhu> <span data-astro-cid-g5jplrhu>Learn more</span> <svg class="w-4 h-4 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-g5jplrhu></path> </svg> </a> </div> <!-- Decorative corner element --> <div class="absolute top-4 right-4 w-2 h-2 bg-gradient-to-br from-primary to-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div><div class="group relative animate-on-scroll" style="animation-delay: 0.4s" data-astro-cid-g5jplrhu> <!-- Background glow effect --> <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500 scale-95 group-hover:scale-100" data-astro-cid-g5jplrhu></div> <!-- Main card --> <div class="relative card-glass p-8 h-full flex flex-col hover:border-primary/30 transition-all duration-500" data-astro-cid-g5jplrhu> <!-- Service icon with modern container --> <div class="mb-6" data-astro-cid-g5jplrhu> <div class="relative inline-flex" data-astro-cid-g5jplrhu> <!-- Icon background with gradient --> <div class="absolute inset-0 bg-gradient-to-br from-primary to-accent rounded-2xl blur-md opacity-20 group-hover:opacity-40 transition-all duration-500" data-astro-cid-g5jplrhu></div> <div class="relative w-16 h-16 bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl flex items-center justify-center text-primary group-hover:scale-110 transition-all duration-500 border border-primary/20" data-astro-cid-g5jplrhu>
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
</div> <!-- Floating dot indicator --> <div class="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div> <!-- Service title --> <h3 class="text-xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors duration-300" data-astro-cid-g5jplrhu> Aangepaste IT Projecten </h3> <!-- Service description --> <p class="text-muted leading-relaxed mb-6 flex-grow" data-astro-cid-g5jplrhu> Op maat gemaakte IT-oplossingen speciaal ontworpen voor uw bedrijfsbehoeften. </p> <!-- Service features with modern styling --> <div class="space-y-3 mb-8" data-astro-cid-g5jplrhu> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> IT consultatie </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Aangepaste ontwikkeling </span> </div><div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" data-astro-cid-g5jplrhu></path> </svg> </div> <span class="text-muted group-hover:text-foreground transition-colors" data-astro-cid-g5jplrhu> Systeemintegratie </span> </div> <div class="flex items-center gap-3 text-sm" data-astro-cid-g5jplrhu> <div class="flex-shrink-0 w-5 h-5 rounded-full bg-accent/10 flex items-center justify-center" data-astro-cid-g5jplrhu> <span class="text-xs text-accent font-medium" data-astro-cid-g5jplrhu>+1</span> </div> <span class="text-subtle" data-astro-cid-g5jplrhu>
And 1 more features
</span> </div> </div> <!-- CTA Link with modern styling --> <div class="mt-auto" data-astro-cid-g5jplrhu> <a href="/nl/services#custom" class="group/link inline-flex items-center gap-2 text-primary font-medium hover:text-accent transition-all duration-300" data-astro-cid-g5jplrhu> <span data-astro-cid-g5jplrhu>Learn more</span> <svg class="w-4 h-4 transition-transform group-hover/link:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-g5jplrhu></path> </svg> </a> </div> <!-- Decorative corner element --> <div class="absolute top-4 right-4 w-2 h-2 bg-gradient-to-br from-primary to-accent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-pulse" data-astro-cid-g5jplrhu></div> </div> </div> </div> <!-- Modern CTA section --> <div class="text-center animate-on-scroll" data-astro-cid-g5jplrhu> <div class="inline-flex flex-col items-center gap-6 p-8 rounded-3xl bg-gradient-to-br from-surface/50 to-background/50 border border-border/50 backdrop-blur-sm" data-astro-cid-g5jplrhu> <div data-astro-cid-g5jplrhu> <h3 class="text-2xl font-bold text-foreground mb-2" data-astro-cid-g5jplrhu>Ready to transform your IT?</h3> <p class="text-muted" data-astro-cid-g5jplrhu>Let's discuss how we can help your business thrive</p> </div> <div class="flex flex-col sm:flex-row gap-4" data-astro-cid-g5jplrhu> <a href="/nl/services" class="btn btn-outline group" data-astro-cid-g5jplrhu> <svg class="w-4 h-4 transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" data-astro-cid-g5jplrhu></path> </svg>
View All Services
</a> <a href="/nl/contact" class="btn btn-primary group" data-astro-cid-g5jplrhu>
Get Started Today
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-g5jplrhu> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-g5jplrhu></path> </svg> </a> </div> </div> </div> </div> </section> <section class="py-20 bg-background"> <div class="container-custom"> <!-- Section header --> <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"> Wat Onze Klanten Zeggen </h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto"> Geloof ons niet zomaar - zie wat onze tevreden klanten te zeggen hebben </p> </div> <!-- Testimonials grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll" style="animation-delay: 0s"> <!-- Star rating --> <div class="flex items-center mb-4"> <svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg> </div> <!-- Testimonial content --> <blockquote class="text-muted-foreground mb-6 leading-relaxed italic">
"Tiber365 heeft onze Microsoft 365 installatie getransformeerd. Professionele service en uitstekende ondersteuning!"
</blockquote> <!-- Customer info --> <div class="flex items-center"> <!-- Avatar placeholder --> <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"> <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> </svg> </div> <div> <div class="font-semibold text-foreground"> Marco Rossi </div> <div class="text-sm text-muted-foreground"> Freelance Designer </div> </div> </div> </div><div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll" style="animation-delay: 0.1s"> <!-- Star rating --> <div class="flex items-center mb-4"> <svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg> </div> <!-- Testimonial content --> <blockquote class="text-muted-foreground mb-6 leading-relaxed italic">
"Hun netwerkoplossingen zijn eersteklas. Ons kantoor draait soepel dankzij hun expertise."
</blockquote> <!-- Customer info --> <div class="flex items-center"> <!-- Avatar placeholder --> <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"> <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> </svg> </div> <div> <div class="font-semibold text-foreground"> Sofia Bianchi </div> <div class="text-sm text-muted-foreground"> Kleine Bedrijfseigenaar </div> </div> </div> </div><div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll" style="animation-delay: 0.2s"> <!-- Star rating --> <div class="flex items-center mb-4"> <svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg><svg class="h-5 w-5 text-yellow-400 fill-current" viewBox="0 0 20 20"> <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"></path> </svg> </div> <!-- Testimonial content --> <blockquote class="text-muted-foreground mb-6 leading-relaxed italic">
"Betrouwbare webhosting en geweldige klantenservice. Beveel Tiber365 ten zeerste aan!"
</blockquote> <!-- Customer info --> <div class="flex items-center"> <!-- Avatar placeholder --> <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4"> <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> </svg> </div> <div> <div class="font-semibold text-foreground"> Giuseppe Verdi </div> <div class="text-sm text-muted-foreground"> Consultant </div> </div> </div> </div> </div> <!-- Additional social proof --> <div class="mt-16 text-center animate-on-scroll"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-3xl mx-auto"> <div class="text-center"> <div class="text-3xl font-bold text-primary mb-2">5+</div> <div class="text-sm text-muted-foreground">Jaren Ervaring</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-primary mb-2">100+</div> <div class="text-sm text-muted-foreground">Tevreden Klanten</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-primary mb-2">200+</div> <div class="text-sm text-muted-foreground">Voltooide Projecten</div> </div> </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>
Reference in New Issue View Git Blame Copy Permalink