feat: 完成网站前端的基本建设

- 网站内容展示：首页， 产品页， 解决方案， 联系信息等
- 网站跳转逻辑：通过Vue-Router实现路由跳转
- 后端通信： 通过Nuxt Strapi与后端Strapi服务进行通信

app/components/SolutionCard.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-card class="solution-card" body-class="card-body" header-class="card-header" @click="handleClick">
+        <template #header>
+            <!-- Cover Image -->
+            <el-image class="solution-cover" :src="coverUrl" fit="cover" />
+        </template>
+        <!-- Title -->
+        <template #default>
+            <div class="text-center mx-auto text-md">
+                <span class="solution-title">{{ title }}</span>
+            </div>
+            <!-- Summary -->
+            <div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
+        </template>
+    </el-card>
+</template>
+
+
+<script setup lang="ts">
+interface Props {
+    title: string
+    summary: string
+    coverUrl: string
+    documentId?: string
+}
+
+const props = defineProps<Props>()
+const localePath = useLocalePath()
+
+const handleClick = () => {
+    const routeParam = props.documentId
+    if (routeParam) {
+        navigateTo(localePath(`/solutions/${routeParam}`))
+    }
+}
+</script>
+
+
+<style scoped>
+.solution-card {
+    width: 30%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.solution-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.solution-title {
+    font-weight: 600;
+}
+
+:deep(.card-header) {
+    padding: 0;
+    border-bottom: none !important;
+}
+
+:deep(.card-body) {
+    margin: 10px auto;
+    padding: 1px auto;
+}
+
+
+.solution-card .el-image {
+    height: 250px;
+}
+
+@media (max-width: 1200px) {
+    .solution-card {
+        width: 45%;
+    }
+}
+
+@media (max-width: 768px) {
+    .solution-card {
+        width: 90%;
+        margin: 10px auto;
+    }
+}
+</style>