20 lines
55 KiB
HTML
20 lines
55 KiB
HTML
<!DOCTYPE html><html lang="en" 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>nav.services | meta.title | 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="digital transformation, IT services, consulting"><meta name="author" content="Tiber365"><!-- Robots Meta --><meta name="robots" content="index, follow"><!-- Canonical URL --><link rel="canonical" href="https://tiber365.it/services/"><!-- Language and Localization --><meta name="google" content="notranslate"><meta http-equiv="Content-Language" content="en"><!-- 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/services/"><meta property="og:title" content="nav.services | meta.title | 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.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="en_US"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://tiber365.it/services/"><meta name="twitter:title" content="nav.services | meta.title | 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.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/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.C05z7JL7.css">
|
|
<link rel="stylesheet" href="/_astro/about.DJBbvL2M.css"></head> <body class="min-h-screen bg-background text-foreground"> <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="/" 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="/" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> Home <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="/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="/about" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors relative group"> About <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="/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">English</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 bg-accent text-foreground font-medium" 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 text-muted-foreground" role="menuitem"> <span class="mr-3">🇫🇷</span> Français </a> </div> </div> </div> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("language-menu-button"),t=document.getElementById("language-menu");e&&t&&(e.addEventListener("click",()=>{const n="true"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",(!n).toString()),t.classList.toggle("hidden")}),document.addEventListener("click",n=>{e?.contains(n.target)||t?.contains(n.target)||(e?.setAttribute("aria-expanded","false"),t?.classList.add("hidden"))}))});</script> <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="/" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> Home </a><a href="/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="/about" class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"> About </a><a href="/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> <!-- 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"> services.title </h1> <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed"> services.subtitle </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"> services.microsoft365.title </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> services.microsoft365.description </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="/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">services.microsoft365.features.migrations</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">services.microsoft365.features.apps</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">services.microsoft365.features.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">services.microsoft365.features.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">services.microsoft365.features.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"> services.management.title </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> services.management.description </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="/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">services.management.features.automation</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">services.management.features.monitoring</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">services.management.features.maintenance</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">services.management.features.optimization</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"> services.networking.title </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> services.networking.description </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="/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">services.networking.features.ubiquiti</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">services.networking.features.infrastructure</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">services.networking.features.security</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">services.networking.features.monitoring</h4> <p class="text-sm text-muted-foreground"> Proactive system monitoring and alerts </p> </div> </div> </div> </div> </div> </div><div id="hosting" class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll lg:grid-flow-col-reverse"> <!-- Service content - Left side --> <div> <div class="text-5xl mb-4">🚀</div> <h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4"> services.hosting.title </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> services.hosting.description </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="/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">services.hosting.features.webhosting</h4> <p class="text-sm text-muted-foreground"> High-performance hosting solutions </p> </div> </div> </div><div class="bg-background/50 rounded-lg p-4"> <div class="flex items-start"> <svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <div> <h4 class="font-medium text-foreground mb-1">services.hosting.features.domains</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">services.hosting.features.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">services.hosting.features.backup</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"> services.custom.title </h2> <p class="text-lg text-muted-foreground mb-8 leading-relaxed"> services.custom.description </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="/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">services.custom.features.consultation</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">services.custom.features.development</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">services.custom.features.integration</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">services.custom.features.support</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"> Ready to Get Started? </h2> <!-- CTA subtitle --> <p class="text-lg sm:text-xl mb-8 opacity-90 leading-relaxed"> Let's discuss how we can help transform your IT infrastructure. </p> <!-- CTA button --> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> <a href="/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"> Contact Us Today <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"> Professional IT services for freelancers and small businesses. </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> Amsterdam, Netherlands </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"> Home </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"> About </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"> Privacy Policy </a> </li> <li> <a href="/terms" class="text-secondary-300 hover:text-primary transition-colors"> Terms of 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. All rights reserved. </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.C5sG_tfp.js"></script> </body> </html> |