about page

app.vue

@@ -16,9 +16,12 @@ type ApiKpType = {
 type ApiPagesType = {
   id: number
   title: string
+  slug: string
   content: string
 }
 
+import '@/assets/main.scss'
+
 const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
 useSeoMeta({
   title: seoData.value?.title,
@@ -29,8 +32,8 @@ useSeoMeta({
   // twitterCard: 'summary_large_image',
 })
 
-const { data: pagesData } = await useFetch<ApiPagesType>(`${apiBase}/pages/`)
-import '@/assets/main.scss'
+const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/`)
+const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
 </script>
 <template>
   <div>
@@ -48,6 +51,19 @@ import '@/assets/main.scss'
         </div>
       </div>
     </div>
+    <div class="block bg-white">
+      <div class="container">
+        <div class="block-content">
+          <h2 class="block-title">{{ about?.title }}</h2>
+          <div class="block-text">
+            {{ about?.content }}
+          </div>
+        </div>
+        <div class="block-image">
+
+        </div>
+      </div>
+    </div>
     <NuxtPage />
   </div>
 </template>

assets/main.scss

@@ -9,7 +9,7 @@ body {
 }
 
 .container {
-    @apply max-w-7xl mx-auto grid grid-cols-12
+    @apply max-w-7xl mx-auto grid grid-cols-12 items-center
 }
 
 .header {
@@ -25,5 +25,19 @@ body {
 }
 
 a[href^="/#"] {
-    @apply underline decoration-dotted underline-offset-2 decoration-neutral-500
+    @apply underline decoration-dotted underline-offset-4 decoration-neutral-500
+}
+
+.block {
+    @apply py-10;
+    &-content {
+        @apply col-span-6
+    }
+    &-title {
+        @apply text-5xl text-black
+    }
+    &-image {
+        @apply col-span-6 bg-slate-400;
+        min-height: 50vh;
+    }
 }