59 lines
1.9 KiB
JavaScript
59 lines
1.9 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 CoursesSection() {
|
|
const shouldReduce = useReducedMotion();
|
|
|
|
if (shouldReduce) {
|
|
return (
|
|
<section className="section-padding bg-nest-light-gray">
|
|
<div className="container-custom">
|
|
<div className="bg-white p-12 rounded-lg shadow-sm">
|
|
<h3 className="text-3xl font-bold mb-6">
|
|
Official NestJS Courses
|
|
</h3>
|
|
<p className="text-nest-gray mb-8 leading-relaxed max-w-2xl">
|
|
Learn from the creators of NestJS. Our comprehensive courses will teach you everything you need to know to build production-ready applications.
|
|
</p>
|
|
<button className="btn-primary">
|
|
Get started
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<motion.section
|
|
{...fadeUpPreset(0.1, 1.0)}
|
|
className="section-padding bg-nest-light-gray"
|
|
>
|
|
<div className="container-custom">
|
|
<motion.div
|
|
{...fadeUpPreset(0.2, 0.8)}
|
|
className="bg-white p-12 rounded-lg shadow-sm"
|
|
>
|
|
<h3 className="text-3xl font-bold mb-6">
|
|
Official NestJS Courses
|
|
</h3>
|
|
<p className="text-nest-gray mb-8 leading-relaxed max-w-2xl">
|
|
Learn from the creators of NestJS. Our comprehensive courses will teach you everything you need to know to build production-ready applications.
|
|
</p>
|
|
<button className="btn-primary">
|
|
Get started
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
}
|
|
|
|
export default CoursesSection; |