Initial commit

src/components/KeepInTouch.js

@@ -0,0 +1,81 @@
+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;