General improvments:

-Add title for each page.
-Put images in assets folder.
-Edit text fields.
-Set letter spacing zero.

components/Footer.vue

@@ -5,13 +5,13 @@
             <v-row>
                 <v-col sm="6" cols="12"
                     :align="$vuetify.display.mobile ? 'center' : $vuetify.locale.isRtl ? 'right' : 'left'">
-                    <img src="./../styles/pics/logo.png" />
+                    <img src="~/assets/images/logo.png" />
                 </v-col>
                 <v-col sm="6" cols="12"
                     :align="$vuetify.display.mobile ? 'center' : $vuetify.locale.isRtl ? 'left' : 'right'">
-                    <v-btn variant="text">مستندات</v-btn>
-                    <v-btn variant="text">گالری</v-btn>
-                    <v-btn variant="text">تماس با ما</v-btn>
+                    <v-btn to="/docs" variant="text">مستندات</v-btn>
+                    <v-btn to="/gallery" variant="text">گالری</v-btn>
+                    <v-btn to="/contact" variant="text">تماس با ما</v-btn>
                 </v-col>
             </v-row>
             <v-divider class="my-5"></v-divider>

pages/contact.vue

@@ -28,11 +28,22 @@
                 </div>
             </v-col>
             <v-col md="6" cols="12">
-                <v-img class="mx-auto" src="./../styles/pics/contactus.svg" height="300px"></v-img>
+                <v-img class="mx-auto" src="~/assets/images/contactus.svg" height="300px"></v-img>
             </v-col>
         </v-row>
     </v-container>
 </template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    setup(){
+        useHead({
+            title:'وب شات | تماس با ما'
+        })
+    }
+})
+</script>
 <style lang="scss">
 .contact {
     margin-top: 30px;

pages/docs.vue

@@ -7,7 +7,7 @@
                 در
                 زیر
                 لیستی کامل از گزینه ها را مشاهده می کنید:</div>
-            <v-text-field variant="outlined" class="mt-5" dir="ltr"></v-text-field>
+            <v-text-field outlined class="mt-5" dir="ltr"></v-text-field>
             <v-btn color="primary">مشاهده ی تصویر وب سایت</v-btn>
 
             <div class="docs-title2">لیست کامل گزینه های اصلاح کننده تصویر</div>
@@ -32,7 +32,11 @@ interface IData {
 }
 
 export default defineComponent({
-
+    setup(){
+        useHead({
+            title: 'وب شات | مستندات'
+        })
+    },
     data() {
         return {
             headers: [

pages/gallery.vue

@@ -10,6 +10,16 @@
         </div>
     </v-container>
 </template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+    setup(){
+        useHead({
+            title: 'وب شات | گالری'
+        })
+    }
+})
+</script>
 <style lang="scss">
 .gallery {
     text-align: center;

pages/index.vue

@@ -6,7 +6,7 @@
 			<v-col lg="5" md="8" sm="10" cols="11">
 				<v-text-field variant="outlined" dir="ltr" class="px-0">
 					<template v-slot:append-inner>
-						<v-btn color="primary" height="100%" class="font-weight-bold">مشاهده تصویر</v-btn>
+						<v-btn color="primary" height="100%" elevation="0" class="font-weight-bold">مشاهده تصویر</v-btn>
 					</template>
 				</v-text-field>
 			</v-col>
@@ -31,8 +31,8 @@
 			<div class="content">گزینه های پیشرفته تر نیز وجود دارد، شما می توانید با تعیین عرض مشخصه تصویر را تغییر
 				دهید و
 				شما می توانید تعداد پیکسل های وب سایت اصلی که می خواهید برش دهید تعیین کنید. مثلا:</div>
-			<div class="code-background" dir="ltr">{{ `<img
-					src="${getCaptureURL({width: '100', crop: '600'})}">` }}</div>
+			<div class="code-background" dir="ltr">{{ `<img src="${getCaptureURL({ width: '100', crop: '600' })}">` }}
+			</div>
 			<div class="content">گرفتن عکسهای صفحه وب از یک مرورگر پیکسل 1200x1200 گرفته شده است. کد بالا، صفحه نمایش
 				اصلی
 				را به 100 پیکسل عرض می برد و سپس 600 پیکسل از تصویر را می برد.</div>
@@ -42,9 +42,16 @@
 </template>
 <script lang="ts">
 
-export default defineComponent({ 
+export default defineComponent({
+	setup(){
+		useHead({
+			title:'وب شات'
+		})
+	},
 	data() {
-		return {url: ""};
+		return {
+			url: "",
+		 };
 	},
 	methods: {
 		getCaptureURL(query?: Record<string, string>) {
@@ -53,7 +60,7 @@ export default defineComponent({
 			const location = useRequestURL();
 			return new URL((location.protocol || "http:") + "//" + location.host + "/capture?" + params);
 		}
-	}
+	},
 })
 </script>
 <style lang="scss">
@@ -68,9 +75,10 @@ export default defineComponent({
 		.v-field--appended {
 			padding-inline-end: 0px;
 		}
+
 	}
-}
 
+}
 .home-content {
 
 	.title-of-content {
@@ -82,7 +90,8 @@ export default defineComponent({
 	}
 
 	.content {
-		color: rgb(var(--v-theme-contentGray));;
+		color: rgb(var(--v-theme-contentGray));
+		;
 		margin-bottom: 25px;
 	}
 
@@ -104,6 +113,7 @@ export default defineComponent({
 	--v-input-control-height: 0px;
 	--v-field-padding-start: 20px;
 }
+
 .v-input.v-textarea>.v-input__control>.v-input__slot:before {
 	border: none;
 }

styles/main.scss

@@ -1,20 +1,10 @@
-
 @use 'vuetify' with (
 	$body-font-family: "Vazirmatn",
-				$typography: (
-					'h1': ('letter-spacing': 0),
-					'h2': ('letter-spacing': 0),
-					'h3': ('letter-spacing': 0),
-					'h4': ('letter-spacing': 0),
-					'h5': ('letter-spacing': 0),
-					'h6': ('letter-spacing': 0),
-					'subtitle-1': ('letter-spacing': 0),
-					'subtitle-2': ('letter-spacing': 0),
-					'body-1': ('letter-spacing': 0),
-					'body-2': ('letter-spacing': 0),
-					'button': ('letter-spacing': 0),
-					),
-					$line-height-root: 2,
+	$line-height-root: 2,
 );
 
 @import "vazirmatn/Vazirmatn-font-face.css";
+
+* {
+	letter-spacing: 0;
+}