34 lines
61 KiB
HTML
34 lines
61 KiB
HTML
<!DOCTYPE html><html lang="de" class="scroll-smooth"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Astro v5.12.3"><!-- Font Preloading --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"></noscript><!-- DNS Prefetch --><link rel="dns-prefetch" href="//fonts.googleapis.com"><link rel="dns-prefetch" href="//fonts.gstatic.com"><!-- SEO Meta Tags --><title>Kontakt | Tiber365 - Professionelle IT-Services | Tiber365</title><meta name="description" content="contact.description"><meta name="keywords" content="IT-Services, Microsoft 365, Netzwerk, Webhosting, Automatisierung, IT für kleine Unternehmen"><meta name="author" content="Tiber365"><!-- Robots Meta --><meta name="robots" content="index, follow"><!-- Canonical URL --><link rel="canonical" href="https://tiber365.it/de/contact/"><!-- Language and Localization --><meta name="google" content="notranslate"><meta http-equiv="Content-Language" content="de"><!-- 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/de/contact/"><meta property="og:title" content="Kontakt | Tiber365 - Professionelle IT-Services | Tiber365"><meta property="og:description" content="contact.description"><meta property="og:image" content="https://tiber365.it/images/og-image.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:site_name" content="Tiber365"><meta property="og:locale" content="de_DE"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://tiber365.it/de/contact/"><meta name="twitter:title" content="Kontakt | Tiber365 - Professionelle IT-Services | Tiber365"><meta name="twitter:description" content="contact.description"><meta name="twitter:image" content="https://tiber365.it/images/og-image.png"><meta name="twitter:creator" content="@tiber365"><!-- Favicons --><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="apple-touch-icon" href="/favicon.svg"><link rel="manifest" href="/manifest.json"><!-- Language alternates --><link rel="alternate" hreflang="en" href="https://tiber365.it/contact/"><link rel="alternate" hreflang="nl" href="https://tiber365.it/nl/contact/"><link rel="alternate" hreflang="de" href="https://tiber365.it/de/contact/"><link rel="alternate" hreflang="fr" href="https://tiber365.it/fr/contact/"><!-- Structured Data --><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Tiber365","description":"contact.description","url":"https://tiber365.it","logo":"https://tiber365.it/images/TIBER365.png","sameAs":["https://support.tiber365.it"],"contactPoint":{"@type":"ContactPoint","contactType":"customer service","availableLanguage":["English","Dutch","German","French"]},"address":{"@type":"PostalAddress","addressCountry":"NL"},"serviceArea":{"@type":"Country","name":"Netherlands"}}</script><link rel="stylesheet" href="/_astro/about.D_EvXghT.css">
|
|
<link rel="stylesheet" href="/_astro/about.UzmqI4ov.css">
|
|
<style>.shake[data-astro-cid-svshx33u]{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(360deg);opacity:0}}.btn[data-astro-cid-svshx33u].loading{position:relative;color:transparent}.btn[data-astro-cid-svshx33u].loading #submit-text[data-astro-cid-svshx33u],.btn[data-astro-cid-svshx33u].loading svg[data-astro-cid-svshx33u]:not(#submit-spinner){opacity:0}.btn[data-astro-cid-svshx33u].loading #submit-spinner[data-astro-cid-svshx33u]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-input[data-astro-cid-svshx33u]:focus,.form-textarea[data-astro-cid-svshx33u]:focus,.form-select[data-astro-cid-svshx33u]:focus{transform:translateY(-1px);box-shadow:0 10px 25px -5px #3b82f61a,0 4px 6px -2px #3b82f60d}.border-success[data-astro-cid-svshx33u]{border-color:rgb(var(--color-success))!important;box-shadow:0 0 0 3px #22c55e1a}.border-error[data-astro-cid-svshx33u]{border-color:rgb(var(--color-error))!important;box-shadow:0 0 0 3px #ef44441a}.group[data-astro-cid-svshx33u]:hover .flex-shrink-0[data-astro-cid-svshx33u]{transform:scale(1.1);transition:transform .3s ease}
|
|
</style></head> <body class="min-h-screen bg-background text-foreground"> <script type="application/ld+json">{"@context":"https://schema.org","@type":"ContactPage","name":"Kontakt - Tiber365 - Professionelle IT-Services","description":"contact.description","url":"https://tiber365.it/de/contact","inLanguage":"de","mainEntity":{"@type":"Organization","name":"Tiber365","contactPoint":{"@type":"ContactPoint","contactType":"customer service","availableLanguage":["English","Dutch","German","French"],"email":"info@tiber365.it"}}}</script> <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="main-header" data-astro-cid-3ef6ksr2> <!-- Glass morphism navigation --> <nav class="nav-glass" data-astro-cid-3ef6ksr2> <div class="container-custom" data-astro-cid-3ef6ksr2> <div class="flex h-20 items-center justify-between" data-astro-cid-3ef6ksr2> <!-- Logo with modern styling --> <div class="flex items-center" data-astro-cid-3ef6ksr2> <a href="/de/" class="group flex items-center space-x-3 transition-all" data-astro-cid-3ef6ksr2> <div class="relative" data-astro-cid-3ef6ksr2> <div class="absolute inset-0 bg-primary/20 rounded-xl blur-md opacity-0 group-hover:opacity-100 transition-opacity" data-astro-cid-3ef6ksr2></div> <div class="relative h-10 w-10 bg-gradient-to-br from-primary to-accent rounded-xl flex items-center justify-center" data-astro-cid-3ef6ksr2> <img src="/images/TIBER365.png" alt="Tiber365 Logo" class="h-6 w-6 object-contain brightness-0 invert" data-astro-cid-3ef6ksr2> </div> </div> <div class="flex flex-col" data-astro-cid-3ef6ksr2> <span class="font-bold text-lg text-foreground group-hover:text-primary transition-colors" data-astro-cid-3ef6ksr2>Tiber365</span> <span class="text-xs text-subtle -mt-1" data-astro-cid-3ef6ksr2>IT Excellence</span> </div> </a> </div> <!-- Desktop Navigation with modern hover effects --> <div class="hidden lg:flex items-center space-x-1" data-astro-cid-3ef6ksr2> <a href="/de/" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Startseite </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="/de/services" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Dienstleistungen </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="/de/about" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Über uns </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="/de/contact" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Kontakt </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="/de/blog" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Blog </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a><a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="relative px-4 py-2 text-sm font-medium text-muted hover:text-foreground transition-all duration-300 rounded-lg group" data-astro-cid-3ef6ksr2> <span class="relative z-10 flex items-center gap-1" data-astro-cid-3ef6ksr2> Support <svg class="h-3 w-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" data-astro-cid-3ef6ksr2></path> </svg> </span> <!-- Hover background --> <div class="absolute inset-0 bg-surface/50 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100" data-astro-cid-3ef6ksr2></div> <!-- Active indicator --> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-primary to-accent group-hover:w-full transition-all duration-300" data-astro-cid-3ef6ksr2></div> </a> <!-- CTA Button in nav --> <a href="/de/contact" class="ml-4 btn btn-primary btn-sm" data-astro-cid-3ef6ksr2>
|
|
Get Started
|
|
</a> </div> <!-- Right side controls --> <div class="flex items-center space-x-3" data-astro-cid-3ef6ksr2> <!-- Language switcher with modern styling --> <div class="relative inline-block text-left" id="language-switcher"> <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary" id="language-menu-button" aria-expanded="false" aria-haspopup="true"> <span class="mr-2">🇩🇪</span> <span class="hidden sm:inline">Deutsch</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="/contact" 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/contact" 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/contact" 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> Deutsch </a><a href="/fr/contact" class="flex items-center px-4 py-2 text-sm hover:bg-accent transition-colors text-muted-foreground" role="menuitem"> <span class="mr-3">🇫🇷</span> Français </a> </div> </div> </div> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("language-menu-button"),t=document.getElementById("language-menu");e&&t&&(e.addEventListener("click",()=>{const n="true"===e.getAttribute("aria-expanded");e.setAttribute("aria-expanded",(!n).toString()),t.classList.toggle("hidden")}),document.addEventListener("click",n=>{e?.contains(n.target)||t?.contains(n.target)||(e?.setAttribute("aria-expanded","false"),t?.classList.add("hidden"))}))});</script> <!-- Theme toggle with modern animation --> <button id="theme-toggle" class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary" aria-label="nav.theme.toggle" title="nav.theme.toggle"> <!-- Sun icon (light mode) --> <svg id="theme-toggle-light-icon" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path> </svg> <!-- Moon icon (dark mode) --> <svg id="theme-toggle-dark-icon" class="h-5 w-5 hidden" fill="currentColor" viewBox="0 0 20 20"> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> </svg> </button> <script type="module" src="/_astro/ThemeToggle.astro_astro_type_script_index_0_lang.DrBH2BW7.js"></script> <!-- Mobile Menu Button --> <button id="mobile-menu-button" class="lg:hidden p-2 rounded-xl bg-surface/50 border border-border/50 text-muted hover:text-foreground hover:bg-surface transition-all" aria-expanded="false" aria-label="Toggle mobile menu" data-astro-cid-3ef6ksr2> <svg id="mobile-menu-icon" class="h-5 w-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-3ef6ksr2></path> </svg> <svg id="mobile-close-icon" class="h-5 w-5 hidden transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" data-astro-cid-3ef6ksr2></path> </svg> </button> </div> </div> </div> <!-- Mobile Navigation Menu --> <div id="mobile-menu" class="lg:hidden hidden border-t border-border/50" data-astro-cid-3ef6ksr2> <div class="container-custom py-6" data-astro-cid-3ef6ksr2> <div class="space-y-2" data-astro-cid-3ef6ksr2> <a href="/de/" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Startseite </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="/de/services" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Dienstleistungen </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="/de/about" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Über uns </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="/de/contact" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Kontakt </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="/de/blog" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Blog </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a><a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between p-4 text-base font-medium text-muted hover:text-foreground hover:bg-surface/50 rounded-xl transition-all group" data-astro-cid-3ef6ksr2> <span class="flex items-center gap-2" data-astro-cid-3ef6ksr2> Support <svg class="h-4 w-4 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" data-astro-cid-3ef6ksr2></path> </svg> </span> <svg class="h-4 w-4 opacity-40 group-hover:opacity-60 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-3ef6ksr2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-3ef6ksr2></path> </svg> </a> <!-- Mobile CTA --> <div class="pt-4 mt-4 border-t border-border/50" data-astro-cid-3ef6ksr2> <a href="/de/contact" class="btn btn-primary w-full justify-center" data-astro-cid-3ef6ksr2>
|
|
Get Started Today
|
|
</a> </div> </div> </div> </div> </nav> <!-- Progress bar for scroll --> <div class="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300" id="scroll-progress" data-astro-cid-3ef6ksr2></div> </header> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("main-header"),t=document.getElementById("mobile-menu-button"),n=document.getElementById("mobile-menu"),s=document.getElementById("mobile-menu-icon"),d=document.getElementById("mobile-close-icon"),a=document.getElementById("scroll-progress");let i=window.scrollY;window.addEventListener("scroll",function(){const t=window.scrollY;t>100?(e?.classList.add("backdrop-blur-xl","bg-background/80"),e?.classList.remove("bg-transparent")):(e?.classList.remove("backdrop-blur-xl","bg-background/80"),e?.classList.add("bg-transparent")),t>i&&t>100?e?.classList.add("-translate-y-full"):e?.classList.remove("-translate-y-full"),i=t;const n=t/(document.documentElement.scrollHeight-window.innerHeight)*100;a&&(a.style.width=`${Math.min(n,100)}%`)},{passive:!0}),t&&n&&s&&d&&(t.addEventListener("click",()=>{const e=!("true"===t.getAttribute("aria-expanded"));t.setAttribute("aria-expanded",e.toString()),e?(n.classList.remove("hidden"),requestAnimationFrame(()=>{n.style.opacity="0",n.style.transform="translateY(-10px)",n.style.transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",requestAnimationFrame(()=>{n.style.opacity="1",n.style.transform="translateY(0)"})}),s.classList.add("hidden"),d.classList.remove("hidden"),document.body.style.overflow="hidden"):(n.style.opacity="0",n.style.transform="translateY(-10px)",setTimeout(()=>{n.classList.add("hidden"),document.body.style.overflow=""},300),s.classList.remove("hidden"),d.classList.add("hidden"))}),document.addEventListener("click",e=>{t.contains(e.target)||n.contains(e.target)||n.classList.contains("hidden")||t.click()}),document.addEventListener("keydown",e=>{"Escape"!==e.key||n.classList.contains("hidden")||t.click()}))});</script> <main> <section class="section-padding bg-gradient-to-br from-background via-surface/30 to-background" data-astro-cid-svshx33u> <div class="container-custom" data-astro-cid-svshx33u> <div class="max-w-7xl mx-auto" data-astro-cid-svshx33u> <!-- Section header --> <div class="text-center mb-16 animate-on-scroll" data-astro-cid-svshx33u> <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6" data-astro-cid-svshx33u> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" data-astro-cid-svshx33u> <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" data-astro-cid-svshx33u></path> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" data-astro-cid-svshx33u></path> </svg>
|
|
Get In Touch
|
|
</div> <h2 class="text-responsive-xl font-bold text-foreground mb-6" data-astro-cid-svshx33u>
|
|
Ready to Transform
|
|
<span class="block text-gradient" data-astro-cid-svshx33u>Your IT Infrastructure?</span> </h2> <p class="text-responsive-base text-muted max-w-2xl mx-auto" data-astro-cid-svshx33u> Bereit, Ihre IT-Infrastruktur zu transformieren? Lassen Sie uns sprechen! </p> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-12" data-astro-cid-svshx33u> <!-- Contact form - Takes 2 columns on large screens --> <div class="lg:col-span-2 animate-on-scroll" data-astro-cid-svshx33u> <div class="card-glass p-8 lg:p-12" data-astro-cid-svshx33u> <form id="contact-form" class="space-y-6" data-astro-cid-svshx33u> <!-- Form header --> <div class="mb-8" data-astro-cid-svshx33u> <h3 class="text-2xl font-bold text-foreground mb-2" data-astro-cid-svshx33u>Send us a message</h3> <p class="text-muted" data-astro-cid-svshx33u>We'll get back to you within 24 hours</p> </div> <!-- Name and Email row --> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6" data-astro-cid-svshx33u> <div class="space-y-2" data-astro-cid-svshx33u> <label for="name" class="block text-sm font-medium text-foreground" data-astro-cid-svshx33u> Name <span class="text-error" data-astro-cid-svshx33u>*</span> </label> <div class="relative" data-astro-cid-svshx33u> <input type="text" id="name" name="name" required class="form-input peer" placeholder="John Doe" data-astro-cid-svshx33u> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none opacity-0 peer-focus:opacity-100 transition-opacity" data-astro-cid-svshx33u> <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <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" data-astro-cid-svshx33u></path> </svg> </div> </div> </div> <div class="space-y-2" data-astro-cid-svshx33u> <label for="email" class="block text-sm font-medium text-foreground" data-astro-cid-svshx33u> E-Mail <span class="text-error" data-astro-cid-svshx33u>*</span> </label> <div class="relative" data-astro-cid-svshx33u> <input type="email" id="email" name="email" required class="form-input peer" placeholder="john@company.com" data-astro-cid-svshx33u> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none opacity-0 peer-focus:opacity-100 transition-opacity" data-astro-cid-svshx33u> <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" data-astro-cid-svshx33u></path> </svg> </div> </div> </div> </div> <!-- Company field --> <div class="space-y-2" data-astro-cid-svshx33u> <label for="company" class="block text-sm font-medium text-foreground" data-astro-cid-svshx33u> Unternehmen </label> <div class="relative" data-astro-cid-svshx33u> <input type="text" id="company" name="company" class="form-input peer" placeholder="Your Company" data-astro-cid-svshx33u> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none opacity-0 peer-focus:opacity-100 transition-opacity" data-astro-cid-svshx33u> <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5h3" data-astro-cid-svshx33u></path> </svg> </div> </div> </div> <!-- Service selection --> <div class="space-y-2" data-astro-cid-svshx33u> <label for="service" class="block text-sm font-medium text-foreground" data-astro-cid-svshx33u> Service </label> <div class="relative" data-astro-cid-svshx33u> <select id="service" name="service" class="form-select peer" data-astro-cid-svshx33u> <option value="" data-astro-cid-svshx33u>Select a service</option> <option value="microsoft365" data-astro-cid-svshx33u>Microsoft 365 Support</option> <option value="management" data-astro-cid-svshx33u>Full M365 Management</option> <option value="networking" data-astro-cid-svshx33u>Networking & Infrastructure</option> <option value="hosting" data-astro-cid-svshx33u>Web Hosting & Management</option> <option value="custom" data-astro-cid-svshx33u>Custom IT Projects</option> </select> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none opacity-0 peer-focus:opacity-100 transition-opacity" data-astro-cid-svshx33u> <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" data-astro-cid-svshx33u></path> </svg> </div> </div> </div> <!-- Message field --> <div class="space-y-2" data-astro-cid-svshx33u> <label for="message" class="block text-sm font-medium text-foreground" data-astro-cid-svshx33u> Nachricht <span class="text-error" data-astro-cid-svshx33u>*</span> </label> <div class="relative" data-astro-cid-svshx33u> <textarea id="message" name="message" rows="5" required class="form-textarea peer" placeholder="Tell us about your IT needs and how we can help..." data-astro-cid-svshx33u></textarea> <div class="absolute top-3 left-0 pl-3 flex items-start pointer-events-none opacity-0 peer-focus:opacity-100 transition-opacity" data-astro-cid-svshx33u> <svg class="h-5 w-5 text-primary mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <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" data-astro-cid-svshx33u></path> </svg> </div> </div> </div> <!-- Character counter --> <div class="flex justify-between items-center text-sm text-subtle" data-astro-cid-svshx33u> <span id="char-counter" data-astro-cid-svshx33u>0 characters</span> <span data-astro-cid-svshx33u>Max 1000 characters</span> </div> <!-- Submit button --> <div class="pt-4" data-astro-cid-svshx33u> <button type="submit" class="w-full btn btn-primary group relative overflow-hidden" id="submit-btn" data-astro-cid-svshx33u> <span id="submit-text" class="relative z-10" data-astro-cid-svshx33u>Nachricht senden</span> <svg id="submit-spinner" class="hidden h-5 w-5 animate-spin relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" data-astro-cid-svshx33u></path> </svg> <svg class="h-5 w-5 ml-2 transition-transform group-hover:translate-x-1 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" data-astro-cid-svshx33u></path> </svg> <!-- Button ripple effect --> <div class="absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300" data-astro-cid-svshx33u></div> </button> </div> <!-- Form message --> <div id="form-message" class="hidden p-4 rounded-xl" data-astro-cid-svshx33u></div> </form> </div> </div> <!-- Contact info sidebar --> <div class="animate-on-scroll" style="animation-delay: 0.2s" data-astro-cid-svshx33u> <div class="space-y-8" data-astro-cid-svshx33u> <!-- Main contact card --> <div class="card-glass p-8" data-astro-cid-svshx33u> <h3 class="text-xl font-bold text-foreground mb-6 flex items-center gap-2" data-astro-cid-svshx33u> <div class="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-lg flex items-center justify-center" data-astro-cid-svshx33u> <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20" data-astro-cid-svshx33u> <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" data-astro-cid-svshx33u></path> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" data-astro-cid-svshx33u></path> </svg> </div>
|
|
Get in Touch
|
|
</h3> <div class="space-y-6" data-astro-cid-svshx33u> <!-- Email --> <div class="group hover:bg-surface/50 p-4 rounded-xl transition-all cursor-pointer" data-astro-cid-svshx33u> <div class="flex items-start gap-4" data-astro-cid-svshx33u> <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center group-hover:bg-primary/20 transition-colors" data-astro-cid-svshx33u> <svg class="h-6 w-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" data-astro-cid-svshx33u></path> </svg> </div> <div class="flex-1" data-astro-cid-svshx33u> <div class="text-sm text-subtle mb-1" data-astro-cid-svshx33u>Email</div> <a href="mailto:info@tiber365.it" class="text-foreground hover:text-primary transition-colors font-medium" data-astro-cid-svshx33u> info@tiber365.it </a> <div class="text-xs text-subtle mt-1" data-astro-cid-svshx33u>Response within 2 hours</div> </div> </div> </div> <!-- Phone --> <div class="group hover:bg-surface/50 p-4 rounded-xl transition-all cursor-pointer" data-astro-cid-svshx33u> <div class="flex items-start gap-4" data-astro-cid-svshx33u> <div class="flex-shrink-0 w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center group-hover:bg-accent/20 transition-colors" data-astro-cid-svshx33u> <svg class="h-6 w-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" data-astro-cid-svshx33u></path> </svg> </div> <div class="flex-1" data-astro-cid-svshx33u> <div class="text-sm text-subtle mb-1" data-astro-cid-svshx33u>Phone</div> <a href="tel:+391234567890" class="text-foreground hover:text-accent transition-colors font-medium" data-astro-cid-svshx33u> +39 123 456 7890 </a> <div class="text-xs text-subtle mt-1" data-astro-cid-svshx33u>Mon-Fri 9AM-6PM CET</div> </div> </div> </div> <!-- Location --> <div class="group hover:bg-surface/50 p-4 rounded-xl transition-all cursor-pointer" data-astro-cid-svshx33u> <div class="flex items-start gap-4" data-astro-cid-svshx33u> <div class="flex-shrink-0 w-12 h-12 bg-success/10 rounded-xl flex items-center justify-center group-hover:bg-success/20 transition-colors" data-astro-cid-svshx33u> <svg class="h-6 w-6 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" data-astro-cid-svshx33u></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" data-astro-cid-svshx33u></path> </svg> </div> <div class="flex-1" data-astro-cid-svshx33u> <div class="text-sm text-subtle mb-1" data-astro-cid-svshx33u>Location</div> <div class="text-foreground font-medium" data-astro-cid-svshx33u> Amsterdam, Niederlande </div> <div class="text-xs text-subtle mt-1" data-astro-cid-svshx33u>Central European Time</div> </div> </div> </div> </div> </div> <!-- Quick stats --> <div class="card-glass p-6" data-astro-cid-svshx33u> <h4 class="font-semibold text-foreground mb-4" data-astro-cid-svshx33u>Why choose us?</h4> <div class="space-y-4" data-astro-cid-svshx33u> <div class="flex items-center gap-3" data-astro-cid-svshx33u> <div class="w-2 h-2 bg-primary rounded-full animate-pulse" data-astro-cid-svshx33u></div> <span class="text-sm text-muted" data-astro-cid-svshx33u>24/7 Technical Support</span> </div> <div class="flex items-center gap-3" data-astro-cid-svshx33u> <div class="w-2 h-2 bg-accent rounded-full animate-pulse" style="animation-delay: 0.5s;" data-astro-cid-svshx33u></div> <span class="text-sm text-muted" data-astro-cid-svshx33u>99.9% Service Uptime</span> </div> <div class="flex items-center gap-3" data-astro-cid-svshx33u> <div class="w-2 h-2 bg-success rounded-full animate-pulse" style="animation-delay: 1s;" data-astro-cid-svshx33u></div> <span class="text-sm text-muted" data-astro-cid-svshx33u>5+ Years Experience</span> </div> <div class="flex items-center gap-3" data-astro-cid-svshx33u> <div class="w-2 h-2 bg-warning rounded-full animate-pulse" style="animation-delay: 1.5s;" data-astro-cid-svshx33u></div> <span class="text-sm text-muted" data-astro-cid-svshx33u>100+ Happy Clients</span> </div> </div> </div> <!-- Emergency contact --> <div class="p-6 bg-gradient-to-br from-error/10 to-warning/10 border border-error/20 rounded-2xl" data-astro-cid-svshx33u> <div class="flex items-center gap-3 mb-3" data-astro-cid-svshx33u> <div class="w-8 h-8 bg-error/20 rounded-lg flex items-center justify-center" data-astro-cid-svshx33u> <svg class="w-4 h-4 text-error" fill="currentColor" viewBox="0 0 20 20" data-astro-cid-svshx33u> <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" data-astro-cid-svshx33u></path> </svg> </div> <h4 class="font-semibold text-foreground" data-astro-cid-svshx33u>Emergency Support</h4> </div> <p class="text-sm text-muted mb-3" data-astro-cid-svshx33u>Critical system down? Our emergency line is always available.</p> <a href="tel:+391234567890" class="inline-flex items-center gap-2 text-sm font-medium text-error hover:text-error/80 transition-colors" data-astro-cid-svshx33u> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-svshx33u> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" data-astro-cid-svshx33u></path> </svg>
|
|
Call Emergency Line
|
|
</a> </div> </div> </div> </div> </div> </div> </section> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("contact-form"),t=document.getElementById("submit-btn"),s=document.getElementById("submit-text"),r=document.getElementById("submit-spinner"),n=document.getElementById("form-message"),o=document.getElementById("message"),a=document.getElementById("char-counter");o&&a&&o.addEventListener("input",()=>{const e=o.value.length;a.textContent=`${e} characters`,e>1e3?(a.classList.add("text-error"),o.classList.add("border-error")):(a.classList.remove("text-error"),o.classList.remove("border-error"))});const d=e.querySelectorAll("input, textarea, select");function i(e){const t=e.target;t.checkValidity()?(t.classList.remove("border-error"),t.classList.add("border-success")):(t.classList.add("border-error","shake"),setTimeout(()=>t.classList.remove("shake"),500))}function c(e){e.target.classList.remove("border-error","border-success")}function l(e,t){n&&(n.textContent=e,n.className="p-4 rounded-xl transition-all duration-300 "+("success"===t?"bg-success/10 border border-success/20 text-success":"bg-error/10 border border-error/20 text-error"),n.classList.remove("hidden"),setTimeout(()=>{n.style.opacity="0",setTimeout(()=>{n.classList.add("hidden"),n.style.opacity="1"},300)},5e3))}d.forEach(e=>{e.addEventListener("blur",i),e.addEventListener("input",c)}),e&&e.addEventListener("submit",async n=>{n.preventDefault();let o=!0;if(d.forEach(e=>{e instanceof HTMLInputElement&&!e.checkValidity()&&(e.classList.add("border-error","shake"),o=!1)}),o){t.disabled=!0,t.classList.add("loading"),s.textContent="Sending...",r.classList.remove("hidden"),t.style.animation="pulse 1s infinite";try{await new Promise(e=>setTimeout(e,2e3)),l("Message sent successfully! We'll get back to you within 24 hours.","success"),e.reset(),d.forEach(e=>{e.classList.remove("border-error","border-success")}),function(){for(let e=0;e<50;e++){const e=document.createElement("div");e.className="fixed w-2 h-2 bg-primary rounded-full pointer-events-none z-50",e.style.left=100*Math.random()+"vw",e.style.top="-10px",e.style.animation=`confetti-fall ${2*Math.random()+1}s linear forwards`,document.body.appendChild(e),setTimeout(()=>e.remove(),3e3)}}()}catch(a){l("Failed to send message. Please try again or contact us directly.","error")}finally{t.disabled=!1,t.classList.remove("loading"),t.style.animation="",s.textContent="Send Message",r.classList.add("hidden")}}else l("Please fill in all required fields correctly.","error")})});</script> </main> <footer class="relative bg-gradient-to-br from-surface via-background to-surface border-t border-border/50" data-astro-cid-sz7xmlte> <!-- Background pattern --> <div class="absolute inset-0 opacity-30" data-astro-cid-sz7xmlte> <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, rgb(var(--color-primary) / 0.1) 1px, transparent 0); background-size: 32px 32px;" data-astro-cid-sz7xmlte></div> </div> <div class="container-custom relative z-10" data-astro-cid-sz7xmlte> <!-- Main footer content --> <div class="section-padding" data-astro-cid-sz7xmlte> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8" data-astro-cid-sz7xmlte> <!-- Company info - spans 5 columns --> <div class="lg:col-span-5 space-y-8" data-astro-cid-sz7xmlte> <!-- Logo and tagline --> <div class="space-y-4" data-astro-cid-sz7xmlte> <div class="flex items-center space-x-3 group" data-astro-cid-sz7xmlte> <div class="relative" data-astro-cid-sz7xmlte> <div class="absolute inset-0 bg-primary/20 rounded-xl blur-md opacity-0 group-hover:opacity-100 transition-all duration-500" data-astro-cid-sz7xmlte></div> <div class="relative h-12 w-12 bg-gradient-to-br from-primary to-accent rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300" data-astro-cid-sz7xmlte> <img src="/images/TIBER365.png" alt="Tiber365 Logo" class="h-7 w-7 object-contain brightness-0 invert" data-astro-cid-sz7xmlte> </div> </div> <div data-astro-cid-sz7xmlte> <span class="font-bold text-2xl text-foreground group-hover:text-primary transition-colors duration-300" data-astro-cid-sz7xmlte>Tiber365</span> <div class="text-sm text-gradient font-medium" data-astro-cid-sz7xmlte>IT Excellence Delivered</div> </div> </div> <!-- Description --> <p class="text-muted leading-relaxed max-w-md" data-astro-cid-sz7xmlte>
|
|
Professional IT services for freelancers and small businesses. We specialize in making technology work seamlessly for your business.
|
|
</p> </div> <!-- Contact info with modern styling --> <div class="space-y-4" data-astro-cid-sz7xmlte> <h4 class="font-semibold text-foreground mb-4 flex items-center gap-2" data-astro-cid-sz7xmlte> <div class="w-1 h-6 bg-gradient-to-b from-primary to-accent rounded-full" data-astro-cid-sz7xmlte></div>
|
|
Contact Information
|
|
</h4> <div class="space-y-3" data-astro-cid-sz7xmlte> <div class="group flex items-center gap-3 p-3 hover:bg-surface/50 rounded-xl transition-all cursor-pointer" data-astro-cid-sz7xmlte> <div class="flex-shrink-0 w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center group-hover:bg-primary/20 transition-colors" data-astro-cid-sz7xmlte> <svg class="h-5 w-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" data-astro-cid-sz7xmlte></path> </svg> </div> <div data-astro-cid-sz7xmlte> <div class="text-sm text-subtle" data-astro-cid-sz7xmlte>Email</div> <a href="mailto:info@tiber365.it" class="text-foreground hover:text-primary transition-colors font-medium" data-astro-cid-sz7xmlte>
|
|
info@tiber365.it
|
|
</a> </div> </div> <div class="group flex items-center gap-3 p-3 hover:bg-surface/50 rounded-xl transition-all cursor-pointer" data-astro-cid-sz7xmlte> <div class="flex-shrink-0 w-10 h-10 bg-accent/10 rounded-lg flex items-center justify-center group-hover:bg-accent/20 transition-colors" data-astro-cid-sz7xmlte> <svg class="h-5 w-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" data-astro-cid-sz7xmlte></path> </svg> </div> <div data-astro-cid-sz7xmlte> <div class="text-sm text-subtle" data-astro-cid-sz7xmlte>Phone</div> <a href="tel:+391234567890" class="text-foreground hover:text-accent transition-colors font-medium" data-astro-cid-sz7xmlte>
|
|
+39 123 456 7890
|
|
</a> </div> </div> <div class="group flex items-center gap-3 p-3 hover:bg-surface/50 rounded-xl transition-all cursor-pointer" data-astro-cid-sz7xmlte> <div class="flex-shrink-0 w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center group-hover:bg-success/20 transition-colors" data-astro-cid-sz7xmlte> <svg class="h-5 w-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" data-astro-cid-sz7xmlte></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" data-astro-cid-sz7xmlte></path> </svg> </div> <div data-astro-cid-sz7xmlte> <div class="text-sm text-subtle" data-astro-cid-sz7xmlte>Location</div> <div class="text-foreground font-medium" data-astro-cid-sz7xmlte>
|
|
Amsterdam, Netherlands
|
|
</div> </div> </div> </div> </div> <!-- Social proof --> <div class="p-6 bg-gradient-to-br from-primary/5 to-accent/5 rounded-2xl border border-primary/10" data-astro-cid-sz7xmlte> <div class="flex items-center gap-4 mb-4" data-astro-cid-sz7xmlte> <div class="flex -space-x-2" data-astro-cid-sz7xmlte> <div class="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-full border-2 border-background flex items-center justify-center text-white text-xs font-bold" data-astro-cid-sz7xmlte>T</div> <div class="w-8 h-8 bg-gradient-to-br from-accent to-primary rounded-full border-2 border-background flex items-center justify-center text-white text-xs font-bold" data-astro-cid-sz7xmlte>I</div> <div class="w-8 h-8 bg-gradient-to-br from-success to-primary rounded-full border-2 border-background flex items-center justify-center text-white text-xs font-bold" data-astro-cid-sz7xmlte>B</div> </div> <div data-astro-cid-sz7xmlte> <div class="text-sm font-semibold text-foreground" data-astro-cid-sz7xmlte>100+ Happy Clients</div> <div class="text-xs text-subtle" data-astro-cid-sz7xmlte>Trusted by businesses across Europe</div> </div> </div> <div class="flex items-center gap-1" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg><svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg><svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg><svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg><svg class="w-4 h-4 text-warning fill-current" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" data-astro-cid-sz7xmlte></path> </svg> <span class="text-sm text-muted ml-2" data-astro-cid-sz7xmlte>4.9/5 average rating</span> </div> </div> </div> <!-- Quick Links - spans 3 columns --> <div class="lg:col-span-3" data-astro-cid-sz7xmlte> <h4 class="font-semibold text-foreground mb-6 flex items-center gap-2" data-astro-cid-sz7xmlte> <div class="w-1 h-6 bg-gradient-to-b from-primary to-accent rounded-full" data-astro-cid-sz7xmlte></div>
|
|
Quick Links
|
|
</h4> <ul class="space-y-3" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a href="/" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Startseite</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="/services" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Dienstleistungen</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="/about" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Über uns</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="/contact" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Kontakt</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li> <li data-astro-cid-sz7xmlte> <a href="/contact" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-primary/50 rounded-full group-hover:bg-primary transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Contact</span> <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-astro-cid-sz7xmlte></path> </svg> </a> </li> </ul> </div> <!-- Resources - spans 4 columns --> <div class="lg:col-span-4" data-astro-cid-sz7xmlte> <h4 class="font-semibold text-foreground mb-6 flex items-center gap-2" data-astro-cid-sz7xmlte> <div class="w-1 h-6 bg-gradient-to-b from-accent to-primary rounded-full" data-astro-cid-sz7xmlte></div>
|
|
Resources & Links
|
|
</h4> <div class="space-y-6" data-astro-cid-sz7xmlte> <!-- External links --> <ul class="space-y-3" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-accent/50 rounded-full group-hover:bg-accent transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Blog</span> <svg class="w-3 h-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" data-astro-cid-sz7xmlte></path> </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-accent/50 rounded-full group-hover:bg-accent transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Support</span> <svg class="w-3 h-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" data-astro-cid-sz7xmlte></path> </svg> </a> </li> <!-- Legal links --> <li data-astro-cid-sz7xmlte> <a href="/privacy" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-accent/50 rounded-full group-hover:bg-accent transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Privacy Policy</span> </a> </li> <li data-astro-cid-sz7xmlte> <a href="/terms" class="group flex items-center gap-2 text-muted hover:text-foreground transition-all duration-300 p-2 hover:bg-surface/50 rounded-lg" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-accent/50 rounded-full group-hover:bg-accent transition-colors" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Terms of Service</span> </a> </li> </ul> <!-- Newsletter signup --> <div class="p-4 bg-gradient-to-br from-surface/50 to-background/50 border border-border/50 rounded-xl" data-astro-cid-sz7xmlte> <h5 class="font-medium text-foreground mb-2 flex items-center gap-2" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" data-astro-cid-sz7xmlte></path> </svg>
|
|
Stay Updated
|
|
</h5> <p class="text-sm text-muted mb-3" data-astro-cid-sz7xmlte>Get the latest IT tips and updates</p> <form class="flex gap-2" data-astro-cid-sz7xmlte> <input type="email" placeholder="your@email.com" class="flex-1 px-3 py-2 text-sm bg-background border border-border rounded-lg focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all" data-astro-cid-sz7xmlte> <button type="submit" class="px-4 py-2 bg-gradient-to-r from-primary to-accent text-white text-sm font-medium rounded-lg hover:shadow-lg transition-all" data-astro-cid-sz7xmlte> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" data-astro-cid-sz7xmlte></path> </svg> </button> </form> </div> </div> </div> </div> </div> <!-- Footer bottom --> <div class="border-t border-border/50 py-8" data-astro-cid-sz7xmlte> <div class="flex flex-col lg:flex-row justify-between items-center gap-6" data-astro-cid-sz7xmlte> <!-- Copyright --> <div class="flex items-center gap-4" data-astro-cid-sz7xmlte> <p class="text-subtle text-sm" data-astro-cid-sz7xmlte>
|
|
© 2024 Tiber365. All rights reserved.
|
|
</p> <div class="flex items-center gap-1 text-xs text-subtle" data-astro-cid-sz7xmlte> <span data-astro-cid-sz7xmlte>Made with</span> <svg class="w-3 h-3 text-error animate-pulse" fill="currentColor" viewBox="0 0 20 20" data-astro-cid-sz7xmlte> <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" data-astro-cid-sz7xmlte></path> </svg> <span data-astro-cid-sz7xmlte>in Amsterdam</span> </div> </div> <!-- Social links and additional info --> <div class="flex items-center gap-6" data-astro-cid-sz7xmlte> <!-- Business info --> <div class="flex items-center gap-4 text-xs text-subtle" data-astro-cid-sz7xmlte> <div class="flex items-center gap-1" data-astro-cid-sz7xmlte> <div class="w-2 h-2 bg-success rounded-full animate-pulse" data-astro-cid-sz7xmlte></div> <span data-astro-cid-sz7xmlte>Online</span> </div> <span data-astro-cid-sz7xmlte>•</span> <span data-astro-cid-sz7xmlte>CET Timezone</span> <span data-astro-cid-sz7xmlte>•</span> <span data-astro-cid-sz7xmlte>VAT: NL123456789B01</span> </div> <!-- Social/External links --> <div class="flex items-center gap-3" data-astro-cid-sz7xmlte> <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="group p-2 bg-surface/50 hover:bg-primary/10 border border-border/50 hover:border-primary/30 rounded-lg transition-all" aria-label="Blog" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-muted group-hover:text-primary transition-colors" fill="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" data-astro-cid-sz7xmlte></path> </svg> </a> <a href="https://support.tiber365.it" target="_blank" rel="noopener noreferrer" class="group p-2 bg-surface/50 hover:bg-accent/10 border border-border/50 hover:border-accent/30 rounded-lg transition-all" aria-label="Support Portal" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-muted group-hover:text-accent transition-colors" fill="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" data-astro-cid-sz7xmlte></path> </svg> </a> <!-- Back to top button --> <button id="back-to-top" class="group p-2 bg-surface/50 hover:bg-success/10 border border-border/50 hover:border-success/30 rounded-lg transition-all opacity-0" aria-label="Back to top" data-astro-cid-sz7xmlte> <svg class="w-4 h-4 text-muted group-hover:text-success transition-all group-hover:-translate-y-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-sz7xmlte> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" data-astro-cid-sz7xmlte></path> </svg> </button> </div> </div> </div> </div> </div> <!-- Decorative bottom border --> <div class="h-1 bg-gradient-to-r from-transparent via-primary to-transparent" data-astro-cid-sz7xmlte></div> </footer> <script type="module">document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("back-to-top");window.addEventListener("scroll",function(){window.scrollY>500?(e?.classList.remove("opacity-0"),e?.classList.add("opacity-100")):(e?.classList.add("opacity-0"),e?.classList.remove("opacity-100"))},{passive:!0}),e?.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})});const t=document.querySelector("form");t?.addEventListener("submit",e=>{e.preventDefault();const t=e.target.querySelector('input[type="email"]');if(t.value){const o=e.target.querySelector('button[type="submit"]'),s=o.innerHTML;o.innerHTML='<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>',o.disabled=!0,setTimeout(()=>{o.innerHTML='<svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>',t.value="",setTimeout(()=>{o.innerHTML=s,o.disabled=!1},2e3)},1e3)}});document.querySelectorAll(".group").forEach(e=>{e.addEventListener("mouseenter",()=>{const t=e.querySelector(".flex-shrink-0");t?.classList.add("animate-pulse")}),e.addEventListener("mouseleave",()=>{const t=e.querySelector(".flex-shrink-0");t?.classList.remove("animate-pulse")})})});</script> <!-- Initialize animations and service worker --> <script type="module" src="/_astro/BaseLayout.astro_astro_type_script_index_0_lang.C5sG_tfp.js"></script> </body> </html> |