chore: 解决方案页面

config/pages/solutions/use-web3.ts

@@ -0,0 +1,5 @@
+export function useWeb3() {
+  return {
+
+  }
+}

config/use-nav.ts

@@ -21,28 +21,28 @@ export function useNav(): NavMenu[] {
         {
           title: 'nav.solutions.child.land.service[0]',
           subtitle: 'nav.solutions.child.land.description[0]',
-          href: '/solutions',
+          href: '/solutions/web3',
           icon: 'i-tabler-affiliate',
           iconColor: 'red',
         },
         {
           title: 'nav.solutions.child.land.service[1]',
           subtitle: 'nav.solutions.child.land.description[1]',
-          href: '/solutions',
+          href: '/solutions/digital-twin',
           icon: 'i-tabler-a-b',
           iconColor: 'amber',
         },
         {
           title: 'nav.solutions.child.land.service[2]',
           subtitle: 'nav.solutions.child.land.description[2]',
-          href: '/solutions',
+          href: '/solutions/mixed-reality',
           icon: 'i-tabler-3d-cube-sphere',
           iconColor: 'amber',
         },
         {
           title: 'nav.solutions.child.land.service[3]',
           subtitle: 'nav.solutions.child.land.description[3]',
-          href: '/solutions',
+          href: '/solutions/aigc',
           icon: 'i-iconoir-brain-electricity',
           iconColor: 'amber',
         },

pages/index.vue

@@ -178,7 +178,7 @@ const sectionNine = useSectionNine()
         class="w-full text-center"
       >
         <div :class="content.icon" mb-5 h-60px w-full />
-        <h4 mb-1 text-h4 font-bold>
+        <h4 text-h4 mb-1 font-bold>
           {{ $t(content.title) }}
         </h4>
         <p text-h7>

pages/solutions.vue

@@ -1,15 +1,23 @@
-<script setup lang="ts">
-const router = useRouter()
-</script>
-
 <template>
-  <main p="x4 y-50" text="center teal-700 dark:gray-200">
+  <NuxtPage />
-    <div text-4xl>
-      <div i-carbon-warning inline-block />
-    </div>
 
-    <h2 p-12 text-4xl>
+  <Section>
-      {{ $t('waiting') }}
+    <div class="grid-row rounded-lg from-violet-500 to-fuchsia-500 bg-gradient-to-r p-5 text-white shadow-lg lg:(grid-cols-2)">
-    </h2>
+      <ATypography
-  </main>
+        class="text-white"
+        title="联系我们"
+        subtitle="使用下方的联系方式和我们沟通，或者留下您的邮箱"
+        :text="['+86 12312314', 'text-sm']"
+      />
+      <div h-full w-full flex flex-col items-center justify-center gap-3>
+        <div flex items-center gap-3>
+          <AInput placeholder="邮箱" class="col-start-1 w-full text-sm" input-wrapper-classes="bg-light-50" />
+          <ABtn>test</ABtn>
+        </div>
+        <!-- <ACheckbox>
+          <span>同意接收来自我们的消息</span>
+        </ACheckbox> -->
+      </div>
+    </div>
+  </Section>
 </template>

pages/solutions/aigc.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useSectionSix } from '~/config/pages/home/use-section-six'
+
+const sectionOne = {
+  topic: 'home.sectionOne.topic',
+  description: 'home.sectionOne.description',
+  content: [
+    {
+      title: 'home.sectionOne.content.title[0]',
+      subtext: 'home.sectionOne.content.subtext[0]',
+      description: 'home.sectionOne.content.description[0]',
+    },
+    {
+      title: 'home.sectionOne.content.title[1]',
+      subtext: 'home.sectionOne.content.subtext[1]',
+      description: 'home.sectionOne.content.description[1]',
+    },
+    {
+      title: 'home.sectionOne.content.title[2]',
+      subtext: 'home.sectionOne.content.subtext[2]',
+      description: 'home.sectionOne.content.description[2]',
+    },
+    {
+      title: 'home.sectionOne.content.title[2]',
+      subtext: 'home.sectionOne.content.subtext[2]',
+      description: 'home.sectionOne.content.description[2]',
+    },
+  ],
+}
+
+const data = {
+  img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
+  topic: 'Never Drink Alone：The Bar Symphony',
+  title: 'Metaverse Space Design',
+  description: 'Award-Winning Project',
+}
+
+const sectionSix = useSectionSix()
+</script>
+
+<template>
+  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+
+  <Section>
+    <Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
+
+    <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
+      <div class="w-45% flex-grow">
+        <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
+          <ImageLoading quality="20" :src="item.img" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
+          <!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
+        </div>
+      </div>
+
+      <div class="w-55% flex-grow">
+        <div class="h-full w-full flex flex-col items-center justify-center px-2 md:(items-start px-16)">
+          <p class="text-title">
+            {{ $t(item.title) }}
+          </p>
+          <h4 class="text-h4 font-bold">
+            {{ $t(item.topic) }}
+          </h4>
+          <p class="text-h6 text-center md:text-left">
+            {{ $t(item.description) }}
+          </p>
+          <div v-if="item.link" class="w-full py-10 text-center md:text-left">
+            <LocaleNuxtLink :href="item.link.href">
+              <ABtn variant="light" class="group">
+                {{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
+              </ABtn>
+            </LocaleNuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>

pages/solutions/digital-twin.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useSectionThree } from '~/config/pages/home/use-section-three'
+
+const sectionOne = {
+  topic: 'home.sectionOne.topic',
+  description: 'home.sectionOne.description',
+  content: [
+    {
+      title: 'home.sectionOne.content.title[0]',
+      subtext: 'home.sectionOne.content.subtext[0]',
+      description: 'home.sectionOne.content.description[0]',
+    },
+    {
+      title: 'home.sectionOne.content.title[1]',
+      subtext: 'home.sectionOne.content.subtext[1]',
+      description: 'home.sectionOne.content.description[1]',
+    },
+    {
+      title: 'home.sectionOne.content.title[2]',
+      subtext: 'home.sectionOne.content.subtext[2]',
+      description: 'home.sectionOne.content.description[2]',
+    },
+    {
+      title: 'home.sectionOne.content.title[2]',
+      subtext: 'home.sectionOne.content.subtext[2]',
+      description: 'home.sectionOne.content.description[2]',
+    },
+  ],
+}
+
+const data = {
+  img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
+  topic: 'Never Drink Alone：The Bar Symphony',
+  title: 'Metaverse Space Design',
+  description: 'Award-Winning Project',
+}
+
+const sectionThree = useSectionThree()
+const sectionThreeEl = ref(null)
+const sectionThreeVis = useElementVisibility(sectionThreeEl)
+</script>
+
+<template>
+  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+
+  <!-- Section Three -->
+  <Section text-center class="section-three">
+    <Typography :title=" $t(sectionThree.title) " :topic=" $t(sectionThree.topic) " :description=" $t(sectionThree.description) " />
+
+    <div ref="sectionThreeEl">
+      <div
+        class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`"
+      >
+        <ImageHover
+          v-for="(content, i) in sectionThree.contentPrimary"
+          :key="i"
+          :href="content.href" :img="content.img" :topic="content.topic"
+          class="min-h-200px"
+          :class="[`animated-delay-${i * 100}ms`, {
+            'animated animated-fade-in-up animated-faster': sectionThreeVis,
+          }]"
+        />
+      </div>
+      <div class="grid-row pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
+        <ImageHover
+          v-for="(content, i) in sectionThree.contentSecondary"
+          :key="i"
+          :href="content.href" :img="content.img" :topic="content.topic"
+          class="min-h-200px"
+          :class="[`animated-delay-${i * 100}ms`, {
+            'animated animated-fade-in-up animated-faster': sectionThreeVis,
+          }]"
+        />
+      </div>
+      <div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
+        <ImageHover
+          v-for="(content, i) in sectionThree.contentThird"
+          :key="i"
+          :href="content.href" :img="content.img" :topic="content.topic"
+          class="min-h-200px"
+          :class="[`animated-delay-${i * 100}ms`, {
+            'animated animated-fade-in-up': sectionThreeVis,
+          }]"
+        />
+      </div>
+    </div>
+    <LocaleNuxtLink :href="sectionThree.link.href">
+      <ABtn variant="light">
+        {{ $t(sectionThree.link.name) }}
+      </ABtn>
+    </LocaleNuxtLink>
+  </Section>
+</template>

pages/solutions/mixed-reality.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useSectionSix } from '~/config/pages/home/use-section-six'
+
+const sectionOne = {
+  topic: 'home.sectionOne.topic',
+  description: 'home.sectionOne.description',
+  content: [
+    {
+      title: 'home.sectionOne.content.title[0]',
+      subtext: 'home.sectionOne.content.subtext[0]',
+      description: 'home.sectionOne.content.description[0]',
+    },
+    {
+      title: 'home.sectionOne.content.title[1]',
+      subtext: 'home.sectionOne.content.subtext[1]',
+      description: 'home.sectionOne.content.description[1]',
+    },
+    {
+      title: 'home.sectionOne.content.title[2]',
+      subtext: 'home.sectionOne.content.subtext[2]',
+      description: 'home.sectionOne.content.description[2]',
+    },
+    {
+      title: 'home.sectionOne.content.title[2]',
+      subtext: 'home.sectionOne.content.subtext[2]',
+      description: 'home.sectionOne.content.description[2]',
+    },
+  ],
+}
+
+const data = {
+  img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
+  topic: 'Never Drink Alone：The Bar Symphony',
+  title: 'Metaverse Space Design',
+  description: 'Award-Winning Project',
+}
+
+const sectionSix = useSectionSix()
+</script>
+
+<template>
+  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+
+  <Section>
+    <Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
+
+    <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
+      <div class="w-45% flex-grow">
+        <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
+          <ImageLoading quality="20" :src="item.img" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
+          <!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
+        </div>
+      </div>
+
+      <div class="w-55% flex-grow">
+        <div class="h-full w-full flex flex-col items-center justify-center px-2 md:(items-start px-16)">
+          <p class="text-title">
+            {{ $t(item.title) }}
+          </p>
+          <h4 class="text-h4 font-bold">
+            {{ $t(item.topic) }}
+          </h4>
+          <p class="text-h6 text-center md:text-left">
+            {{ $t(item.description) }}
+          </p>
+          <div v-if="item.link" class="w-full py-10 text-center md:text-left">
+            <LocaleNuxtLink :href="item.link.href">
+              <ABtn variant="light" class="group">
+                {{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
+              </ABtn>
+            </LocaleNuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>

pages/solutions/web3.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useSectionSix } from '~/config/pages/home/use-section-six'
+
+const sectionOne = {
+  topic: 'home.sectionOne.topic',
+  description: 'home.sectionOne.description',
+  content: [
+    {
+      title: 'home.sectionOne.content.title[0]',
+      subtext: 'home.sectionOne.content.subtext[0]',
+      description: 'home.sectionOne.content.description[0]',
+    },
+    {
+      title: 'home.sectionOne.content.title[1]',
+      subtext: 'home.sectionOne.content.subtext[1]',
+      description: 'home.sectionOne.content.description[1]',
+    },
+    {
+      title: 'home.sectionOne.content.title[2]',
+      subtext: 'home.sectionOne.content.subtext[2]',
+      description: 'home.sectionOne.content.description[2]',
+    },
+    {
+      title: 'home.sectionOne.content.title[2]',
+      subtext: 'home.sectionOne.content.subtext[2]',
+      description: 'home.sectionOne.content.description[2]',
+    },
+  ],
+}
+
+const data = {
+  img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
+  topic: 'Never Drink Alone：The Bar Symphony',
+  title: 'Metaverse Space Design',
+  description: 'Award-Winning Project',
+}
+
+const sectionSix = useSectionSix()
+</script>
+
+<template>
+  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+
+  <Section>
+    <Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
+
+    <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
+      <div class="w-45% flex-grow">
+        <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
+          <ImageLoading quality="20" :src="item.img" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
+          <!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
+        </div>
+      </div>
+
+      <div class="w-55% flex-grow">
+        <div class="h-full w-full flex flex-col items-center justify-center px-2 md:(items-start px-16)">
+          <p class="text-title">
+            {{ $t(item.title) }}
+          </p>
+          <h4 class="text-h4 font-bold">
+            {{ $t(item.topic) }}
+          </h4>
+          <p class="text-h6 text-center md:text-left">
+            {{ $t(item.description) }}
+          </p>
+          <div v-if="item.link" class="w-full py-10 text-center md:text-left">
+            <LocaleNuxtLink :href="item.link.href">
+              <ABtn variant="light" class="group">
+                {{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
+              </ABtn>
+            </LocaleNuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Section>
+</template>