81 lines
2.9 KiB
JavaScript
81 lines
2.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" }
|
||
});
|
||
|
||
const KeepInTouch = () => {
|
||
const shouldReduce = useReducedMotion();
|
||
|
||
const categories = [
|
||
'Ігри', 'Веб-браузер', 'Бізнес', 'Новини', 'Подкасти', 'Соціальні'
|
||
];
|
||
|
||
if (shouldReduce) {
|
||
return (
|
||
<section className="py-16 bg-linkedin-light-gray">
|
||
<div className="section-container">
|
||
<div className="max-w-2xl">
|
||
<h2 className="text-3xl lg:text-4xl font-light text-linkedin-text mb-6">
|
||
Зберігайте гостроту розуму за допомогою ігор
|
||
</h2>
|
||
<p className="text-linkedin-gray mb-8">
|
||
Щоденні головоломки та ігри допоможуть вам залишатися в тонусі та розвивати когнітивні здібності. Грайте самостійно або змагайтеся з колегами.
|
||
</p>
|
||
<div className="flex flex-wrap gap-3 mb-8">
|
||
{categories.map((category, index) => (
|
||
<button key={index} className="tag-button">
|
||
{category}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<motion.section
|
||
{...fadeUpPreset(0.1, 1.0)}
|
||
className="py-16 bg-linkedin-light-gray"
|
||
>
|
||
<div className="section-container">
|
||
<div className="max-w-2xl">
|
||
<motion.h2
|
||
{...fadeUpPreset(0.2, 1.0)}
|
||
className="text-3xl lg:text-4xl font-light text-linkedin-text mb-6"
|
||
>
|
||
Зберігайте гостроту розуму за допомогою ігор
|
||
</motion.h2>
|
||
<motion.p
|
||
{...fadeUpPreset(0.3, 1.0)}
|
||
className="text-linkedin-gray mb-8"
|
||
>
|
||
Щоденні головоломки та ігри допоможуть вам залишатися в тонусі та розвивати когнітивні здібності. Грайте самостійно або змагайтеся з колегами.
|
||
</motion.p>
|
||
<motion.div
|
||
{...fadeUpPreset(0.4, 1.0)}
|
||
className="flex flex-wrap gap-3 mb-8"
|
||
>
|
||
{categories.map((category, index) => (
|
||
<motion.button
|
||
key={index}
|
||
{...fadeUpPreset(0.5 + index * 0.1, 0.6)}
|
||
className="tag-button"
|
||
>
|
||
{category}
|
||
</motion.button>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</motion.section>
|
||
);
|
||
};
|
||
|
||
export default KeepInTouch; |