Contacts

app.vue

@@ -11,6 +11,7 @@ useSeoMeta({
       <about-company></about-company>
       <services></services>
       <clients></clients>
+      <contacts></contacts>
       <map-view></map-view>
     </main>
     <k-footer></k-footer>

components/contacts.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import PureCitySvg from "~/assets/pure-city.svg";
+</script>
+
+<template>
+  <section class="py-16 bg-slate-100">
+    <h2 class="text-4xl font-semibold col-w mx-auto mb-8 px-4 md:px-16 flex items-center gap-8">
+      <img :src="PureCitySvg" class="h-16" alt="">
+      Контакты
+    </h2>
+
+    <div class="grid gap-8 grid-flow-row sm:grid-flow-col col-w mx-auto px-4 md:px-16">
+      <div class="flex gap-2">
+        <Icon name="bi:geo-alt" class="opacity-50 mt-1 shrink-0"></Icon>
+        197372, г.&nbsp;Санкт-Петербург, ул.&nbsp;Ильюшина, д.1, кор.1, литер&nbsp;А, пом.4-Н
+      </div>
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-2">
+          <Icon name="bi:telephone" class="opacity-50"></Icon>
+          <a href="tel:(812) 342-90-29" class="link">(812) 342-90-29</a>
+        </div>
+        <div class="flex flex-col">
+          <div class="text-sm">Отдел продаж:</div>
+          <div class="flex items-center gap-2">
+            <Icon name="bi:envelope" class="opacity-50"></Icon>
+            <a href="mailto:pure-city@inbox.ru" class="link">pure-city@inbox.ru</a>
+          </div>
+        </div>
+        <div class="flex flex-col">
+          <div class="text-sm">Бухгалтерия:</div>
+          <div class="flex items-center gap-2">
+            <Icon name="bi:envelope" class="opacity-50"></Icon>
+            <a href="mailto:pure-city@yandex.ru" class="link">pure-city@yandex.ru</a>
+          </div>
+        </div>
+      </div>
+      <div class="text-slate-500 flex flex-col">
+        <div>ИНН 7814311311</div>
+        <div>КПП 781401001</div>
+        <div>ОГРН 1047855173255</div>
+      </div>
+    </div>
+</section>
+</template>
+
+<style scoped lang="postcss">
+
+</style>

components/k-footer.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-<footer class="bg-white">
+<footer class="bg-white border-t">
   <div class="col-w mx-auto px-4 md:px-16 py-4">
     <div class="text-center text-sm">
       Разработано в <a href="https://kopyl.dev" target="_blank" class="link">kopyl.dev</a>

components/map-view.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
 <iframe
   class="h-96 w-full"
@@ -9,7 +5,3 @@
   src="https://yandex.ru/map-widget/v1/-/CDH7FS3m"
 ></iframe>
 </template>
-
-<style scoped lang="postcss">
-
-</style>