hanye-website/pages/index.vue

<template>
  <div>
    <!-- 轮播图 -->
    <section class="max-w-full mb-12 md:mb-32">
      <Swiper
        :modules="[Pagination, Autoplay, EffectCreative]"
        :slides-per-view="1"
        :space-between="30"
        :loop="true"
        :pagination="{ el: '.swiper-pagination-1', clickable: true }"
        :autoplay="{ delay: 5000, disableOnInteraction: false }"
        effect="creative"
        :creativeEffect="{
          prev: {
            shadow: true,
            translate: ['-120%', -20, -50],
          },
          next: {
            shadow: true,
            translate: ['-20%', -20, -50],
          },
        }"
        class="h-[320px] sm:h-[320px] md:h-[768px] lg:h-[900px] swiper-container-1"
      >
        <SwiperSlide>
          <div
            class="max-w-screen-2xl mx-auto h-full"
            :style="{
              backgroundImage: `url(${homeA1Webp})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
            }"
          ></div>
        </SwiperSlide>
        <SwiperSlide>
          <div
            class="max-w-screen-2xl mx-auto h-full"
            :style="{
              backgroundImage: `url(${homeA1Webp})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
            }"
          ></div>
        </SwiperSlide>
        <!-- Add more slides as needed -->
        <div class="max-w-screen-2xl mx-auto relative">
          <div
            class="swiper-pagination swiper-pagination-1 text-left bottom-1 top-0"
          ></div>
        </div>
      </Swiper>
    </section>

    <!-- 按用途产品展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          {{ $t("products.usage") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          {{ $t("products.usage_title") }}
        </div>
      </div>
      <div
        class="max-w-screen-2xl mx-auto relative overflow-x-auto whitespace-nowrap scrollbar-hide scroll-smooth"
      >
        <div class="w-full mb-8 inline-flex items-center gap-4">
          <div
            class="cursor-pointer select-none px-7 py-3 rounded-full outline outline-1 outline-offset-[-1px] outline-cyan-400 inline-flex justify-center items-center gap-2.5"
          >
            <div
              class="text-center justify-center text-cyan-400 text-sm font-normal leading-tight md:text-base"
            >
              外付けストレージ化
            </div>
          </div>

          <div
            class="cursor-pointer select-none px-8 py-3 rounded-full outline outline-1 outline-offset-[-1px] outline-zinc-700 inline-flex justify-center items-center gap-2.5"
          >
            <div
              class="text-center justify-center text-zinc-300 text-sm font-normal leading-tight md:text-base"
            >
              外付けストレージ化
            </div>
          </div>

          <div
            class="cursor-pointer select-none px-8 py-3 rounded-full outline outline-1 outline-offset-[-1px] outline-zinc-700 inline-flex justify-center items-center gap-2.5"
          >
            <div
              class="text-center justify-center text-zinc-300 text-sm font-normal leading-tight md:text-base"
            >
              外付けストレージ化
            </div>
          </div>
        </div>
        <div class="absolute right-0 top-1 z-10 lg:block hidden">
          <div class="flex items-center justify-center gap-4">
            <div
              class="swiper-button-prev-2 bg-zinc-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
            >
              <i class="icon-arrow-left text-zinc-300 text-sm font-normal"></i>
            </div>
            <div
              class="swiper-button-next-2 bg-zinc-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
            >
              <i class="icon-arrow-right text-zinc-300 text-sm font-normal"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div class="w-full">
          <Swiper
            :modules="[Navigation]"
            :spaceBetween="30"
            :slidesPerView="4"
            :breakpoints="{
              320: { slidesPerView: 2, spaceBetween: 10 },
              640: { slidesPerView: 3, spaceBetween: 20 },
              1024: { slidesPerView: 4, spaceBetween: 20 },
              1280: { slidesPerView: 4, spaceBetween: 30 },
              1536: { slidesPerView: 4, spaceBetween: 30 },
            }"
            :navigation="{
              prevEl: '.swiper-button-prev-2',
              nextEl: '.swiper-button-next-2',
            }"
            class="max-w-full"
          >
            <SwiperSlide
              class="w-32 sm:w-32 md:w-64 lg:w-96 h-32 sm:h-32 md:h-64 lg:h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-xs sm:text-sm md:text-base font-bold leading-tight mb-2 md:mb-4"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-[10px] sm:text-xs font-normal mb-4 md:mb-8 leading-tight opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              class="w-32 sm:w-32 md:w-64 lg:w-96 h-32 sm:h-32 md:h-64 lg:h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-xs sm:text-sm md:text-base font-bold leading-tight mb-2 md:mb-4"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-[10px] sm:text-xs font-normal mb-4 md:mb-8 leading-tight opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              class="w-32 sm:w-32 md:w-64 lg:w-96 h-32 sm:h-32 md:h-64 lg:h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-xs sm:text-sm md:text-base font-bold leading-tight mb-2 md:mb-4"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-[10px] sm:text-xs font-normal mb-4 md:mb-8 leading-tight opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              class="w-32 sm:w-32 md:w-64 lg:w-96 h-32 sm:h-32 md:h-64 lg:h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-xs sm:text-sm md:text-base font-bold leading-tight mb-2 md:mb-4"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-[10px] sm:text-xs font-normal mb-4 md:mb-8 leading-tight opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              class="w-32 sm:w-32 md:w-64 lg:w-96 h-32 sm:h-32 md:h-64 lg:h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-xs sm:text-sm md:text-base font-bold leading-tight mb-2 md:mb-4"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-[10px] sm:text-xs font-normal mb-4 md:mb-8 leading-tight opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
    </section>

    <!-- 按分类产品展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          Hanye独自に開発・製造、販売
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          製品カテゴリー
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <nuxt-link
            to="/products"
            class="bg-zinc-950/10 backdrop-blur-[50px] border border-white/10 rounded-lg flex gap-8 p-4 sm:p-8 justify-between category-item"
          >
            <div class="col-span-1 flex flex-col gap-4">
              <div class="flex flex-col gap-2 opacity-80">
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>PC高速化</span>
                </div>
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>起動・読込 高速</span>
                </div>
              </div>
              <div
                class="p-2 sm:p-4 mt-auto bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-white/10 backdrop-blur-xl inline-flex justify-center items-center gap-3 overflow-hidden"
              >
                <div
                  class="justify-start text-neutral-200 text-xs md:text-sm font-medium uppercase leading-relaxed"
                >
                  2.5-inch SSD & M.2 SSD
                </div>
              </div>
            </div>
            <div class="w-32 h-32 md:w-44 md:h-44">
              <img
                :src="product"
                alt="h1"
                class="w-full h-full object-contain"
              />
            </div>
          </nuxt-link>
          <nuxt-link
            to="/products"
            class="bg-zinc-950/10 backdrop-blur-[50px] border border-white/10 rounded-lg flex gap-8 p-4 sm:p-8 justify-between category-item"
          >
            <div class="col-span-1 flex flex-col gap-4">
              <div class="flex flex-col gap-2 opacity-80">
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>PC高速化</span>
                </div>
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>起動・読込 高速</span>
                </div>
              </div>
              <div
                class="p-2 sm:p-4 mt-auto bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-white/10 backdrop-blur-xl inline-flex justify-center items-center gap-3 overflow-hidden"
              >
                <div
                  class="justify-start text-neutral-200 text-xs md:text-sm font-medium uppercase leading-relaxed"
                >
                  2.5-inch SSD & M.2 SSD
                </div>
              </div>
            </div>
            <div class="w-32 h-32 md:w-44 md:h-44">
              <img
                :src="product"
                alt="h1"
                class="w-full h-full object-contain"
              />
            </div>
          </nuxt-link>
          <nuxt-link
            to="/products"
            class="bg-zinc-950/10 backdrop-blur-[50px] border border-white/10 rounded-lg flex gap-8 p-4 sm:p-8 justify-between category-item"
          >
            <div class="col-span-1 flex flex-col gap-4">
              <div class="flex flex-col gap-2 opacity-80">
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>PC高速化</span>
                </div>
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>起動・読込 高速</span>
                </div>
              </div>
              <div
                class="p-2 sm:p-4 mt-auto bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-white/10 backdrop-blur-xl inline-flex justify-center items-center gap-3 overflow-hidden"
              >
                <div
                  class="justify-start text-neutral-200 text-xs md:text-sm font-medium uppercase leading-relaxed"
                >
                  2.5-inch SSD & M.2 SSD
                </div>
              </div>
            </div>
            <div class="w-32 h-32 md:w-44 md:h-44">
              <img
                :src="product"
                alt="h1"
                class="w-full h-full object-contain"
              />
            </div>
          </nuxt-link>
          <nuxt-link
            to="/products"
            class="bg-zinc-950/10 backdrop-blur-[50px] border border-white/10 rounded-lg flex gap-8 p-4 sm:p-8 justify-between category-item"
          >
            <div class="col-span-1 flex flex-col gap-4">
              <div class="flex flex-col gap-2 opacity-80">
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>PC高速化</span>
                </div>
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>起動・読込 高速</span>
                </div>
              </div>
              <div
                class="p-2 sm:p-4 mt-auto bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-white/10 backdrop-blur-xl inline-flex justify-center items-center gap-3 overflow-hidden"
              >
                <div
                  class="justify-start text-neutral-200 text-xs md:text-sm font-medium uppercase leading-relaxed"
                >
                  2.5-inch SSD & M.2 SSD
                </div>
              </div>
            </div>
            <div class="w-32 h-32 md:w-44 md:h-44">
              <img
                :src="product"
                alt="h1"
                class="w-full h-full object-contain"
              />
            </div>
          </nuxt-link>
          <nuxt-link
            to="/products"
            class="bg-zinc-950/10 backdrop-blur-[50px] border border-white/10 rounded-lg flex gap-8 p-4 sm:p-8 justify-between category-item"
          >
            <div class="col-span-1 flex flex-col gap-4">
              <div class="flex flex-col gap-2 opacity-80">
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>PC高速化</span>
                </div>
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>起動・読込 高速</span>
                </div>
              </div>
              <div
                class="p-2 sm:p-4 mt-auto bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-white/10 backdrop-blur-xl inline-flex justify-center items-center gap-3 overflow-hidden"
              >
                <div
                  class="justify-start text-neutral-200 text-xs md:text-sm font-medium uppercase leading-relaxed"
                >
                  2.5-inch SSD & M.2 SSD
                </div>
              </div>
            </div>
            <div class="w-32 h-32 md:w-44 md:h-44">
              <img
                :src="product"
                alt="h1"
                class="w-full h-full object-contain"
              />
            </div>
          </nuxt-link>
          <nuxt-link
            to="/products"
            class="bg-zinc-950/10 backdrop-blur-[50px] border border-white/10 rounded-lg flex gap-8 p-4 sm:p-8 justify-between category-item"
          >
            <div class="col-span-1 flex flex-col gap-4">
              <div class="flex flex-col gap-2 opacity-80">
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>PC高速化</span>
                </div>
                <div
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center"
                >
                  <i class="icon-star text-sm"></i>
                  <span>起動・読込 高速</span>
                </div>
              </div>
              <div
                class="p-2 sm:p-4 mt-auto bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-white/10 backdrop-blur-xl inline-flex justify-center items-center gap-3 overflow-hidden"
              >
                <div
                  class="justify-start text-neutral-200 text-xs md:text-sm font-medium uppercase leading-relaxed"
                >
                  2.5-inch SSD & M.2 SSD
                </div>
              </div>
            </div>
            <div class="w-32 h-32 md:w-44 md:h-44">
              <img
                :src="product"
                alt="h1"
                class="w-full h-full object-contain"
              />
            </div>
          </nuxt-link>
        </div>
      </div>
    </section>

    <!-- 产品核心展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
      <div
        class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4"
      >
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h1 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ $t("products.support") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ $t("products.support_description") }}
            </div>
          </div>
        </div>
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h2 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ $t("products.development") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ $t("products.development_description") }}
            </div>
          </div>
        </div>
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h3 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ $t("products.develop") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ $t("products.develop_description") }}
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 当社の強み -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          {{ $t("products.strong_point") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          {{ $t("products.strong_point_title") }}
        </div>
        <div
          class="absolute right-0 top-1/2 -translate-y-1/2 z-10 lg:block hidden"
        >
          <div class="flex items-center justify-center gap-4">
            <div
              class="swiper-button-prev-3 bg-zinc-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
            >
              <i class="icon-arrow-left text-zinc-300 text-sm font-normal"></i>
            </div>
            <div
              class="swiper-button-next-3 bg-zinc-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
            >
              <i class="icon-arrow-right text-zinc-300 text-sm font-normal"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div class="w-full relative max-w-full">
          <Swiper
            :modules="[Navigation, Pagination]"
            slides-per-view="auto"
            :space-between="30"
            :pagination="{ el: '.swiper-pagination-3', clickable: true }"
            :navigation="{
              prevEl: '.swiper-button-prev-3',
              nextEl: '.swiper-button-next-3',
            }"
            class="h-[320px] sm:h-[320px] md:h-[480px] lg:h-[720px] max-w-full"
          >
            <SwiperSlide class="!max-w-screen-2xl !w-full">
              <div
                class="w-full h-full flex items-center px-0 md:px-20"
                :style="{
                  backgroundImage: `url(${homeC1Webp})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat',
                }"
              >
                <div
                  class="w-full lg:w-[50%] h-full md:h-auto bg-white/5 rounded-0 md:rounded-2xl backdrop-blur-[50px] px-4 py-8 md:py-12 md:px-8 flex flex-col gap-8 border border-white/10"
                >
                  <div
                    class="opacity-90 justify-start text-white text-2xl font-normal md:text-4xl"
                  >
                    一貫体制による高品質と安定供給
                  </div>
                  <div
                    class="opacity-70 justify-start text-white text-base md:text-lg font-normal leading-relaxed"
                  >
                    「企画・開発から製造、品質管理、販売、オンラインショップ運営まで自社で完結。ISO認証取得の工場で生産された信頼性の高い製品を、安定してお届けします。」
                  </div>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
        <div class="max-w-screen-2xl mx-auto relative">
          <div class="swiper-pagination swiper-pagination-3"></div>
        </div>
      </div>
    </section>

    <!-- 产品咨询 -->
    <section class="max-w-full h-[240px] md:h-[480px] bg-black/80 md:block">
      <div class="h-full relative">
        <div
          class="absolute top-0 left-0 w-full h-full flex flex-col gap-6 items-center justify-center z-10"
        >
          <h1
            class="text-center justify-start text-white font-normal text-xl sm:text-2xl md:text-3xl px-2"
          >
            {{ $t("products.consultation") }}
          </h1>
          <nuxt-link
            :to="locale === defaultLocale ? '/contact' : `/${locale}/contact`"
            class="w-32 h-10 md:w-40 md:h-11 bg-zinc-300/10 rounded-lg outline outline-1 flex items-center justify-center gap-2 outline-white/20 backdrop-blur-[10px] cursor-pointer hover:bg-zinc-300/20 transition-colors duration-200"
          >
            <span class="text-xs md:text-sm font-normal">{{
              $t("products.consultation_button")
            }}</span>
            <i class="icon-arrow-right text-sm font-normal"></i>
          </nuxt-link>
        </div>
        <img
          v-if="isMobile"
          :src="videoWebp"
          alt="video"
          class="w-full h-full object-cover opacity-20"
        />
        <video
          v-else
          :src="videoSrc"
          autoplay
          muted
          loop
          :poster="videoWebp"
          class="w-full h-full object-cover opacity-20"
        ></video>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import {
  Navigation,
  Pagination,
  Autoplay,
  EffectCreative,
} from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
import { useI18n } from "vue-i18n";
import video from "@/assets/videos/video.mp4";
import videoWebp from "@/assets/videos/video.webp";
import homeA1Webp from "@/assets/images/home-a-1.webp";
import homeC1Webp from "@/assets/images/home-c-1.webp";
import product from "@/assets/images/product.png";

const { t, locale } = useI18n();
const config = useRuntimeConfig();
// 从运行时配置获取默认语言，如果未配置则默认为 'en'
const defaultLocale = config.public.i18n?.defaultLocale || "en";

const videoSrc = ref(video);

// Define breakpoints
const breakpoints = useBreakpoints(breakpointsTailwind);
// Check if the device is mobile (smaller than md)
const isMobile = breakpoints.smaller("md");

/**
 * 网站首页
 * 展示网站主要内容和精选产品
 */
// 模拟数据
const featuredProducts = [
  {
    id: 1,
    title: "产品一",
    description: "这是产品一的详细描述，介绍产品特点和用途。",
  },
  {
    id: 2,
    title: "产品二",
    description: "这是产品二的详细描述，介绍产品特点和用途。",
  },
  {
    id: 3,
    title: "产品三",
    description: "这是产品三的详细描述，介绍产品特点和用途。",
  },
];

// SEO优化
useHead({
  title: "Hanye - 首页",
  meta: [
    {
      name: "description",
      content: "基于 Nuxt3 的静态网站脚手架，支持多语言（中文、英文、日文）。",
    },
  ],
});
</script>

<style lang="scss" scoped>
:deep(.swiper-pagination-3) {
  margin: auto;
  position: static;
  padding: 1rem 0;
}
:deep(.swiper-pagination-bullet) {
  background-color: var(--color-bg); /* Example color */
  border: 2px solid var(--color-text);
}
:deep(.swiper-pagination-bullet-active) {
  background-color: var(--color-text); /* Example color */
}
.category-item {
  background-image: url("@/assets/images/home-b-1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  &:hover {
    opacity: 1;
  }
}
</style>