✨ style: ui enhancements

push.sh

@@ -37,13 +37,6 @@ type_emoji=${type}
 type=${type_emoji#* }
 emoji=${type_emoji% *}
 
-# Prompt the user to enter a scope (optional)
-read -p "Enter a scope (optional): " scope
-scope_part=""
-if [ -n "$scope" ]; then
-    scope_part="($scope)"
-fi
-
 # Prompt the user to enter a short description
 read -p "Enter a short description: " desc
 if [ -z "$desc" ]; then
@@ -54,13 +47,11 @@ fi
 read -p "Enter a longer description (optional): " long_desc
 
 # Create the commit message
-commit_msg="$emoji $type$scope_part: $desc"
+commit_msg="$emoji $type: $desc"
 
 # If a longer description was provided, add it to the commit message
 if [ -n "$long_desc" ]; then
-    commit_msg+="
-
-$long_desc"
+    commit_msg+="\n\n$long_desc"
 fi
 
 # Print the commit message to the console
@@ -83,4 +74,4 @@ if git push origin "$branch"; then
     echo -e "\033[1;32mChanges pushed to remote branch '$branch'.\033[0m"
 else
     error_exit "Push failed. Please check your connection or branch permissions."
-fi
+fi

src/components/home/FeatureCard.tsx

@@ -1,6 +1,6 @@
-import { motion } from 'framer-motion';
-import { LucideIcon } from 'lucide-react';
-import clsx from 'clsx'; // Optional, for cleaner class management
+import { motion } from "framer-motion";
+import { LucideIcon } from "lucide-react";
+import clsx from "clsx";
 
 interface FeatureCardProps {
   title: string;
@@ -12,41 +12,47 @@ interface FeatureCardProps {
 export function FeatureCard({ title, description, icon: Icon, delay = 0 }: FeatureCardProps) {
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
+      initial={{ opacity: 0, y: 30 }}
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.6, delay }}
       viewport={{ once: true }}
-      whileHover={{ y: -5 }}
+      whileHover={{ y: -8 }}
       className="relative group"
     >
       <div
         className={clsx(
-          'rounded-xl bg-white/90 backdrop-blur-lg p-8 ring-1 ring-gray-200 hover:ring-cornflower-blue transition-all shadow-xl hover:shadow-cornflower-blue/40 overflow-hidden flex flex-col justify-center items-center',
-          'hover:scale-105 transform transition-all duration-300'
+          "relative z-10 rounded-xl bg-white/80 backdrop-blur-md p-6 ring-1 ring-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl hover:ring-cornflower-blue overflow-hidden",
+          "flex flex-col items-center justify-center transform group-hover:scale-105"
         )}
         role="presentation"
       >
-        {/* Hover gradient overlay */}
-        <div className="absolute inset-0 bg-gradient-to-r from-cornflower-blue/0 to-cornflower-blue/0 group-hover:from-cornflower-blue/10 group-hover:to-cornflower-blue/20 transition-all ease-in-out" />
+        {/* Dynamic gradient overlay */}
+        <div className="absolute inset-0 z-0 bg-gradient-to-tr from-transparent to-cornflower-blue/10 group-hover:to-cornflower-blue/30 transition-all duration-500" />
 
-        {/* Icon centered with hover effect */}
-        <div className="mb-6 flex justify-center items-center">
+        {/* Icon with subtle hover animations */}
+        <div className="relative mb-4 flex justify-center items-center">
           <Icon
-            className="h-12 w-12 text-cornflower-blue transition-all transform group-hover:scale-110 group-hover:rotate-3"
+            className="h-14 w-14 text-cornflower-blue transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6"
             aria-hidden="true"
           />
         </div>
 
-        {/* Title with enhanced typography */}
-        <h3 className="text-2xl font-semibold text-gray-800 mb-3 text-center capitalize leading-tight">
+        {/* Title with modern typography */}
+        <h3 className="text-xl font-bold text-gray-800 mb-2 text-center capitalize leading-snug tracking-wide">
           {title}
         </h3>
 
-        {/* Description with improved readability */}
-        <p className="text-lg text-gray-600 text-center mt-2 px-4">
+        {/* Description with optimized spacing and readability */}
+        <p className="text-base text-gray-600 text-center px-6">
           {description}
         </p>
       </div>
+
+      {/* Subtle floating shadow effect */}
+      <div
+        className="absolute -inset-1 bg-gradient-to-br from-cornflower-blue/10 to-transparent rounded-xl blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+        aria-hidden="true"
+      />
     </motion.div>
   );
 }