Updated website

HyperBit-IT · Dec 26, 2023 · 15367ce · 15367ce
1 parent 826d296
commit 15367ce
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 6 deletions.
diff --git a/components/snippets/PopOver.vue b/components/snippets/PopOver.vue
@@ -0,0 +1,72 @@
+<template>
+  <Popover>
+    <PopoverButton @click="showPopover = !showPopover" class="inline-flex items-center leading-3 text-gray-700 focus:outline-none">
+      <span>{{ $t('services') }}</span>
+      <ChevronDownIcon class="h-5 w-4" :class="{hidden : showPopover}" aria-hidden="false" />
+      <ChevronUpIcon class="h-5 w-4" :class="{hidden : !showPopover}" aria-hidden="false" />
+    </PopoverButton>
+
+    <transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 translate-y-1">
+      <PopoverPanel class="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4">
+        <div class="w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
+          <div class="p-4">
+            <div class="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
+              <div class="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                <component :is="CommandLineIcon" class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" aria-hidden="true" />
+              </div>
+              <div>
+                <a href="/Services/MSP" class="font-semibold text-gray-900">
+                  Managed Service Provider
+                  <span class="absolute inset-0" />
+                </a>
+                <p class="mt-1 text-gray-600">Servizi di gestione e manutenzione di infrastrutture IT</p>
+              </div>
+            </div>
+            <div class="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
+              <div class="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                <component :is="ServerStackIcon" class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" aria-hidden="true" />
+              </div>
+              <div>
+                <a href="/Services/Cloud" class="font-semibold text-gray-900">
+                  Cloud Ibrido e Dedicato
+                  <span class="absolute inset-0" />
+                </a>
+                <p class="mt-1 text-gray-600">Cloud pubblico, virtualizzazione e servizi di hosting in tutto il mondo</p>
+              </div>
+            </div>
+            <div class="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
+              <div class="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                <component :is="ChatBubbleLeftRightIcon" class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" aria-hidden="true" />
+              </div>
+              <div>
+                <a href="/Services/UCaaS" class="font-semibold text-gray-900">
+                  Unified Communications
+                  <span class="absolute inset-0" />
+                </a>
+                <p class="mt-1 text-gray-600">Soluzioni personalizzate di comunicazione unificata e collaborazione</p>
+              </div>
+            </div>
+          </div>
+          <div class="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
+            <a href="callto:+3904611819049" class="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100">
+              <component :is="PhoneIcon" class="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
+              Chiamaci!
+            </a>
+            <a href="mailto:[email protected]" class="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100">
+              <component :is="EnvelopeOpenIcon" class="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
+              Scrivici!
+            </a>
+          </div>
+        </div>
+      </PopoverPanel>
+    </transition>
+  </Popover>
+</template>
+
+<script setup>
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { EnvelopeOpenIcon, PhoneIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/20/solid'
+import { ChatBubbleLeftRightIcon, ServerStackIcon, CommandLineIcon } from '@heroicons/vue/24/outline'
+
+let showPopover = false
+</script>
diff --git a/components/templates/HBHeader.vue b/components/templates/HBHeader.vue
@@ -36,13 +36,23 @@
                 @click="showMenu = !showMenu">{{ $t('home') }}
             </nuxt-link>
           </li>
+          <PopOver/>
           <li>
             <nuxt-link
                 class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0"
                 href="/contacts"
                 @click="showMenu = !showMenu">{{ $t('contacts') }}
             </nuxt-link>
           </li>
+          <!-- To be coded, sorry guys
+          <li>
+            <nuxt-link
+                class="block py-1 pr-2 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0"
+                href="/AboutUs"
+                @click="showMenu = !showMenu">{{ $t('people') }}
+            </nuxt-link>
+          </li>
+          -->
           <li>
             <nuxt-link
                 class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0"
@@ -58,9 +68,10 @@
 <script>
 
 import LanguageButton from "~/components/buttons/LanguageButton.vue";
+import PopOver from "~/components/snippets/PopOver.vue";
 
 export default {
-  components: {LanguageButton},
+  components: {PopOver, LanguageButton},
   data() {
     return {
       showMenu: false

diff --git a/locales/de.json b/locales/de.json
@@ -4,6 +4,8 @@
   "contacts": "Kontakt",
   "home": "Startseite",
   "privacypolicy": "Datenschutz",
+  "people": "Über uns",
+  "services": "Dienstleistungen",
   "omm": "Öffne das Menü",
   "foot1": "Via Monte Cristallo 35, Pergine Valsugana (TN), Italy",
   "foot2": "MwSt.-Nummer: IT02697330229 - REA: TN-243469",
@@ -65,7 +67,7 @@
   "main2": "für Ihr Unternehmen",
   "main3": "Unser Ziel ist es, kleinen und mittleren Unternehmen zu helfen, die digitale Kluft durch maßgeschneiderte und innovative IT-Lösungen zu überbrücken.",
   "main4": "Wir bieten IT-Beratungsdienstleistungen, Hybrid Cloud (IaaS) und maßgeschneiderte IT-Lösungen für Ihre Geschäftsanforderungen.",
-  "main5": "Senden Sie uns eine E-Mail! →",
+  "main5": "Kontaktieren Sie uns mit Kite →",
   "main6": "Hier sind einige der Dienstleistungen, die wir unseren Kunden anbieten:",
   "main7": "IT-Beratung",
   "main8": "Persönliche Beratung bei der Auswahl der richtigen IT-Lösungen für Ihr Unternehmen.",

diff --git a/locales/en.json b/locales/en.json
@@ -4,6 +4,8 @@
   "contacts": "Contacts",
   "home": "Home",
   "privacypolicy": "Privacy Policy",
+  "people": "About Us",
+  "services": "Services",
   "omm": "Open main menu",
   "foot1": "Via Monte Cristallo 35, Pergine Valsugana (TN), Italy",
   "foot2": "VAT Number: IT02697330229 - REA: TN-243469",
@@ -65,7 +67,7 @@
   "main2": "for your business.",
   "main3": "Our goal is to help small and medium-sized businesses bridge the digital divide through customized and innovative IT solutions.",
   "main4": "We offer IT Consulting services, Hybrid Cloud (IaaS) and IT solutions customized to your business needs.",
-  "main5": "Send us an email! →",
+  "main5": "Contact us with Kite →",
   "main6": "Here are some of the services we offer to our clients:",
   "main7": "IT consulting.",
   "main8": "Personalized consulting to help you choose the right IT solutions for your business.",

diff --git a/locales/it.json b/locales/it.json
@@ -4,6 +4,8 @@
   "contacts": "Contatti",
   "home": "Home",
   "privacypolicy": "Privacy Policy",
+  "people": "Chi Siamo",
+  "services": "Servizi",
   "omm": "Apri il menu",
   "foot1": "Via Monte Cristallo 35, Pergine Valsugana (TN), Italy",
   "foot2": "P.Iva: IT02697330229 - REA: TN-243469",
@@ -65,7 +67,7 @@
   "main2": "per il tuo business",
   "main3": "Il nostro obiettivo è di aiutare le piccole e medie imprese a colmare il divario digitale attraverso soluzioni informatiche personalizzate e innovative.",
   "main4": "Offriamo servizi di Consulenza IT, Hybrid Cloud (IaaS) e soluzioni informatiche personalizzate per le esigenze del tuo business.",
-  "main5": "Inviaci una mail! →",
+  "main5": "Contattaci con Kite →",
   "main6": "Ecco alcuni dei servizi che offriamo ai nostri clienti:",
   "main7": "Consulenza IT",
   "main8": "Consulenza personalizzata per aiutarti a scegliere le soluzioni IT giuste per il tuo business.",

diff --git a/package.json b/package.json
@@ -17,8 +17,10 @@
     "vue-i18n": "^9.8.0"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.16",
     "@heroicons/vue": "^2.0.18",
     "@nuxt/image": "^1.1.0",
-    "@nuxtjs/plausible": "^0.2.3"
+    "@nuxtjs/plausible": "^0.2.3",
+    "axios": "^1.6.2"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -18,7 +18,7 @@
             </p>
           </div>
           <div class="text-center mt-8">
-            <UButton size="xl" to="mailto:[email protected]" target="_blank">{{ $t('main5') }}</UButton>
+            <UButton size="xl" to="https://kite.wildix.com/hyperbit-srls/100" target="_blank">{{ $t('main5') }}</UButton>
           </div>
           <div>
             <div class="bg-white">