Explorar el Código

feat(components): 添加轮播图和特色卡片组件

- 新增 BannerCarousel 组件,用于首页轮播图
- 新增 FeatureCard组件,用于展示特色功能卡片- 组件设计响应式,支持不同屏幕尺寸
nahida hace 8 meses
padre
commit
68bb368304
Se han modificado 1 ficheros con 28 adiciones y 0 borrados
  1. 28 0
      src/components/FeatureCard.tsx

+ 28 - 0
src/components/FeatureCard.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import Image from "next/image";
+import React from "react";
+
+function FeatureCard({ img, title, subtitle, href }: Feature) {
+  return (
+    <Link href={href} className="group">
+      <div className="flex flex-col items-center w-32 sm:w-40 md:w-48 lg:w-56 flex-shrink-0 rounded-2xl transition-colors duration-300 group-hover:bg-[#e6f0fb] cursor-pointer p-4">
+        <Image
+          src={img}
+          width={120}
+          height={120}
+          alt={title}
+          loading="lazy"
+          className="transition-transform duration-300 group-hover:scale-105"
+        />
+        <div className="shuheiti text-center text-sm sm:text-base md:text-lg font-medium mt-2 text-[#6685B8] transition-colors duration-300 group-hover:text-[#1870ff]">
+          {title}
+        </div>
+        <div className="shuheiti text-center text-[10px] sm:text-xs md:text-sm opacity-60 text-[#6685B8] transition-colors duration-300 group-hover:text-[#1870ff]">
+          {subtitle}
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export default  FeatureCard