1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142<script setup lang="ts">
import { useAppData } from '@/stores/mockup'
import { useDisplay } from 'vuetify'
const { mdAndUp } = useDisplay()
const appData = useAppData()
const name = ref('')
const email = ref('')
const website = ref('')
const subject = ref('')
const message = ref('')
</script>
<template>
<Section
id="get-in-touch"
class="bg-surface-light"
space="20"
>
<v-container fluid>
<v-row align="start">
<v-col
class="px-12"
cols="3"
sm="6"
>
<Subheading
align="left"
class="font-weight-black primary--text"
title="GET IN TOUCH"
/>
<Body
align="left"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquet mauris non venenatis auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per."
/>
<Subheading
align="left"
class="primary--text"
title="Contact Information"
/>
<Subtitle
title="Company"
weight="bold"
/>
<Body
space="2"
text="Company Name A"
/>
<Subtitle
title="Email"
weight="bold"
/>
<Body
:text="appData.contact.email.value"
space="2"
/>
<Subtitle
title="Phone"
weight="bold"
/>
<Body
:text="appData.contact.phone.value"
space="2"
/>
</v-col>
<v-col
cols="9"
sm="6"
>
<v-row no-gutters>
<v-col
cols="12"
md="6"
>
<TextField
v-model="name"
:class="mdAndUp ? 'mr-1' : ''"
label="Name"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<TextField
v-model="email"
:class="mdAndUp ? 'ml-1' : ''"
label="Email"
/>
</v-col>
</v-row>
<v-row no-gutters>
<v-col
cols="12"
md="6"
>
<TextField
v-model="website"
:class="mdAndUp ? 'mr-1' : ''"
label="Website"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<TextField
v-model="subject"
:class="mdAndUp ? 'ml-1' : ''"
label="Subject"
/>
</v-col>
</v-row>
<v-row no-gutters>
<v-textarea
v-model="message"
label="Message"
outlined
/>
</v-row>
<v-row no-gutters>
<Btn
class="px-12"
color="primary"
depressed
>
<span
class="font-weight-bold"
v-text="'Submit Message'"
/>
</Btn>
</v-row>
</v-col>
</v-row>
</v-container>
</Section>
</template>
<style lang="scss" scoped>
</style>