42 lines
80 KiB
HTML
42 lines
80 KiB
HTML
<!DOCTYPE html><html lang="fr" 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>Services | Tiber365 - Services IT Professionnels | Tiber365</title><meta name="description" content="Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects."><meta name="keywords" content="services IT, Microsoft 365, réseau, hébergement web, automatisation, IT petites entreprises"><meta name="author" content="Tiber365"><!-- Robots Meta --><meta name="robots" content="index, follow"><!-- Canonical URL --><link rel="canonical" href="https://tiber365.it/fr/services/"><!-- Language and Localization --><meta name="google" content="notranslate"><meta http-equiv="Content-Language" content="fr"><!-- 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/fr/services/"><meta property="og:title" content="Services | Tiber365 - Services IT Professionnels | Tiber365"><meta property="og:description" content="Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects."><meta property="og:image" content="https://tiber365.it/images/og-image.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:site_name" content="Tiber365"><meta property="og:locale" content="fr_FR"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://tiber365.it/fr/services/"><meta name="twitter:title" content="Services | Tiber365 - Services IT Professionnels | Tiber365"><meta name="twitter:description" content="Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects."><meta name="twitter:image" content="https://tiber365.it/images/og-image.png"><meta name="twitter:creator" content="@tiber365"><!-- Favicons --><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="apple-touch-icon" href="/favicon.svg"><link rel="manifest" href="/manifest.json"><!-- Language alternates --><link rel="alternate" hreflang="en" href="https://tiber365.it/services/"><link rel="alternate" hreflang="nl" href="https://tiber365.it/nl/services/"><link rel="alternate" hreflang="de" href="https://tiber365.it/de/services/"><link rel="alternate" hreflang="fr" href="https://tiber365.it/fr/services/"><!-- Structured Data --><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Tiber365","description":"Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects.","url":"https://tiber365.it","logo":"https://tiber365.it/images/TIBER365.png","sameAs":["https://support.tiber365.it"],"contactPoint":{"@type":"ContactPoint","contactType":"customer service","availableLanguage":["English","Dutch","German","French"]},"address":{"@type":"PostalAddress","addressCountry":"NL"},"serviceArea":{"@type":"Country","name":"Netherlands"}}</script><link rel="stylesheet" href="/_astro/about.BkthZUHi.css">
|
|
<link rel="stylesheet" href="/_astro/about.DiFGXuh7.css"></head> <body class="min-h-screen bg-background text-foreground"> <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="main-header" data-astro-cid-3ef6ksr2> <!-- Glass morphism navigation --> <nav class="nav-glass" data-astro-cid-3ef6ksr2> <div class="container-custom" data-astro-cid-3ef6ksr2> <div class="flex h-20 items-center justify-between" data-astro-cid-3ef6ksr2> <!-- Logo with modern styling --> <div class="flex items-center" data-astro-cid-3ef6ksr2> <a href="/fr/" 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="/fr/" 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> Accueil </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="/fr/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> Services </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="/fr/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> À propos </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="/fr/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="/fr/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> Support <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="/fr/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">Français</span> <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg> </button> <div class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-background shadow-lg ring-1 ring-border" id="language-menu" role="menu" aria-orientation="vertical" aria-labelledby="language-menu-button"> <div class="py-1" role="none"> <a href="/services" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors text-muted-foreground" role="menuitem"> <span class="mr-3">🇬🇧</span> English </a><a href="/nl/services" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors text-muted-foreground" role="menuitem"> <span class="mr-3">🇳🇱</span> Nederlands </a><a href="/de/services" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors text-muted-foreground" role="menuitem"> <span class="mr-3">🇩🇪</span> Deutsch </a><a href="/fr/services" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors bg-accent text-foreground font-medium" 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="/fr/" 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> Accueil </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="/fr/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> Services </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="/fr/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> À propos </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="/fr/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="/fr/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> Support <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="/fr/contact" class="btn btn-primary w-full justify-center" data-astro-cid-3ef6ksr2>
|
|
Get Started Today
|
|
</a> </div> </div> </div> </div> </nav> <!-- Progress bar for scroll --> <div class="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300" id="scroll-progress" data-astro-cid-3ef6ksr2></div> </header> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("main-header"),t=document.getElementById("mobile-menu-button"),n=document.getElementById("mobile-menu"),s=document.getElementById("mobile-menu-icon"),d=document.getElementById("mobile-close-icon"),a=document.getElementById("scroll-progress");let i=window.scrollY;window.addEventListener("scroll",function(){const t=window.scrollY;t>100?(e?.classList.add("backdrop-blur-xl","bg-background/80"),e?.classList.remove("bg-transparent")):(e?.classList.remove("backdrop-blur-xl","bg-background/80"),e?.classList.add("bg-transparent")),t>i&&t>100?e?.classList.add("-translate-y-full"):e?.classList.remove("-translate-y-full"),i=t;const n=t/(document.documentElement.scrollHeight-window.innerHeight)*100;a&&(a.style.width=`${Math.min(n,100)}%`)},{passive:!0}),t&&n&&s&&d&&(t.addEventListener("click",()=>{const e=!("true"===t.getAttribute("aria-expanded"));t.setAttribute("aria-expanded",e.toString()),e?(n.classList.remove("hidden"),requestAnimationFrame(()=>{n.style.opacity="0",n.style.transform="translateY(-10px)",n.style.transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",requestAnimationFrame(()=>{n.style.opacity="1",n.style.transform="translateY(0)"})}),s.classList.add("hidden"),d.classList.remove("hidden"),document.body.style.overflow="hidden"):(n.style.opacity="0",n.style.transform="translateY(-10px)",setTimeout(()=>{n.classList.add("hidden"),document.body.style.overflow=""},300),s.classList.remove("hidden"),d.classList.add("hidden"))}),document.addEventListener("click",e=>{t.contains(e.target)||n.contains(e.target)||n.classList.contains("hidden")||t.click()}),document.addEventListener("keydown",e=>{"Escape"!==e.key||n.classList.contains("hidden")||t.click()}))});</script> <main> <!-- Services Hero --> <section class="py-20 bg-gradient-to-br from-background via-background to-muted"> <div class="container-custom"> <div class="text-center max-w-4xl mx-auto animate-on-scroll"> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6"> Nos Services </h1> <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed"> Solutions IT complètes adaptées aux petites entreprises et freelances </p> </div> </div> </section> <!-- Detailed Services --> <section class="py-20 bg-background"> <div class="container-custom"> <div class="space-y-32"> <div id="microsoft365" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll "> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🗂️</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Support Microsoft 365 </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Configuration complète Microsoft 365, migration et support continu pour votre entreprise. </p> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Seamless transition to Microsoft 365 with expert guidance</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Zero downtime email migrations and data transfer</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Custom configuration of all Office applications</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Enhanced team collaboration through Microsoft Teams</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Secure document management with SharePoint</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Streamlined admin center management</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Initial assessment of your current setup</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Custom migration plan development</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Step-by-step implementation</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">User training and support</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Ongoing maintenance and optimization</span> </li> </ul> </div> <!-- CTA button --> <a href="/fr/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">🗂️</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Migrations email et données</h4> <p class="text-sm text-muted-foreground"> Seamless data transfer with zero downtime </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Configuration des apps Office</h4> <p class="text-sm text-muted-foreground"> Full setup and optimization of Office applications </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Configuration Microsoft Teams</h4> <p class="text-sm text-muted-foreground"> Custom Teams environment configuration </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Collaboration SharePoint</h4> <p class="text-sm text-muted-foreground"> Document management and collaboration setup </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Gestion portail admin</h4> <p class="text-sm text-muted-foreground"> Complete admin portal configuration </p> </div> </div> </div> </div> </div> </div><div id="management" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll lg:grid-flow-col-reverse"> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">⚙️</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Gestion Complète M365 </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Laissez-nous gérer votre environnement Microsoft 365 complet avec une gestion proactive. </p> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Proactive system monitoring and maintenance</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Automated workflow implementation</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Enhanced security and compliance</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Regular performance optimization</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Cost-effective resource utilization</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Reduced IT management overhead</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Environment assessment</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Automation opportunity identification</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Monitoring setup and configuration</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">Regular maintenance scheduling</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Continuous improvement implementation</span> </li> </ul> </div> <!-- CTA button --> <a href="/fr/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">⚙️</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Workflows automatisés</h4> <p class="text-sm text-muted-foreground"> Custom workflow automation solutions </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Surveillance système 24/7</h4> <p class="text-sm text-muted-foreground"> Proactive system monitoring and alerts </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Maintenance régulière</h4> <p class="text-sm text-muted-foreground"> Regular updates and maintenance tasks </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Optimisation des performances</h4> <p class="text-sm text-muted-foreground"> Performance tuning and improvements </p> </div> </div> </div> </div> </div> </div><div id="networking" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll "> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🌐</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Réseau et Infrastructure </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Solutions réseau professionnelles avec équipements Ubiquiti et UniFi. </p> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Enterprise-grade network infrastructure</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">High-performance Ubiquiti/UniFi solutions</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Advanced security implementation</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Reliable and fast connectivity</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Scalable network architecture</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Professional network monitoring</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Network requirements analysis</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Infrastructure design and planning</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Equipment selection and deployment</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">Security implementation</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Performance optimization</span> </li> </ul> </div> <!-- CTA button --> <a href="/fr/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">🌐</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Spécialistes Ubiquiti/UniFi</h4> <p class="text-sm text-muted-foreground"> Expert Ubiquiti/UniFi implementation </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Infrastructure réseau</h4> <p class="text-sm text-muted-foreground"> Enterprise-grade network setup </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Sécurité réseau</h4> <p class="text-sm text-muted-foreground"> Advanced security measures </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Surveillance du trafic</h4> <p class="text-sm text-muted-foreground"> Proactive system monitoring and alerts </p> </div> </div> </div> </div> </div> </div><div id="hosting" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll lg:grid-flow-col-reverse"> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🛠️</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Hébergement Web et Gestion </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Hébergement web fiable avec gestion complète et maintenance incluse. </p> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">High-performance web hosting</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Secure and reliable infrastructure</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Automated backup systems</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">SSL certificate management</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Domain name administration</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Regular maintenance and updates</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Hosting requirements assessment</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Server configuration and setup</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Security implementation</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">Backup system configuration</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Ongoing monitoring and maintenance</span> </li> </ul> </div> <!-- CTA button --> <a href="/fr/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">🛠️</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Hébergement web fiable</h4> <p class="text-sm text-muted-foreground"> High-performance hosting solutions </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Gestion de domaines</h4> <p class="text-sm text-muted-foreground"> Complete domain management </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Certificats SSL</h4> <p class="text-sm text-muted-foreground"> SSL certificate installation and renewal </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Sauvegardes automatisées</h4> <p class="text-sm text-muted-foreground"> Automated backup and recovery </p> </div> </div> </div> </div> </div> </div><div id="custom" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll "> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🔒</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> Projets IT Personnalisés </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> Solutions IT sur mesure conçues spécifiquement pour vos besoins d'entreprise. </p> <div class="mb-8 p-4 bg-primary/5 rounded-lg border border-primary/10"> <p class="text-muted-foreground leading-relaxed"> While we offer standardized services for common IT needs, we understand that every business is unique. We're open to discussing and supporting custom IT projects that may fall outside our standard service offerings. Our professional approach ensures that all stakeholders are involved in the consultation, planning, and implementation phases. This collaborative process helps us deliver solutions that truly meet your specific requirements. </p> </div> <!-- Key Benefits --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3> <ul class="space-y-3"> <li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Flexible solutions tailored to your unique business needs</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Professional project management and documentation</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Clear communication and consultation throughout the process</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Integration with existing systems and workflows</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Scalable and future-proof implementations</span> </li><li class="flex items-start"> <svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="text-foreground">Support for requirements beyond our standard services</span> </li> </ul> </div> <!-- Our Process --> <div class="mb-8"> <h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3> <ul class="space-y-3"> <li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 1 </div> <span class="text-foreground">Initial consultation and requirements gathering</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 2 </div> <span class="text-foreground">Feasibility study and stakeholder alignment</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 3 </div> <span class="text-foreground">Detailed project planning with all involved parties</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 4 </div> <span class="text-foreground">Phased implementation with regular checkpoints</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 5 </div> <span class="text-foreground">Thorough testing and quality assurance</span> </li><li class="flex items-start"> <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5"> 6 </div> <span class="text-foreground">Post-implementation support and maintenance</span> </li> </ul> </div> <!-- CTA button --> <a href="/fr/contact" class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group">
|
|
Get Started
|
|
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Service features - Right side --> <div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5"> <div class="space-y-6"> <div class="text-center mb-8"> <div class="text-6xl mb-4 opacity-20">🔒</div> <h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3> </div> <div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Consultation IT</h4> <p class="text-sm text-muted-foreground"> </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Développement personnalisé</h4> <p class="text-sm text-muted-foreground"> </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Intégration système</h4> <p class="text-sm text-muted-foreground"> </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">Support continu</h4> <p class="text-sm text-muted-foreground"> </p> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Why Choose Us --> <section class="py-20 bg-muted/30"> <div class="container-custom"> <div class="text-center mb-16 animate-on-scroll"> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
|
|
Why Choose Tiber365?
|
|
</h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
We're dedicated to providing reliable, professional IT services that help your business thrive.
|
|
</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="card p-6 text-center animate-on-scroll"> <div class="text-4xl mb-4">⚡</div> <h3 class="text-xl font-semibold text-foreground mb-3">Fast Response</h3> <p class="text-muted-foreground">Quick turnaround times and 24/7 support when you need it most.</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.1s"> <div class="text-4xl mb-4">🎯</div> <h3 class="text-xl font-semibold text-foreground mb-3">Expert Knowledge</h3> <p class="text-muted-foreground">Years of experience with Microsoft 365, networking, and modern IT solutions.</p> </div> <div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.2s"> <div class="text-4xl mb-4">💼</div> <h3 class="text-xl font-semibold text-foreground mb-3">Business Focus</h3> <p class="text-muted-foreground">We understand small business needs and provide cost-effective solutions.</p> </div> </div> </div> </section> <section class="py-20 bg-gradient-to-br from-primary via-primary to-secondary text-primary-foreground relative overflow-hidden"> <!-- Background decoration --> <div class="absolute inset-0 opacity-10"> <div class="absolute top-10 left-10 w-32 h-32 rounded-full bg-white blur-2xl"></div> <div class="absolute bottom-10 right-10 w-48 h-48 rounded-full bg-white blur-3xl"></div> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-white blur-3xl"></div> </div> <div class="container-custom relative z-10"> <div class="text-center max-w-4xl mx-auto animate-on-scroll"> <!-- CTA heading --> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold mb-6"> Prêt à Commencer ? </h2> <!-- CTA subtitle --> <p class="text-lg sm:text-xl mb-8 opacity-90 leading-relaxed"> Discutons de la façon dont nous pouvons transformer votre infrastructure IT. </p> <!-- CTA button --> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> <a href="/fr/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"> Nous Contacter Aujourd'hui <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>Accueil</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>Services</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>À propos</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>Support</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> |