fix feature card

apps/web/src/app/(home)/_components/FeatureCard.tsx

@@ -2,9 +2,8 @@
 
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "motion/react";
 import Image from "next/image";
-import { useState } from "react";
 
 interface TechOption {
 	id: string;
@@ -24,59 +23,46 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
 	options,
 	className,
 }) => {
-	const [isHovered, setIsHovered] = useState(false);
-
 	return (
 		<motion.div
 			className={cn(
-				"relative flex h-36 flex-col justify-between overflow-hidden rounded-lg border border-border bg-card p-4 shadow-sm",
+				"relative flex h-36 flex-col overflow-hidden rounded-lg border border-border bg-card p-2 shadow-sm",
 				className,
 			)}
-			onHoverStart={() => setIsHovered(true)}
-			onHoverEnd={() => setIsHovered(false)}
 			layout
 		>
 			<div>
-				<h4 className="mb-1 font-mono font-semibold text-foreground text-lg">
+				<h4 className="pb-2 text-center font-mono font-semibold text-foreground text-sm">
 					{title}
 				</h4>
 			</div>
-
+			<div className="flex-1 overflow-hidden">
-			<AnimatePresence>
+				<ScrollArea className="h-full w-full">
-				{isHovered && (
+					<ul className="grid grid-cols-3 gap-2 p-1">
-					<motion.div
+						{options.map((option) => (
-						initial={{ opacity: 0, y: 20 }}
+							<li
-						animate={{ opacity: 1, y: 0 }}
+								key={option.id}
-						exit={{ opacity: 0, y: -20 }}
+								title={option.name}
-						transition={{ duration: 0.2 }}
+								className="flex items-center justify-center"
-						className="absolute inset-0 bg-card/90 p-3 backdrop-blur-sm"
+							>
-					>
+								{option.icon.startsWith("/") ? (
-						<ScrollArea className="h-full">
+									<Image
-							<ul className="grid grid-cols-3 gap-2 p-1">
+										src={option.icon}
-								{options.map((option) => (
+										alt={option.name}
-									<li
+										width={24}
-										key={option.id}
+										height={24}
-										title={option.name}
+										className="h-6 w-6 object-contain"
-										className="flex items-center justify-center"
+									/>
-									>
+								) : (
-										{option.icon.startsWith("/") ? (
+									<span className="flex h-6 w-6 items-center justify-center text-2xl">
-											<Image
+										{option.icon}
-												src={option.icon}
+									</span>
-												alt={option.name}
+								)}
-												width={24}
+							</li>
-												height={24}
+						))}
-												className="object-contain "
+					</ul>
-											/>
+				</ScrollArea>
-										) : (
+			</div>
-											<span className="text-2xl">{option.icon}</span>
-										)}
-									</li>
-								))}
-							</ul>
-						</ScrollArea>
-					</motion.div>
-				)}
-			</AnimatePresence>
 		</motion.div>
 	);
 };