add: hook section

.eslintrc

@@ -2,5 +2,8 @@
   "extends": [
     "@antfu",
     "@unocss"
-  ]
+  ],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment":"off"
+  }
 }

components/Carousel.vue

@@ -1,34 +1,10 @@
 <script setup lang="ts">
+import { useCarousel } from '~/config/pages/home/use-carousel'
+
 const { state: pages, next, prev } = useCycleList(Array(4).fill('').map((_, i) => i), {
   initialValue: 1,
 })
-const transitionPages = ref('view-next')
+const carousels = useCarousel()
-const carousels = [
-  {
-    title: 'carousel.one.topic',
-    description: 'carousel.one.description',
-    entry: 'carousel.one.entry',
-    img: '/imgs/1 (1).jpg',
-  },
-  {
-    title: 'carousel.two.topic',
-    description: 'carousel.two.description',
-    entry: 'carousel.two.entry',
-    img: '/imgs/1 (2).jpg',
-  },
-  {
-    title: 'carousel.third.topic',
-    description: 'carousel.third.description',
-    entry: 'carousel.third.entry',
-    img: '/imgs/1 (3).jpg',
-  },
-  {
-    title: 'carousel.four.topic',
-    description: 'carousel.four.description',
-    entry: 'carousel.four.entry',
-    img: '/imgs/1 (4).jpg',
-  },
-]
 
 useIntervalFn(() => {
   next()
@@ -52,7 +28,7 @@ useIntervalFn(() => {
             {{ $t(item.entry) }}
           </ABtn>
         </div>
-        <div class="h-full w-full absolute top-0 left-0" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 80%, hsl(var(--a-body-bg-c)) 101%);" ></div>
+        <div class="absolute left-0 top-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 75%, hsl(var(--a-body-bg-c)) 99%);" />
         <img :src="item.img">
       </div>
       <!-- <ACard

components/Footer.vue

@@ -1,7 +1,9 @@
 <template>
-  <div text="xl gray4" m-5 flex="~ gap3" justify-center>
+  <div class="grid-row py-10 lg:(grid-cols-3) md:(grid-cols-2)">
-    <NuxtLink i-carbon-campsite to="/" />
+    <div
-    <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="_blank" />
+      v-for="col in 3"
-    <DarkToggle />
+      :key="col"
+      class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
+    />
   </div>
 </template>

components/header/header.vue

@@ -1,47 +1,18 @@
-<script setup lang="ts">
-const nav = [
-  {
-    name: 'nav.dashboard',
-    to: '/dashboard',
-  },
-  {
-    name: 'nav.datacenter',
-    to: '/data-center',
-  },
-  {
-    name: 'nav.server',
-    to: '/server',
-  },
-  {
-    name: 'nav.filer',
-    to: '/filer',
-  },
-  {
-    name: 'nav.cdn',
-    to: '/cdn',
-  },
-  {
-    name: 'nav.management',
-    to: '/management',
-  },
-]
-</script>
-
 <template>
-  <header class="bg-header/10 h-[100px]" absolute z-100 w-full flex items-center justify-between px-15>
+  <header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute">
     <NuxtLink to="/" class="w-35 flex items-center gap-5">
       <BrandLogo />
     </NuxtLink>
     <nav h-full flex items-center>
       <HeaderNav />
     </nav>
-    <div w-20 flex justify-center>
+    <!-- <div w-20 flex justify-center> -->
-      <ABtn variant="text">
+    <!-- <ABtn variant="text">
         login
       </ABtn>
       <ABtn shadow-lg>
         login
-      </ABtn>
+      </ABtn> -->
-    </div>
+    <!-- </div> -->
   </header>
 </template>

components/header/nav.vue

@@ -1,32 +1,7 @@
-<script setup>
+<script setup lang="ts">
-const { x, y } = useWindowScroll()
+import { useNav } from '~/config/use-nav'
 
-const navs = [
+const navs = useNav()
-  {
-    title: 'home',
-    href: '/',
-  },
-  {
-    title: 'solutions.t',
-    child: [
-      {
-        title: 'solutions.child.land.t',
-        subtitle: 'solutions.child.land.description',
-        href: '/land',
-        icon: 'i-solar-accumulator-bold-duotone',
-        iconColor: 'red',
-      },
-      {
-        title: 'solutions.child.land.t',
-        subtitle: 'solutions.child.land.description sdfdsfasdf ',
-        href: '/landa',
-        icon: 'i-solar-airbuds-case-open-line-duotone text-amber',
-        iconColor: 'amber',
-        // avatarProps: { icon: 'i-solar-airbuds-case-open-line-duotone' },
-      },
-    ],
-  },
-]
 </script>
 
 <template>
@@ -48,7 +23,6 @@ const navs = [
                 :title="item.title"
                 :subtitle="item.subtitle"
                 :icon="item.icon"
-                :disabled="item.disabled"
               />
             </NuxtLink>
           </AList>

config/pages/home/use-carousel.ts

@@ -0,0 +1,28 @@
+export function useCarousel() {
+  return [
+    {
+      title: 'home.carousel.one.topic',
+      description: 'home.carousel.one.description',
+      entry: 'home.carousel.one.entry',
+      img: '/imgs/1 (1).jpg',
+    },
+    {
+      title: 'home.carousel.two.topic',
+      description: 'home.carousel.two.description',
+      entry: 'home.carousel.two.entry',
+      img: '/imgs/1 (2).jpg',
+    },
+    {
+      title: 'home.carousel.third.topic',
+      description: 'home.carousel.third.description',
+      entry: 'home.carousel.third.entry',
+      img: '/imgs/1 (3).jpg',
+    },
+    {
+      title: 'home.carousel.four.topic',
+      description: 'home.carousel.four.description',
+      entry: 'home.carousel.four.entry',
+      img: '/imgs/1 (4).jpg',
+    },
+  ]
+}

config/pages/home/use-section-one.ts

@@ -0,0 +1,23 @@
+export function useSectionOne() {
+  return {
+    topic: 'home.sectionOne.topic',
+    description: 'home.sectionOne.description',
+    content: [
+      {
+        title: 'home.sectionOne.one.title',
+        subtext: 'home.setctionOne.one.subtext',
+        description: 'home.setctionOne.one.description',
+      },
+      {
+        title: 'home.sectionOne.two.title',
+        subtext: 'home.setctionOne.two.subtext',
+        description: 'home.setctionOne.two.description',
+      },
+      {
+        title: 'home.sectionOne.three.title',
+        subtext: 'home.setctionOne.three.subtext',
+        description: 'home.setctionOne.three.description',
+      },
+    ],
+  }
+}

config/pages/home/use-section-three.ts

@@ -0,0 +1,61 @@
+export function useSectionThree() {
+  return {
+    title: 'home.sectionThree.title',
+    topic: 'home.sectionThree.topic',
+    description: 'home.sectionThree.description',
+    entry: 'home.sectionThree.entry',
+    contentFirst: [
+      {
+        topic: 'home.sectionThree.contentFirst.topic1',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+      {
+        topic: 'home.sectionThree.contentFirst.topic2',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+    ],
+    contentSecondary: [
+      {
+        topic: 'home.sectionThree.contentSecondary.topic1',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+      {
+        topic: 'home.sectionThree.contentSecondary.topic2',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+      {
+        topic: 'home.sectionThree.contentSecondary.topic3',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+
+    ],
+    contentThird: [
+      {
+        topic: 'home.sectionThree.contentThird.topic1',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+      {
+        topic: 'home.sectionThree.contentThird.topic2',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+      {
+        topic: 'home.sectionThree.contentThird.topic3',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+      {
+        topic: 'home.sectionThree.contentThird.topic4',
+        img: '/imgs/1 (1).jpg',
+        href: '#',
+      },
+
+    ],
+  }
+}

config/pages/home/use-section-two.ts

@@ -0,0 +1,42 @@
+export function useSectionTwo() {
+  return {
+    title: 'home.sectionTwo.title',
+    content: [
+      {
+        img: 'https://landvault.io/assets/logos/paypal.svg',
+        href: '#',
+        title: 'paypal',
+      },
+      {
+        img: 'https://landvault.io/assets/logos/paypal.svg',
+        href: '#',
+        title: 'paypal',
+      },
+      {
+        img: 'https://landvault.io/assets/logos/paypal.svg',
+        href: '#',
+        title: 'paypal',
+      },
+      {
+        img: 'https://landvault.io/assets/logos/paypal.svg',
+        href: '#',
+        title: 'paypal',
+      },
+      {
+        img: 'https://landvault.io/assets/logos/paypal.svg',
+        href: '#',
+        title: 'paypal',
+      },
+      {
+        img: 'https://landvault.io/assets/logos/paypal.svg',
+        href: '#',
+        title: 'paypal',
+      },
+      {
+        img: 'https://landvault.io/assets/logos/paypal.svg',
+        href: '#',
+        title: 'paypal',
+      },
+    ],
+  }
+}

config/use-nav.ts

@@ -0,0 +1,43 @@
+import type { colors } from 'unocss/preset-mini'
+
+interface NavMenu {
+  title: string
+  icon?: string
+  href?: string
+  subtitle?: string
+  iconColor?: keyof typeof colors
+  child?: NavMenu[]
+}
+
+export function useNav(): NavMenu[] {
+  return [
+    {
+      title: 'nav.home',
+      href: '/',
+    },
+    {
+      title: 'nav.solutions.t',
+      child: [
+        {
+          title: 'nav.solutions.child.land.t',
+          subtitle: 'nav.solutions.child.land.description',
+          href: '/land',
+          icon: 'i-solar-accumulator-bold-duotone',
+          iconColor: 'red',
+        },
+        {
+          title: 'nav.solutions.child.land.t',
+          subtitle: 'nav.solutions.child.land.description',
+          href: '/landa',
+          icon: 'i-solar-airbuds-case-open-line-duotone text-amber',
+          iconColor: 'amber',
+          // avatarProps: { icon: 'i-solar-airbuds-case-open-line-duotone' },
+        },
+      ],
+    },
+    {
+      title: 'nav.test',
+      href: '/test',
+    },
+  ]
+}

layouts/default.vue

@@ -1,14 +1,16 @@
+<script setup lang="ts">
+const el = ref<HTMLElement | null>(null)
+const { y } = useScroll(el)
+</script>
+
 <template>
-  <main class="scrollbar scrollbar-rounded scrollbar-w-4px scrollbar-radius-2 scrollbar-track-color-transparent scrollbar-thumb-color-dark-50 scrollbar-thumb-radius-4 h-screen w-screen overflow-auto">
+  <main :ref="el" class="h-screen w-screen overflow-auto scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-6px scrollbar scrollbar-rounded">
-    <Header />
+    <Header
+      :class="{
+        hidden: !!y,
+      }"
+    />
     <slot />
-    <ABtn shadow-lg>
-      test
-    </ABtn>
-    <AInput />
     <Footer />
-    <div class="mx-auto mt-5 text-center text-sm opacity-25">
-      [Default Layout]
-    </div>
   </main>
 </template>

nuxt.config.ts

@@ -113,4 +113,6 @@ export default defineNuxtConfig({
   devtools: {
     enabled: true,
   },
+
+  telemetry: false,
 })

pages/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useSectionOne } from '~/config/pages/home/use-section-one'
+import { useSectionThree } from '~/config/pages/home/use-section-three'
+import { useSectionTwo } from '~/config/pages/home/use-section-two'
+
 const imgs = [
   {
     img: 'https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9tYXAuanBn?w=581&h=358&fit=crop&fm=webp&s=1eeea55d816b6b9fb182d2a469db110c',
@@ -44,70 +48,131 @@ const imgs = [
     },
   },
 ]
+
+const sectionOne = useSectionOne()
+const sectionTwo = useSectionTwo()
+const sectionThree = useSectionThree()
 </script>
 
 <template>
   <Carousel class="mb-5" />
   <Divider />
+  <!-- Section One -->
   <Section>
-    <h2 class="text-h2">
+    <h2 class="text-h2" :title="$t(sectionOne.topic)">
-      {{ $t('home.sectionOne.topic') }}
+      {{ $t(sectionOne.topic) }}
     </h2>
-    <div class="grid-row lg:(grid-cols-3) md:(grid-cols-2)">
+    <div class="grid-row md:(grid-cols-2)" :class="`lg:grid-cols-${sectionOne.content.length}`">
       <div
-        v-for="col in 3"
+        v-for="(col, i) in sectionOne.content"
-        :key="col"
+        :key="i"
-        class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
+        class="w-full overflow-hidden text-center"
-      />
+      >
+        <h2 :title="$t(col.title)" class="break-words from-pink-500 to-violet-500 bg-gradient-to-r bg-clip-text text-h3 font-bold text-transparent">
+          {{ $t(col.title) }}
+        </h2>
+        <Divider />
+        <h5 :title="$t(col.subtext)" class="mt-3 break-words text-h4 text-h5">
+          {{ $t(col.subtext) }}
+        </h5>
+        <Divider />
+        <p :title="$t(col.description)" class="mt-1 break-words text-h6 !line-clamp-3">
+          {{ $t(col.description) }}
+        </p>
+      </div>
     </div>
   </Section>
+
+  <!-- Section Two -->
   <Section class="border-b-2 border-light-50/10 border-b-solid from-light/5 bg-gradient-to-t">
     <p class="text-title">
-      {{ $t('home.sectionTwo.title') }}
+      {{ $t(sectionTwo.title) }}
     </p>
-    <div class="grid-row grid-cols-2 py-10 lg:(grid-cols-7) md:(grid-cols-3)">
+    <div class="grid-row grid-cols-2 py-10 md:grid-cols-3" :class="`lg:grid-cols-${sectionTwo.content.length}`">
-      <div
+      <NuxtLink
-        v-for="col in 7"
+        v-for="(content, i) in sectionTwo.content"
-        :key="col"
+        :key="i"
-        class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
+        class="h-10 w-full flex justify-center"
-      />
+        :href="content.href"
+        :title="$t(content.title)"
+      >
+        <img :src="content.img">
+      </NuxtLink>
     </div>
   </Section>
+
+  <!-- Section Three -->
   <Section text-center>
     <p class="text-title">
-      {{ $t('home.sectionThird.title') }}
+      {{ $t(sectionThree.title) }}
     </p>
     <h2 class="text-h2">
-      {{ $t('home.sectionThird.topic') }}
+      {{ $t(sectionThree.topic) }}
     </h2>
     <p class="text-h6">
-      {{ $t('home.sectionThird.description') }}
+      {{ $t(sectionThree.description) }}
     </p>
 
     <div>
-      <div class="grid-row py-10 pb-20 lg:(grid-cols-2) md:(grid-cols-2)">
+      <div class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentFirst.length}`">
-        <div
+        <NuxtLink
-          v-for="col in 2"
+          v-for="(content, i) in sectionThree.contentFirst"
-          :key="col"
+          :key="i"
-          class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
+          :href="content.href"
-        />
+          class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
+        >
+          <img :src="content.img">
+          <div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
+          <div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
+            <div class="w-full text-h4">
+              <p :title="content.topic" class="w-90% truncate">
+                {{ content.topic }}
+              </p>
             </div>
-      <div class="grid-row pb-20 lg:(grid-cols-3) md:(grid-cols-2)">
+            <div i-solar-arrow-right-linear stroke-3 font-bold />
-        <div
-          v-for="col in 3"
-          :key="col"
-          class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
-        />
           </div>
-      <div class="grid-row pb-20 lg:(grid-cols-4) md:(grid-cols-2)">
+        </NuxtLink>
-        <div
+      </div>
-          v-for="col in 4"
+      <div class="grid-row pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
-          :key="col"
+        <NuxtLink
-          class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
+          v-for="(content, i) in sectionThree.contentSecondary"
-        />
+          :key="i"
+          :href="content.href"
+          class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
+        >
+          <img :src="content.img">
+          <div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
+          <div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
+            <div class="w-full text-h4">
+              <p :title="content.topic" class="w-90% truncate">
+                {{ content.topic }}
+              </p>
+            </div>
+            <div i-solar-arrow-right-linear stroke-3 font-bold />
+          </div>
+        </NuxtLink>
+      </div>
+      <div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
+        <NuxtLink
+          v-for="(content, i) in sectionThree.contentThird"
+          :key="i"
+          :href="content.href"
+          class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
+        >
+          <img :src="content.img">
+          <div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
+          <div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
+            <div class="w-full text-h4">
+              <p :title="content.topic" class="w-90% truncate">
+                {{ content.topic }}
+              </p>
+            </div>
+            <div i-solar-arrow-right-linear stroke-3 font-bold />
+          </div>
+        </NuxtLink>
       </div>
     </div>
-    <ABtn>{{ $t('home.sectionThird.entry') }}</ABtn>
+    <ABtn>{{ $t(sectionThree.entry) }}</ABtn>
   </Section>
   <Section
     relative h-380px md:h-400px xl:h-450px

uno.config.ts

@@ -22,13 +22,17 @@ export default defineConfig({
     'text-title': 'text font-bold opacity-90 text-center uppercase',
     'text-body': 'text-base text-center  tracking-normal',
     'text-description': 'text-md text-stone text-center',
-    'text-h2': 'text-5xl text-center leading-20 font-bold',
+    'text-h2': 'line-clamp-2 text-5xl text-center leading-20 font-bold',
-    'text-h3': 'text-4xl text-center leading-18',
+    'text-h3': 'line-clamp-2 text-4xl text-center leading-13',
-    'text-h4': 'text-2xl text-center leading-14',
+    'text-h4': 'line-clamp-2 text-2xl text-center leading-10',
-    'text-h5': 'text-xl text-center leading-10',
+    'text-h5': 'line-clamp-2 text-xl text-center leading-8',
-    'text-h6': 'text-lg text-center leading-6',
+    'text-h6': 'line-clamp-2 text-lg text-center leading-6',
-    'text-h7': 'text text-center',
+    'text-h7': 'line-clamp-3 text text-center',
   },
+  safelist: [
+    ...Array(10).fill('').map((_, i) => `grid-cols-${i + 1}`),
+    ...Array(10).fill('').map((_, i) => `lg:grid-cols-${i + 1}`),
+  ],
   presets: [
     presetAnu(),
     // default theme preset