feat(website): enhance transitions and styles

web/src/app/globals.css

@@ -64,7 +64,7 @@
 }
 
 :root {
-	--radius: 0.3rem;
+	--radius: 0.75rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.141 0.005 285.823);
 	--card: oklch(1 0 0);
@@ -140,3 +140,21 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+@layer utilities {
+	.hover-lift {
+		@apply transition-transform duration-300 hover:-translate-y-1;
+	}
+
+	.soft-shadow {
+		@apply shadow-[0_8px_30px_rgba(0,0,0,0.06)];
+	}
+
+	.card-hover {
+		@apply transition-all duration-300 hover:shadow-md;
+	}
+
+	.glass-effect {
+		@apply backdrop-blur-sm;
+	}
+}

web/src/app/icons/components.tsx

@@ -46,11 +46,11 @@ export function IconSearch({ icons, initialQuery = "" }: IconSearchProps) {
 	return (
 		<>
 			<div className="relative w-full max-w-md">
-				<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+				<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground transition-all duration-300" />
 				<Input
 					type="search"
 					placeholder="Search icons by name, aliases, or categories..."
-					className="w-full pl-8"
+					className="w-full pl-8 transition-all duration-300 text-sm md:text-base"
 					value={searchQuery}
 					onChange={(e) => handleSearch(e.target.value)}
 				/>

web/src/app/icons/components/icon-search.tsx

@@ -109,11 +109,11 @@ export function IconSearch({ icons }: IconSearchProps) {
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ duration: 0.5 }}
 			>
-				<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+				<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground transition-all duration-300" />
 				<Input
 					type="search"
 					placeholder="Search icons by name, aliases, or categories..."
-					className="w-full pl-8 cursor-text"
+					className="w-full pl-8 cursor-text transition-all duration-300 text-sm md:text-base"
 					value={searchQuery}
 					onChange={(e) => handleSearch(e.target.value)}
 				/>