alsaze/Rental
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init
All checks were successful
Deploy / build (push) Successful in 46s
Details

Browse Source
This commit is contained in:
alsaze 2025-11-27 18:56:54 +03:00
parent 5f250b8b6c
commit 963a98cb3b
3 changed files with 150 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
components/Contacts.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<UPageSection
id="contacts"
:ui="{ container: '!p-0' }"
>
<template #body>
<div class="contacts">
<div class="contacts__info">
<div class="text-sm text-gray-400">
Свяжитесь с нами
</div>
<div class="text-2xl font-semibold">
Начните работу с Rental
</div>
<div class="text-base text-gray-300 mt-2">
Оставьте заявку, и наш менеджер свяжется с вами в течение 15 минут<br>
для обсуждения ваших потребностей.
</div>
<div class="flex flex-col gap-4 mt-4">
<div
v-for="contact in contacts"
:key="contact.label"
class="flex items-center gap-4"
>
<div class="bg-gray-800 p-3 rounded-lg">
<UIcon :name="contact.icon" />
</div>
<div>
<div class="text-sm text-gray-400">
{{ contact.label }}
</div>
<div class="text-base">
{{ contact.value }}
</div>
</div>
</div>
</div>
</div>
<UCard variant="subtle" class="w-full" :ui="{ root: 'max-w-[500px]' }">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
Как к вам обращаться
<UInput
placeholder="Имя"
size="xl"
class="w-full"
/>
</div>
<div class="flex flex-col gap-2">
Телефон
<UInput
v-maska="'+7 (###) ###-##-##'"
placeholder="+7 (___) __-__-__"
size="xl"
class="w-full"
/>
</div>
<div class="flex flex-col gap-2">
Что вас интересует?
<div>
<USelect
:items="services"
class="w-full"
size="xl"
placeholder="выберите услугу"
/>
</div>
</div>
<div class="flex flex-col gap-2">
Комментарий
<UTextarea
size="xl"
placeholder="расскажите о ваших требованиях.."
/>
</div>
<div>
<UButton
size="xl"
class="flex place-content-center w-full"
label="Отправить заявку"
/>
</div>
</div>
</UCard>
</div>
</template>
</UPageSection>
</template>
<script setup>
const contacts = [
{
label: 'Телефон',
value: '+7 (495) 123-45-67',
icon: 'i-lucide:phone',
},
{
label: 'Email',
value: 'info@rental-concierge.com',
icon: 'i-lucide:mail',
},
{
label: 'Адрес',
value: 'Москва, Тверская улица, 1',
icon: 'i-lucide:map-pin',
},
]
const services = [
'покупка авто',
'продажа авто',
'аренда авто',
'покупка недвижимости',
'продажа недвижимости',
'аренда недвижимости',
]
</script>
<style lang="scss">
.contacts {
display: flex;
flex-direction: row;
justify-content: space-between;
@include mobile {
flex-direction: column;
gap: 60px;
}
&__info {
display: flex;
flex-direction: column;
gap: 6px;
}
}
</style>

2
layouts/default.vue
View File

@ -20,7 +20,7 @@
</div>
<div class="ml-auto">
<UButton href="#benefits" :size="isMobile ? 'md' : 'xl'" label="Связаться" />
<UButton href="#contacts" :size="isMobile ? 'md' : 'xl'" label="Связаться" />
</div>
</template>
</UHeader>

5
pages/index.vue
View File

@ -24,18 +24,19 @@
</template>
</UPageHero>
<UContainer class="flex flex-col gap-32 my-32">
<UContainer class="flex flex-col gap-32 mt-32">
<Services />
<Benefits />
<HowWorks />
<Contacts />
</UContainer>
</div>
</template>
<script setup lang="ts">
import Services from '~/components/Services.vue'
</script>
<style lang="scss">