app/components/QuestionList.vue

@@ -2,11 +2,8 @@
     <div class="question-list">
         <el-collapse class="question-collapse" accordion>
             <el-collapse-item
-                v-for="(question, index) in questions"
-                :key="index"
-                :title="question.title"
-                :name="String(index)"
-            >
+v-for="(question, index) in questions" :key="index" :title="question.title"
+                :name="String(index)">
                 <markdown-renderer :content="question.content || ''" />
             </el-collapse-item>
         </el-collapse>
@@ -31,14 +28,33 @@ defineProps({
     border: none;
 }
 
+.question-collapse :deep(.el-collapse-item) {
+    margin-bottom: 1rem;
+    border-radius: 8px;
+}
+
+
 .question-collapse :deep(.el-collapse-item__header) {
     font-size: 1rem;
     padding: 1rem;
+    border-radius: 8px;
+    background-color: #f5f7fa;
+
+    transition: all 0.3s ease;
+
+    &.is-active {
+        background-color: #e1e6eb;
+        color: var(--el-color-primary);
+    }
 }
 
-.question-collapse :deep(.el-collapse-item) {
-    margin-bottom: 1rem;
-    border: 1px solid var(--el-border-color-light);
-    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+.question-collapse :deep(.el-collapse-item__wrap) {
+    border: none;
 }
+
+.question-collapse :deep(.el-collapse-item__content) {
+    padding: 1rem;
+    font-size: 0.9rem;
+}
+
 </style>

app/pages/support/documents.vue

@@ -1,25 +1,57 @@
 <template>
     <div class="page-container">
-        <support-tabs model-value="documents"/>
-        <div class="page-header">
-            <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
-            <el-breadcrumb class="breadcrumb" separator="/">
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
-                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
-                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/support/documents')">{{ $t('navigation.documents') }}</NuxtLink>
-                </el-breadcrumb-item>
-            </el-breadcrumb>
+        <div v-if="pending">
+            <el-skeleton :rows="5" animated />
+        </div>
+        <div v-else>
+            <support-tabs model-value="documents" />
+            <div class="page-header">
+                <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
+                <el-breadcrumb class="breadcrumb" separator="/">
+                    <el-breadcrumb-item class="text-md opacity-50">
+                        <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item class="text-md opacity-50">
+                        <NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item class="text-md opacity-50">
+                        <NuxtLink :to="$localePath('/support/documents')">{{ $t('navigation.documents') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+            <div class="page-content">
+                <document-list :documents="documents" />
+            </div>
         </div>
-
     </div>
 </template>
 
 <script setup lang="ts">
+const { find } = useStrapi()
+const { getStrapiLocale } = useLocalizations()
+const strapiLocale = getStrapiLocale()
+
+const pending = ref(true)
+
+const documents = ref<StrapiMedia[]>([])
+
+onMounted(async () => {
+    try {
+        const response = await find<ProductionDocument>('production-documents', {
+            locale: strapiLocale,
+            populate: 'document',
+        })
+        if(response.data) {
+            documents.value = response.data.map(item => ({
+                ...item.document,
+            })) || []
+        }
+    } catch (error) {
+        console.error('Error fetching documents:', error)
+    } finally {
+        pending.value = false
+    }
+})
 </script>
 
 <style scoped>
@@ -38,4 +70,8 @@
 .breadcrumb {
     margin-left: auto;
 }
+
+.page-content {
+    padding: 1rem 2rem 2rem;
+}
 </style>

app/pages/support/faq.vue

@@ -1,26 +1,55 @@
 <template>
     <div class="page-container">
-        <support-tabs model-value="faq" />
-        <div class="page-header">
-            <h1 class="page-title">{{ $t('navigation.faq') }}</h1>
-            <el-breadcrumb class="breadcrumb" separator="/">
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
-                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
-                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/support/faq')">{{ $t('navigation.faq') }}</NuxtLink>
-                </el-breadcrumb-item>
-            </el-breadcrumb>
+        <div v-if="pending" class="flex justify-center items-center h-64">
+            <el-spinner />
+        </div>
+        <div v-else>
+            <support-tabs model-value="faq" />
+            <div class="page-header">
+                <h1 class="page-title">{{ $t('navigation.faq') }}</h1>
+                <el-breadcrumb class="breadcrumb" separator="/">
+                    <el-breadcrumb-item class="text-md opacity-50">
+                        <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item class="text-md opacity-50">
+                        <NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item class="text-md opacity-50">
+                        <NuxtLink :to="$localePath('/support/faq')">{{ $t('navigation.faq') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+            <div class="page-content">
+                <question-list :questions="questions" />
+            </div>
         </div>
     </div>
 </template>
 
 
 <script setup lang="ts">
+const { find } = useStrapi();
+const { getStrapiLocale } = useLocalizations();
+const strapiLocale = getStrapiLocale();
 
+const questions = ref<Question[]>([]);
+
+const pending = ref(true);
+
+onMounted(async () => {
+    try {
+        const faqData = await find<Question>('questions', {
+            locale: strapiLocale,
+        });
+        if (faqData) {
+            questions.value = faqData.data || [];
+        }
+    } catch (error) {
+        console.error('Failed to fetch FAQ data:', error);
+    } finally {
+        pending.value = false;
+    }
+})
 </script>
 
 <style scoped>
@@ -40,4 +69,7 @@
     margin-left: auto;
 }
 
+.page-content {
+    padding: 1rem 2rem 2rem;
+}
 </style>