Homepage Redesign

frontend/src/pages/HomePage/FeatureCard.tsx

@@ -0,0 +1,35 @@
+import { motion } from 'framer-motion';
+
+interface FeatureCardProps {
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt: string;
+}
+
+export const FeatureCard = ({ title, description, imageSrc, imageAlt }: FeatureCardProps) => {
+  return (
+    <motion.div
+      className="group cursor-pointer"
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-50px' }}
+      transition={{ duration: 0.5 }}
+      whileHover={{ y: -5 }}
+    >
+      <div className="overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
+        <div className="relative h-56 overflow-hidden">
+          <img
+            src={imageSrc}
+            alt={imageAlt}
+            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+          />
+        </div>
+        <div className="bg-white p-6">
+          <h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3>
+          <p className="text-gray-600 leading-relaxed">{description}</p>
+        </div>
+      </div>
+    </motion.div>
+  );
+};