82 lines
3.6 KiB
TypeScript
82 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const Features: React.FC = () => {
|
|
const features = [
|
|
{
|
|
icon: 'verified_user',
|
|
title: 'Certified Experts',
|
|
desc: 'Our team holds top-tier certifications from Microsoft, Cisco, and AWS, ensuring you get world-class expertise.',
|
|
color: 'blue'
|
|
},
|
|
{
|
|
icon: 'rocket_launch',
|
|
title: 'Rapid Response',
|
|
desc: 'Time is money. We guarantee a 15-minute initial response time for critical issues to keep you moving.',
|
|
color: 'purple'
|
|
},
|
|
{
|
|
icon: 'handshake',
|
|
title: 'Dedicated Partnership',
|
|
desc: "We don't just fix computers; we align IT strategy with your business goals for long-term success.",
|
|
color: 'emerald'
|
|
}
|
|
];
|
|
|
|
const getColorClasses = (color: string) => {
|
|
switch(color) {
|
|
case 'blue': return 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400';
|
|
case 'purple': return 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400';
|
|
case 'emerald': return 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400';
|
|
default: return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<motion.section
|
|
id="features"
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
className="py-24 bg-white dark:bg-[#0f0f0f] border-t border-gray-100 dark:border-white/5"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="mb-16 text-center">
|
|
<span className="text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-500 mb-2 block">Why Choose Us</span>
|
|
<h2 className="font-display text-3xl md:text-4xl text-gray-900 dark:text-white">
|
|
Built on trust. <span className="text-gray-400 dark:text-gray-600">Driven by excellence.</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{features.map((feature, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
|
whileHover={{ y: -10, boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" }}
|
|
className="p-8 border border-gray-200 dark:border-white/10 rounded-xl bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 hover:border-blue-400 dark:hover:border-blue-400 transition-colors duration-300 group"
|
|
>
|
|
<motion.div
|
|
whileHover={{ rotate: 360, scale: 1.1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className={`w-12 h-12 rounded-full flex items-center justify-center mb-6 ${getColorClasses(feature.color)}`}
|
|
>
|
|
<span className="material-symbols-outlined text-2xl">{feature.icon}</span>
|
|
</motion.div>
|
|
<h3 className="text-xl font-display font-bold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{feature.title}</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
{feature.desc}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
};
|
|
|
|
export default Features; |