Files
SweetHome/app/components/home/FeaturesOurCompany.js

22 lines
906 B
JavaScript

import { motion } from "framer-motion";
export default function FeaturesOurCompany({ icon, title, discripction }) {
return (
<>
<motion.div
className="group bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: false }}
transition={{ duration: 0.5, delay: 0.1 }}
whileHover={{ y: -4 }}
>
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center group-hover:bg-amber-200 transition-colors duration-300">{icon}</div>
<h3 className="text-lg font-bold text-gray-900">{title}</h3>
</div>
<p className="text-gray-600 text-sm leading-relaxed">{discripction}</p>
</motion.div>
</>
);
}