|
|
@@ -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
|