From aa037e07ca602c7be0d2e44e53ed95e2516be4b3 Mon Sep 17 00:00:00 2001
From: Aman Varshney <amanvarshney.work@gmail.com>
Date: Tue, 20 May 2025 13:52:03 +0530
Subject: [PATCH] fix feature card

---
 .../app/(home)/_components/FeatureCard.tsx    | 74 ++++++++-----------
 1 file changed, 30 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/app/(home)/_components/FeatureCard.tsx b/apps/web/src/app/(home)/_components/FeatureCard.tsx
index f6daf37..cf6ec0c 100644
--- a/apps/web/src/app/(home)/_components/FeatureCard.tsx
+++ b/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>
-
-			<AnimatePresence>
-				{isHovered && (
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{ opacity: 0, y: -20 }}
-						transition={{ duration: 0.2 }}
-						className="absolute inset-0 bg-card/90 p-3 backdrop-blur-sm"
-					>
-						<ScrollArea className="h-full">
-							<ul className="grid grid-cols-3 gap-2 p-1">
-								{options.map((option) => (
-									<li
-										key={option.id}
-										title={option.name}
-										className="flex items-center justify-center"
-									>
-										{option.icon.startsWith("/") ? (
-											<Image
-												src={option.icon}
-												alt={option.name}
-												width={24}
-												height={24}
-												className="object-contain "
-											/>
-										) : (
-											<span className="text-2xl">{option.icon}</span>
-										)}
-									</li>
-								))}
-							</ul>
-						</ScrollArea>
-					</motion.div>
-				)}
-			</AnimatePresence>
+			<div className="flex-1 overflow-hidden">
+				<ScrollArea className="h-full w-full">
+					<ul className="grid grid-cols-3 gap-2 p-1">
+						{options.map((option) => (
+							<li
+								key={option.id}
+								title={option.name}
+								className="flex items-center justify-center"
+							>
+								{option.icon.startsWith("/") ? (
+									<Image
+										src={option.icon}
+										alt={option.name}
+										width={24}
+										height={24}
+										className="h-6 w-6 object-contain"
+									/>
+								) : (
+									<span className="flex h-6 w-6 items-center justify-center text-2xl">
+										{option.icon}
+									</span>
+								)}
+							</li>
+						))}
+					</ul>
+				</ScrollArea>
+			</div>
 		</motion.div>
 	);
 };