100 lines
3.3 KiB
JavaScript
100 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
|
|
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 Features() {
|
|
const shouldReduce = useReducedMotion();
|
|
|
|
const features = [
|
|
{
|
|
icon: (
|
|
<svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
|
|
<path d="M20 20h60v60H20z" stroke="#333" strokeWidth="2" fill="none"/>
|
|
<path d="M30 30h40v40H30z" stroke="#333" strokeWidth="2" fill="none"/>
|
|
<path d="M40 40h20v20H40z" stroke="#333" strokeWidth="2" fill="none"/>
|
|
</svg>
|
|
),
|
|
title: "EXTENSIBLE",
|
|
description: "Provides unparalleled flexibility through its meticulously crafted modular architecture."
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
|
|
<path d="M50 10L80 30v40L50 90L20 70V30z" stroke="#e0234e" strokeWidth="2" fill="none"/>
|
|
<circle cx="50" cy="50" r="8" fill="#e0234e"/>
|
|
<path d="M35 35l30 30M65 35L35 65" stroke="#e0234e" strokeWidth="2"/>
|
|
</svg>
|
|
),
|
|
title: "VERSATILE",
|
|
description: "Serves as a robust, elegant, and well-structured foundation for all kinds of server-side applications."
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
|
|
<path d="M50 10L70 30L50 50L30 30z" fill="#333"/>
|
|
<path d="M30 50L50 70L70 50L50 30z" fill="#666"/>
|
|
<path d="M50 70L70 90L50 110L30 90z" fill="#333"/>
|
|
</svg>
|
|
),
|
|
title: "PROGRESSIVE",
|
|
description: "Introduces design patterns and well-established solutions to the Node.js landscape."
|
|
}
|
|
];
|
|
|
|
if (shouldReduce) {
|
|
return (
|
|
<section className="section-padding bg-nest-light-gray">
|
|
<div className="container-custom">
|
|
<div className="grid md:grid-cols-3 gap-12">
|
|
{features.map((feature, index) => (
|
|
<div key={index} className="text-center">
|
|
{feature.icon}
|
|
<h3 className="text-nest-red font-bold text-lg mb-4">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-nest-gray leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<motion.section
|
|
{...fadeUpPreset(0.1, 1.0)}
|
|
className="section-padding bg-nest-light-gray"
|
|
>
|
|
<div className="container-custom">
|
|
<div className="grid md:grid-cols-3 gap-12">
|
|
{features.map((feature, index) => (
|
|
<motion.div
|
|
key={index}
|
|
{...fadeUpPreset(index * 0.1, 0.8)}
|
|
className="text-center"
|
|
>
|
|
{feature.icon}
|
|
<h3 className="text-nest-red font-bold text-lg mb-4">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-nest-gray leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
}
|
|
|
|
export default Features; |