reviews

app.vue

@@ -20,6 +20,13 @@ type ApiPagesType = {
   content: string
 }
 
+type ApiReviewsType = {
+  id: number
+  image: string
+  text: string
+  comment: string
+}
+
 import '@/assets/main.scss'
 
 const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
@@ -34,6 +41,11 @@ useSeoMeta({
 
 const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/`)
 const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
+
+const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
+const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`)
+
+
 </script>
 <template>
   <div>
@@ -67,8 +79,25 @@ const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
         </div>
       </div>
     </div>
-    <div class="block bg-slate-500">
+    <div class="block block-img bg-slate-500">
-
+      <NuxtImg src="https://picsum.photos/1920/1080?grayscale" />
+    </div>
+    <div class="block bg-white" :id="reviews?.slug">
+      <div class="container">
+        <template v-for="item in reviewsData?.slice(0, 3)">
+          <div class="review">
+            <div class="review-image">
+              <NuxtImg :src="item.image" />
+            </div>
+            <div class="review-content">
+              {{ item.comment }}
+            </div>
+            <div class="review-title">
+              {{ item.text }}
+            </div>
+          </div>
+        </template>
+      </div>
     </div>
     <NuxtPage />
   </div>

assets/main.scss

@@ -31,6 +31,10 @@ a[href^="/#"]:not([class*="btn"]) {
 .block {
     @apply py-10;
 
+    &-img {
+        @apply py-0;
+    }
+
     &-content {
         @apply col-span-6 h-full flex flex-col justify-between prose;
     }
@@ -52,3 +56,19 @@ a[href^="/#"]:not([class*="btn"]) {
         @apply rounded-full bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold shadow-lg;
     }
 }
+
+.review {
+    @apply col-span-4 grid grid-cols-4 items-center px-4;
+
+    &-image {
+        @apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
+    }
+
+    &-content {
+        @apply col-span-3 text-end italic;
+    }
+
+    &-title {
+        @apply col-span-4 font-bold text-lg text-end mt-4;
+    }
+}