131 lines
4.7 KiB
JavaScript
131 lines
4.7 KiB
JavaScript
import React from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { Users, Target, Zap, Search, Shield, GraduationCap } from 'lucide-react';
|
|
|
|
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
|
initial: { opacity: 0, y: 20 },
|
|
whileInView: { opacity: 1, y: 0 },
|
|
viewport: { once: true, amount: 0.2 },
|
|
transition: { delay, duration, ease: "easeOut" }
|
|
});
|
|
|
|
function Services() {
|
|
const shouldReduce = useReducedMotion();
|
|
|
|
const services = [
|
|
{
|
|
icon: Users,
|
|
title: "DEVELOPMENT",
|
|
description: "Achieve your goals faster with Nest experts on your team tackling challenging issues right by your side."
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: "TECHNICAL GUIDANCE",
|
|
description: "Enable your team to get the most out of the technology. Ensure your solutions are secure and reliable."
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "MIGRATION ASSISTANCE",
|
|
description: "We provide a comprehensive migration assistance, ensuring you are using the latest and greatest."
|
|
},
|
|
{
|
|
icon: Search,
|
|
title: "IN-DEPTH CODE REVIEWS",
|
|
description: "Frequent code reviews can eliminate potentially hazardous bugs and issues at an early stage while enforcing best practices."
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "LONG-TERM SUPPORT (LTS)",
|
|
description: "Have peace of mind with Nest long-term support (LTS), priority fixes, upgrade assistance, and live troubleshooting."
|
|
},
|
|
{
|
|
icon: GraduationCap,
|
|
title: "TEAM TRAININGS",
|
|
description: "Level-up your team by having expert-led Nest trainings or workshops. Get everyone up-to-speed quickly."
|
|
}
|
|
];
|
|
|
|
if (shouldReduce) {
|
|
return (
|
|
<section className="section-padding bg-gray-50">
|
|
<div className="container-custom">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
|
How can we help you be successful?
|
|
</h2>
|
|
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
|
Nest Enterprise Consulting includes a broad range of services to empower your team.
|
|
We help you grow your business even long after our commitment is done.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{services.map((service, index) => {
|
|
const IconComponent = service.icon;
|
|
return (
|
|
<div key={index} className="text-center p-6">
|
|
<div className="w-16 h-16 bg-brand-red rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-600 leading-relaxed">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<motion.section
|
|
{...fadeUpPreset(0.1, 1.0)}
|
|
className="section-padding bg-gray-50"
|
|
>
|
|
<div className="container-custom">
|
|
<motion.div
|
|
{...fadeUpPreset(0.2, 1.0)}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
|
How can we help you be successful?
|
|
</h2>
|
|
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
|
Nest Enterprise Consulting includes a broad range of services to empower your team.
|
|
We help you grow your business even long after our commitment is done.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{services.map((service, index) => {
|
|
const IconComponent = service.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
{...fadeUpPreset(0.3 + index * 0.1, 0.8)}
|
|
className="text-center p-6"
|
|
>
|
|
<div className="w-16 h-16 bg-brand-red rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-600 leading-relaxed">
|
|
{service.description}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
}
|
|
|
|
export default Services; |