init

layouts/cart.vue

@@ -5,7 +5,7 @@
       :toggle="false"
       :ui="{
         root: 'fixed bg-transparent w-full',
-        left: 'relative flex items-center w-full',
+        left: 'relative flex items-center w-full justify-between',
         container: 'gap-0',
         right: 'hidden',
       }"
@@ -16,6 +16,16 @@
         <NuxtLink to="/" class="absolute left-1/2 transform -translate-x-1/2 text-lg">
           Rental
         </NuxtLink>
+
+        <transition name="fade">
+          <UButton
+            v-if="showContactBar && !isMobile"
+            class="justify-center"
+            href="#contacts"
+            size="xl"
+            label="Свяжитесь с нами"
+          />
+        </transition>
       </template>
     </UHeader>
 
@@ -23,22 +33,21 @@
       <slot />
     </UMain>
 
-    <UFooter class="footer">
-      <div class="flex flex-col md:flex-row items-center text-sm opacity-70">
-        <div>
-          © {{ new Date().getFullYear() }} Rental. Все права защищены.
-        </div>
-      </div>
-    </UFooter>
+    <BaseFooter v-if="!isMobile" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import BaseFooter from '~/components/BaseFooter.vue'
+
 const router = useRouter()
 const route = useRoute()
+const isMobile = useMediaQuery('(max-width: 1280px)')
 
 const { cartById } = useMock()
 const cart = cartById(route?.params?.id)
+const showContactBar = useState('showContactBar', () => false)
 
 function routerBack() {
   const newRoute = `/${cart?.category}#variations`
@@ -47,6 +56,15 @@ function routerBack() {
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .footer {
   @include mobile {
     display: none;

layouts/default.vue

@@ -31,60 +31,14 @@
       <slot />
     </UMain>
 
-    <UFooter class="border-t border-gray-200 mt-10">
-      <div class="w-full max-w-7xl mx-auto py-10 px-4 grid grid-cols-1 md:grid-cols-3 gap-10 text-sm">
-        <div id="footer-contacts">
-          <h3 class="font-semibold text-base mb-3">
-            Контакты
-          </h3>
-          <ul class="space-y-2 opacity-80">
-            <li>
-              <span class="font-medium">Телефон:</span><br>
-              <a href="tel:+74951234567" class="hover:opacity-100 opacity-70">
-                +7 (495) 123-45-67
-              </a>
-            </li>
-            <li>
-              <span class="font-medium">Email:</span><br>
-              <a href="mailto:info@rental-concierge.com" class="hover:opacity-100 opacity-70">
-                info@rental-concierge.com
-              </a>
-            </li>
-            <li>
-              <span class="font-medium">Адрес:</span><br>
-              Москва, Тверская улица, 1
-            </li>
-          </ul>
-        </div>
-
-        <div>
-          <h3 class="font-semibold text-base mb-3">
-            Навигация
-          </h3>
-          <ul class="space-y-2 opacity-80">
-            <li><a href="/" class="hover:opacity-100 opacity-70">Главная</a></li>
-            <li><a href="/nedvizhimost" class="hover:opacity-100 opacity-70">Недвижимость</a></li>
-            <li><a href="/transport" class="hover:opacity-100 opacity-70">Авто</a></li>
-          </ul>
-        </div>
-
-        <div class="md:text-right opacity-70 flex flex-col justify-between">
-          <div class="text-lg font-bold">
-            Rental
-          </div>
-          <div class="mt-4 md:mt-0">
-            © {{ new Date().getFullYear() }} Rental.
-            Все права защищены.
-          </div>
-        </div>
-      </div>
-    </UFooter>
+    <BaseFooter />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { TabsItem } from '@nuxt/ui'
 import { useMediaQuery } from '@vueuse/core'
+import BaseFooter from '~/components/BaseFooter.vue'
 
 const isMobile = useMediaQuery('(max-width: 1280px)')