24 lines
46 KiB
HTML
24 lines
46 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=Poppins: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=Poppins: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 - Services IT Professionnels | Tiber365</title><meta name="description" content="Services IT professionnels pour freelances et petites entreprises. Support Microsoft 365, solutions réseau, hébergement web et projets IT personnalisés."><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/"><!-- 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/"><meta property="og:title" content="Tiber365 - Services IT Professionnels | Tiber365"><meta property="og:description" content="Services IT professionnels pour freelances et petites entreprises. Support Microsoft 365, solutions réseau, hébergement web et projets IT personnalisés."><meta property="og:image" content="https://tiber365.it/images/og-image.jpg"><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/"><meta name="twitter:title" content="Tiber365 - Services IT Professionnels | Tiber365"><meta name="twitter:description" content="Services IT professionnels pour freelances et petites entreprises. Support Microsoft 365, solutions réseau, hébergement web et projets IT personnalisés."><meta name="twitter:image" content="https://tiber365.it/images/og-image.jpg"><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","description":"Services IT professionnels pour freelances et petites entreprises. Support Microsoft 365, solutions réseau, hébergement web et projets IT personnalisés.","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":"IT"},"serviceArea":{"@type":"Country","name":"Italy"}}</script><link rel="stylesheet" href="/_astro/about.C05z7JL7.css">
|
|
<link rel="stylesheet" href="/_astro/about.Ct3MDOu0.css">
|
|
<style>.bg-grid-pattern[data-astro-cid-bbe6dxrz]{background-image:radial-gradient(circle,rgba(var(--color-foreground) / .1) 1px,transparent 1px);background-size:30px 30px}
|
|
</style></head> <body class="min-h-screen bg-background text-foreground"> <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"Tiber365 - Services IT Professionnels","description":"Services IT professionnels pour freelances et petites entreprises. Support Microsoft 365, solutions réseau, hébergement web et projets IT personnalisés.","url":"https://tiber365.it/fr","inLanguage":"fr","isPartOf":{"@type":"WebSite","name":"Tiber365","url":"https://tiber365.it"},"mainEntity":{"@type":"Organization","name":"Tiber365","description":"Your trusted partner in digital transformation","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":"Italy"}}}</script> <header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> <nav class="container-custom"> <div class="flex h-16 items-center justify-between"> <!-- Logo --> <div class="flex items-center"> <a href="/fr/" class="flex items-center space-x-2"> <div class="h-8 w-8 flex items-center justify-center"> <img src="/images/TIBER365.png" alt="Tiber365 Logo" class="h-6 w-6 object-contain"> </div> <span class="font-display font-bold text-xl text-foreground">Tiber365</span> </a> </div> <!-- Desktop Navigation --> <div class="hidden md:flex items-center space-x-6"> <a href="/fr/" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Accueil <span class="absolute inset-x-0 -bottom-1 h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span> </a><a href="/fr/services" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Services <span class="absolute inset-x-0 -bottom-1 h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span> </a><a href="/fr/about" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> À propos <span class="absolute inset-x-0 -bottom-1 h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span> </a><a href="/fr/blog" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Blog <span class="absolute inset-x-0 -bottom-1 h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span> </a><a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Support <svg class="inline h-3 w-3 ml-1 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"></path> </svg> <span class="absolute inset-x-0 -bottom-1 h-0.5 bg-primary scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span> </a> </div> <!-- Theme Toggle & Language Switcher --> <div class="flex items-center space-x-4"> <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="/" 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 text-muted-foreground" 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 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> <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="md:hidden 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-expanded="false" aria-label="Toggle mobile menu"> <svg id="mobile-menu-icon" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> <svg id="mobile-close-icon" class="h-6 w-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> <!-- Mobile Navigation --> <div id="mobile-menu" class="md:hidden hidden border-t border-border"> <div class="px-2 pt-2 pb-3 space-y-1"> <a href="/fr/" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Accueil </a><a href="/fr/services" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Services </a><a href="/fr/about" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> À propos </a><a href="/fr/blog" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Blog </a><a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Support <svg class="inline h-4 w-4 ml-1 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"></path> </svg> </a> </div> </div> </nav> </header> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("mobile-menu-button"),t=document.getElementById("mobile-menu"),d=document.getElementById("mobile-menu-icon"),n=document.getElementById("mobile-close-icon");e&&t&&d&&n&&(e.addEventListener("click",()=>{const i="true"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",(!i).toString()),t.classList.toggle("hidden"),d.classList.toggle("hidden"),n.classList.toggle("hidden")}),document.addEventListener("click",i=>{e.contains(i.target)||t.contains(i.target)||(e.setAttribute("aria-expanded","false"),t.classList.add("hidden"),d.classList.remove("hidden"),n.classList.add("hidden"))}))});</script> <main> <section class="relative min-h-[calc(100vh-4rem)] flex items-center justify-center bg-gradient-to-br from-background via-background to-muted overflow-hidden" data-astro-cid-bbe6dxrz> <div class="container-custom relative z-10" data-astro-cid-bbe6dxrz> <div class="flex flex-col items-center justify-center w-full animate-on-scroll" data-astro-cid-bbe6dxrz> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6 text-center" data-astro-cid-bbe6dxrz> Services IT Professionnels pour Votre Entreprise </h1> <p class="text-lg sm:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto text-center" data-astro-cid-bbe6dxrz> Nous aidons les freelances et petites entreprises avec un support Microsoft 365 fiable, des solutions réseau, de l'hébergement web et des projets IT personnalisés. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8" data-astro-cid-bbe6dxrz> <a href="/fr/contact" class="btn-primary px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105" data-astro-cid-bbe6dxrz> Commencer Aujourd'hui </a> <a href="/fr/services" class="btn-outline px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105" data-astro-cid-bbe6dxrz> Voir Nos Services </a> </div> <p class="mt-8 text-sm text-muted-foreground text-center" data-astro-cid-bbe6dxrz> Fait confiance par les entreprises à travers l'Italie </p> <!-- Service Icons Row --> <div class="flex justify-center gap-6 mt-6 mb-4 text-3xl opacity-80" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>🗂️</span> <span data-astro-cid-bbe6dxrz>🌐</span> <span data-astro-cid-bbe6dxrz>⚙️</span> <span data-astro-cid-bbe6dxrz>🔒</span> <span data-astro-cid-bbe6dxrz>🛠️</span> </div> <!-- Downward Arrow --> <div class="flex justify-center mt-8" data-astro-cid-bbe6dxrz> <span class="animate-bounce text-3xl text-primary/60" data-astro-cid-bbe6dxrz>↓</span> </div> </div> </div> <div class="absolute inset-0 -z-10 overflow-hidden" data-astro-cid-bbe6dxrz> <div class="absolute -top-1/2 -right-1/2 w-full h-full rotate-12 bg-gradient-radial from-primary/5 via-primary/2 to-transparent opacity-70" data-astro-cid-bbe6dxrz></div> <div class="absolute -bottom-1/2 -left-1/2 w-full h-full -rotate-12 bg-gradient-radial from-primary/5 via-primary/2 to-transparent opacity-70" data-astro-cid-bbe6dxrz></div> </div> </section> <section id="services" class="py-20 bg-muted/30"> <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"> Nos Services </h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto"> Solutions IT complètes adaptées aux petites entreprises et freelances </p> </div> <!-- Services grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> <div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll group" style="animation-delay: 0s"> <!-- Service icon --> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300"> 🏢 </div> <!-- Service title --> <h3 class="text-xl font-display font-semibold text-foreground mb-3"> Support Microsoft 365 </h3> <!-- Service description --> <p class="text-muted-foreground mb-4 leading-relaxed"> Configuration complète Microsoft 365, migration et support continu pour votre entreprise. </p> <!-- Service features --> <ul class="space-y-2"> <li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Migrations email et données </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Configuration des apps Office </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Configuration Microsoft Teams </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Collaboration SharePoint </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Gestion portail admin </li> </ul> <!-- Learn more link --> <div class="mt-6"> <a href="/fr/services#microsoft365" class="inline-flex items-center text-primary hover:text-primary/80 font-medium text-sm group-hover:translate-x-1 transition-all duration-200">
|
|
Learn more
|
|
<svg class="h-4 w-4 ml-1" 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> </div><div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll group" style="animation-delay: 0.1s"> <!-- Service icon --> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300"> ⚙️ </div> <!-- Service title --> <h3 class="text-xl font-display font-semibold text-foreground mb-3"> Gestion Complète M365 </h3> <!-- Service description --> <p class="text-muted-foreground mb-4 leading-relaxed"> Laissez-nous gérer votre environnement Microsoft 365 complet avec une gestion proactive. </p> <!-- Service features --> <ul class="space-y-2"> <li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Workflows automatisés </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Surveillance système 24/7 </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Maintenance régulière </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Optimisation des performances </li> </ul> <!-- Learn more link --> <div class="mt-6"> <a href="/fr/services#management" class="inline-flex items-center text-primary hover:text-primary/80 font-medium text-sm group-hover:translate-x-1 transition-all duration-200">
|
|
Learn more
|
|
<svg class="h-4 w-4 ml-1" 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> </div><div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll group" style="animation-delay: 0.2s"> <!-- Service icon --> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300"> 🌐 </div> <!-- Service title --> <h3 class="text-xl font-display font-semibold text-foreground mb-3"> Réseau et Infrastructure </h3> <!-- Service description --> <p class="text-muted-foreground mb-4 leading-relaxed"> Solutions réseau professionnelles avec équipements Ubiquiti et UniFi. </p> <!-- Service features --> <ul class="space-y-2"> <li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Spécialistes Ubiquiti/UniFi </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Infrastructure réseau </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Sécurité réseau </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Surveillance du trafic </li> </ul> <!-- Learn more link --> <div class="mt-6"> <a href="/fr/services#networking" class="inline-flex items-center text-primary hover:text-primary/80 font-medium text-sm group-hover:translate-x-1 transition-all duration-200">
|
|
Learn more
|
|
<svg class="h-4 w-4 ml-1" 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> </div><div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll group" style="animation-delay: 0.30000000000000004s"> <!-- Service icon --> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300"> 🚀 </div> <!-- Service title --> <h3 class="text-xl font-display font-semibold text-foreground mb-3"> Hébergement Web et Gestion </h3> <!-- Service description --> <p class="text-muted-foreground mb-4 leading-relaxed"> Hébergement web fiable avec gestion complète et maintenance incluse. </p> <!-- Service features --> <ul class="space-y-2"> <li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Hébergement web fiable </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Gestion de domaines </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Certificats SSL </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Sauvegardes automatisées </li> </ul> <!-- Learn more link --> <div class="mt-6"> <a href="/fr/services#hosting" class="inline-flex items-center text-primary hover:text-primary/80 font-medium text-sm group-hover:translate-x-1 transition-all duration-200">
|
|
Learn more
|
|
<svg class="h-4 w-4 ml-1" 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> </div><div class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll group" style="animation-delay: 0.4s"> <!-- Service icon --> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300"> 🛠️ </div> <!-- Service title --> <h3 class="text-xl font-display font-semibold text-foreground mb-3"> Projets IT Personnalisés </h3> <!-- Service description --> <p class="text-muted-foreground mb-4 leading-relaxed"> Solutions IT sur mesure conçues spécifiquement pour vos besoins d'entreprise. </p> <!-- Service features --> <ul class="space-y-2"> <li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Consultation IT </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Développement personnalisé </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Intégration système </li><li class="flex items-start text-sm text-muted-foreground"> <svg class="h-4 w-4 mt-0.5 mr-2 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> Support continu </li> </ul> <!-- Learn more link --> <div class="mt-6"> <a href="/fr/services#custom" class="inline-flex items-center text-primary hover:text-primary/80 font-medium text-sm group-hover:translate-x-1 transition-all duration-200">
|
|
Learn more
|
|
<svg class="h-4 w-4 ml-1" 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> </div> </div> <!-- CTA section --> <div class="text-center animate-on-scroll"> <a href="/fr/services" class="btn-primary 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"> Voir Tous les Services <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="M13 7l5 5m0 0l-5 5m5-5H6"></path> </svg> </a> </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"> Ce Que Disent Nos Clients </h2> <p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto"> Ne nous croyez pas sur parole - voyez ce que nos clients satisfaits ont à dire </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 a transformé notre configuration Microsoft 365. Service professionnel et excellent support !"
|
|
</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"> Designer Freelance </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">
|
|
"Leurs solutions réseau sont de premier ordre. Notre bureau fonctionne parfaitement grâce à leur 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"> Propriétaire de Petite Entreprise </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">
|
|
"Hébergement web fiable et excellent service client. Je recommande vivement Tiber365 !"
|
|
</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">Années d'Expérience</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">Clients Satisfaits</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">Projets Terminés</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"> 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="bg-secondary-900 text-secondary-100 pt-16 pb-8"> <div class="container-custom"> <!-- Main footer content --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> <!-- Company info --> <div class="lg:col-span-2"> <!-- Logo --> <div class="flex items-center space-x-2 mb-4"> <div class="h-8 w-8 flex items-center justify-center"> <img src="/images/TIBER365.png" alt="Tiber365 Logo" class="h-6 w-6 object-contain"> </div> <span class="font-display font-bold text-xl text-white">Tiber365</span> </div> <!-- Description --> <p class="text-secondary-300 mb-6 max-w-md leading-relaxed"> Services IT professionnels pour freelances et petites entreprises. </p> <!-- Contact info --> <div class="space-y-2"> <div class="flex items-center text-secondary-300"> <svg class="h-5 w-5 mr-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"></path> </svg> info@tiber365.it </div> <div class="flex items-center text-secondary-300"> <svg class="h-5 w-5 mr-3 text-primary" 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> +39 123 456 7890 </div> <div class="flex items-center text-secondary-300"> <svg class="h-5 w-5 mr-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> Rome, Italie </div> </div> </div> <!-- Quick Links --> <div> <h3 class="font-semibold text-white mb-4">Quick Links</h3> <ul class="space-y-2"> <li> <a href="/" class="text-secondary-300 hover:text-primary transition-colors"> Accueil </a> </li><li> <a href="/services" class="text-secondary-300 hover:text-primary transition-colors"> Services </a> </li><li> <a href="/about" class="text-secondary-300 hover:text-primary transition-colors"> À propos </a> </li><li> <a href="/blog" class="text-secondary-300 hover:text-primary transition-colors"> Blog </a> </li> <li> <a href="/contact" class="text-secondary-300 hover:text-primary transition-colors"> Contact </a> </li> </ul> </div> <!-- External Links --> <div> <h3 class="font-semibold text-white mb-4">Resources</h3> <ul class="space-y-2"> <li> <a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-secondary-300 hover:text-primary transition-colors inline-flex items-center"> Support <svg class="h-3 w-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"></path> </svg> </a> </li> <li> <a href="/privacy" class="text-secondary-300 hover:text-primary transition-colors"> Politique de Confidentialité </a> </li> <li> <a href="/terms" class="text-secondary-300 hover:text-primary transition-colors"> Conditions de Service </a> </li> </ul> </div> </div> <!-- Footer bottom --> <div class="border-t border-secondary-800 pt-8"> <div class="flex flex-col md:flex-row justify-between items-center"> <!-- Copyright --> <p class="text-secondary-400 text-sm"> © 2024 Tiber365. Tous droits réservés. </p> <!-- Social links placeholder --> <div class="flex items-center space-x-4 mt-4 md:mt-0"> <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-secondary-400 hover:text-primary transition-colors" aria-label="Blog"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <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"></path> </svg> </a> <a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-secondary-400 hover:text-primary transition-colors" aria-label="Support Portal"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <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"></path> </svg> </a> </div> </div> </div> </div> </footer> <!-- Initialize animations and service worker --> <script type="module" src="/_astro/BaseLayout.astro_astro_type_script_index_0_lang.Bgdado9F.js"></script> </body> </html> |