knuthtimo-lab
1a85f0eb2d
Sets up the project structure with Vite, React, and essential libraries like GSAP and Framer Motion. Configures Tailwind CSS for styling, including dark mode and custom color schemes. Includes basic component structure for the application, laying the groundwork for UI development.
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; |