#86 - Missing contact section in footer

resources/js/components/Common/Footer.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from '@heroicons/vue/24/outline'
+import ModalWindow from '@/components/Common/ModalWindow.vue'
+
+const isContactVisible = ref(false)
+</script>
+
 <template>
   <footer class="bg-white/50 shadow w-full mt-auto">
     <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
@@ -8,22 +16,89 @@
       <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 sm:mt-0">
         <li>
           <a
-            href="#"
+            href="/terms_and_conditions.pdf"
+            target="_blank"
             class="hover:underline me-4 md:me-6"
           >
             Polityka prywatności
           </a>
         </li>
 
         <li>
-          <a
-            href="#"
-            class="hover:underline"
+          <p
+            class="hover:underline cursor-pointer"
+            @click="isContactVisible = true"
           >
             Kontakt
-          </a>
+          </p>
         </li>
       </ul>
     </div>
   </footer>
+
+  <ModalWindow
+    v-model="isContactVisible"
+    title="Kontakt"
+  >
+    <dl class="mt-2 space-y-4 text-base/7 text-gray-600">
+      <div class="flex gap-x-4">
+        <dt class="flex-none">
+          <span class="sr-only">
+            Adres
+          </span>
+
+          <BuildingOffice2Icon
+            class="h-7 w-6 text-black"
+            aria-hidden="true"
+          />
+        </dt>
+
+        <dd>ul. Sejmowa 5A, 59-220 Legnica</dd>
+      </div>
+
+      <div class="flex gap-x-4">
+        <dt class="flex-none">
+          <span class="sr-only">
+            Telefon
+          </span>
+
+          <PhoneIcon
+            class="h-7 w-6 text-black"
+            aria-hidden="true"
+          />
+        </dt>
+
+        <dd>
+          <a
+            class="hover:text-primary"
+            href="tel:76-723-21-50"
+          >
+            76-723-21-50
+          </a>
+        </dd>
+      </div>
+
+      <div class="flex gap-x-4">
+        <dt class="flex-none">
+          <span class="sr-only">
+            Email
+          </span>
+
+          <EnvelopeIcon
+            class="h-7 w-6 text-black"
+            aria-hidden="true"
+          />
+        </dt>
+
+        <dd>
+          <a
+            class="hover:text-primary"
+            href="mailto:[email protected]"
+          >
+            [email protected]
+          </a>
+        </dd>
+      </div>
+    </dl>
+  </ModalWindow>
 </template>

resources/js/components/Home/InformationModalWindow.vue → resources/js/components/Common/ModalWindow.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-const props = defineProps<{ isVisible: boolean }>()
-const emit = defineEmits<(e: 'update:isVisible', value: boolean) => void>()
-
-function setHidden() {
-  emit('update:isVisible', false)
-}
+defineProps<{ title: string }>()
+const isVisible = defineModel<boolean>()
 </script>
 
 <template>
   <Transition>
-    <div 
-      v-show="props.isVisible"
+    <div
+      v-show="isVisible"
       class="inset-0 h-screen w-full bg-black/15 backdrop-blur-md fixed z-20 p-5 flex justify-center items-center"
       @click="setHidden"
     >
@@ -22,7 +18,7 @@ function setHidden() {
           class="p-5 font-bold text-xl outline-none focus:shadow-md duration-200"
           tabindex="0"
         >
-          Title
+          {{ title }}
         </h1>
 
         <hr>
@@ -31,17 +27,15 @@ function setHidden() {
           class="p-5 text-[1.1rem] outline-none focus:shadow-md duration-200"
           tabindex="0"
         >
-          Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          Esse corrupti provident voluptas ducimus neque libero reprehenderit eos voluptate quisquam minus.
-          Dolorum quos animi fugit blanditiis repellendus voluptas sequi ex ea.
+          <slot />
         </p>
 
         <hr>
 
         <div class="flex justify-end p-5">
           <button
             class="font-bold text-primary"
-            @click="setHidden"
+            @click="isVisible = false"
           >
             Powrót
           </button>

resources/js/components/Home/InformationButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import InformationModalWindow from '@/components/Home/InformationModalWindow.vue'
 import { ref } from 'vue'
+import ModalWindow from '@/components/Common/ModalWindow.vue'
 
 const isInformationVisible = ref(false)
 </script>
@@ -15,5 +15,12 @@ const isInformationVisible = ref(false)
     </button>
   </div>
 
-  <InformationModalWindow v-model:is-visible="isInformationVisible" />
+  <ModalWindow
+    v-model="isInformationVisible"
+    title="Informacje o konkursie"
+  >
+    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+    Esse corrupti provident voluptas ducimus neque libero reprehenderit eos voluptate quisquam minus.
+    Dolorum quos animi fugit blanditiis repellendus voluptas sequi ex ea.
+  </ModalWindow>
 </template>