83 lines
4.2 KiB
Vue
83 lines
4.2 KiB
Vue
<script setup lang="ts">
|
||
const props = withDefaults(defineProps<{
|
||
managerStage?: boolean
|
||
}>(), {
|
||
managerStage: false,
|
||
})
|
||
const { toLocalized } = useLocalizedNavigation()
|
||
|
||
const footerLinks = [
|
||
{ label: 'Главная', to: '/' },
|
||
{ label: 'Заказы', to: '/clientarea/orders' },
|
||
{ label: 'Кабинет', to: '/clientarea/profile' },
|
||
]
|
||
|
||
const socialLinks = [
|
||
{ label: 'Instagram', href: 'https://instagram.com', icon: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 16a4 4 0 110-8 4 4 0 010 8z' },
|
||
{ label: 'YouTube', href: 'https://youtube.com', icon: 'M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' },
|
||
{ label: 'Telegram', href: 'https://t.me', icon: 'M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0z' },
|
||
]
|
||
|
||
const currentYear = new Date().getFullYear()
|
||
</script>
|
||
|
||
<template>
|
||
<footer
|
||
class="-mt-px overflow-hidden border-t-0 text-white"
|
||
:class="props.managerStage ? 'bg-transparent' : 'bg-[#10223b] [background-image:radial-gradient(circle_at_82%_18%,rgba(244,89,69,0.45),rgba(244,89,69,0)_34%),linear-gradient(130deg,#10223b_0%,#193450_100%)]'"
|
||
>
|
||
<div
|
||
class="mx-auto max-w-[1280px] px-3 pb-10 md:px-4 md:pb-12"
|
||
:class="props.managerStage ? 'pt-0 md:pt-0' : 'pt-5 md:pt-6'"
|
||
>
|
||
<div
|
||
class="grid gap-4 rounded-[26px] border p-5 md:p-6"
|
||
:class="props.managerStage
|
||
? 'border-white/12 bg-white/4 [backdrop-filter:blur(10px)]'
|
||
: 'border-white/20 bg-[rgba(11,24,42,0.26)] [backdrop-filter:blur(6px)]'"
|
||
>
|
||
<div>
|
||
<h2 class="m-0 text-[clamp(1.6rem,3.4vw,2.6rem)] font-black leading-[1.08]">Готовы к следующей поставке?</h2>
|
||
<p class="mt-3 max-w-[720px] leading-6 text-white/85">
|
||
Получайте предложения в реальном времени, сравнивайте условия и запускайте закупку прямо в Optovia.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap gap-2.5">
|
||
<a href="tel:+74957402842" class="inline-flex items-center rounded-full border border-white/25 bg-white/10 px-3.5 py-2 text-[0.92rem] font-bold text-white transition-colors hover:bg-white/20">+7 (495) 740-28-42</a>
|
||
<a href="mailto:sales@optovia.ru" class="inline-flex items-center rounded-full border border-white/25 bg-white/10 px-3.5 py-2 text-[0.92rem] font-bold text-white transition-colors hover:bg-white/20">sales@optovia.ru</a>
|
||
</div>
|
||
|
||
<nav class="flex flex-wrap gap-2" aria-label="Footer navigation">
|
||
<NuxtLink
|
||
v-for="link in footerLinks"
|
||
:key="link.to"
|
||
:to="toLocalized(link.to)"
|
||
class="rounded-full border border-white/25 px-3 py-2 text-[0.88rem] text-white/90 transition-colors hover:bg-white/15 hover:text-white"
|
||
>
|
||
{{ link.label }}
|
||
</NuxtLink>
|
||
</nav>
|
||
|
||
<div class="flex items-center gap-2.5" aria-label="Social networks">
|
||
<a
|
||
v-for="s in socialLinks"
|
||
:key="s.label"
|
||
:href="s.href"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
:aria-label="s.label"
|
||
class="inline-flex h-[2.2rem] w-[2.2rem] items-center justify-center rounded-full border border-white/30 bg-white/10 text-white/95 transition-colors hover:bg-white/20"
|
||
>
|
||
<svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path :d="s.icon" /></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 px-1 text-[0.78rem] text-white/70">
|
||
<p>© {{ currentYear }} Optovia. Все права защищены.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</template>
|