add calc component file

app.vue

@@ -60,42 +60,10 @@ const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'deli
 
 const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`)
 
-const isModalOpen = ref<boolean>(false)
+const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
-  modal_phone.value = ''
   isModalOpen.value = !isModalOpen.value
 }
-const modal_phone = ref()
-const model_form = reactive({
-  disabled: true,
-  errors: [],
-})
-
-const validateInput = (evt: KeyboardEvent) => {
-  const valid_symbols = /[a-zA-Z0-9\+(\\)\ @\.]/
-  if (!valid_symbols.test(evt.key)) {
-    evt.preventDefault()
-    return
-  }
-}
-const validate = () => {
-  const phone_regexp = /\(?\+[0-9]{1,3}\)? ?-?[0-9]{1,3} ?-?[0-9]{3,5} ?-?[0-9]{4}( ?-?[0-9]{3})? ?(\w{1,10}\s?\d{1,6})?/
-  const email_regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
-
-  if (modal_phone.value.length < 3) {
-    model_form.disabled = true
-    return
-  }
-  if (phone_regexp.test(modal_phone.value) || email_regex.test(modal_phone.value)) {
-    model_form.disabled = false
-    return
-  }
-}
-const submit = (e: any) => {
-  console.log(e)
-  modal_phone.value = ''
-  isModalOpen.value = false
-}
 </script>
 <template>
   <div>
@@ -154,6 +122,9 @@ const submit = (e: any) => {
       :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
       <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
     </div>
+    <div class="block block_imgbg bg-white">
+      <Calculator />
+    </div>
     <div class="footer">
       <div class="container">
         <div class="k-logo">
@@ -164,17 +135,6 @@ const submit = (e: any) => {
         </template>
       </div>
     </div>
-    <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
+    <Modal />
-      <div class="modal">
-        <h2>Оставьте номер телефона для связи</h2>
-        <form @submit.prevent="submit">
-          <input type="phone" v-model="modal_phone" @keypress="validateInput" @keyup="validate" />
-          <div class="flex gap-4">
-            <button class="not-prose" :disabled="model_form.disabled" type="submit">Отправить</button>
-            <button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
-          </div>
-        </form>
-      </div>
-    </div>
   </div>
 </template>

assets/main.scss

@@ -24,7 +24,7 @@ body {
     @apply col-span-8 flex justify-between;
 }
 
-a[href^="/#"]:not([class*="btn"]) {
+a[href^="#"] {
     @apply underline decoration-dotted underline-offset-4 decoration-neutral-500;
 }
 

components/calculator.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="container">
+        calc
+    </div>
+</template>

components/modal.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const isModalOpen = useState('modal_open', () => false)
+const toggleModal = () => {
+    modal_phone.value = ''
+    isModalOpen.value = !isModalOpen.value
+}
+const modal_phone = ref()
+const model_form = reactive({
+    disabled: true,
+    errors: [],
+})
+
+const validateInput = (evt: KeyboardEvent) => {
+    const valid_symbols = /[a-zA-Z0-9\+(\\)\ @\.]/
+    if (!valid_symbols.test(evt.key)) {
+        evt.preventDefault()
+        return
+    }
+}
+const validate = () => {
+    const phone_regexp = /\(?\+[0-9]{1,3}\)? ?-?[0-9]{1,3} ?-?[0-9]{3,5} ?-?[0-9]{4}( ?-?[0-9]{3})? ?(\w{1,10}\s?\d{1,6})?/
+    const email_regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
+
+    if (modal_phone.value.length < 3) {
+        model_form.disabled = true
+        return
+    }
+    if (phone_regexp.test(modal_phone.value) || email_regex.test(modal_phone.value)) {
+        model_form.disabled = false
+        return
+    }
+}
+const submit = (e: any) => {
+    console.log(e)
+    modal_phone.value = ''
+    isModalOpen.value = false
+}
+</script>
+<template>
+    <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
+        <div class="modal">
+            <h2>Оставьте номер телефона для связи</h2>
+            <form @submit.prevent="submit">
+                <input type="phone" v-model="modal_phone" @keypress="validateInput" @keyup="validate" />
+                <div class="flex gap-4">
+                    <button class="not-prose" :disabled="model_form.disabled" type="submit">Отправить</button>
+                    <button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>