feat(lessons): add new lessons for english section

src/components/lessons/useScrollReveal.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+
+/**
+ * Observes all `.scroll-reveal` elements in the DOM and adds the `revealed`
+ * class when they scroll into view. Works with the stagger-1 … stagger-10
+ * utility classes defined in index.css for sequenced entrance animations.
+ *
+ * Call once at the top of a lesson component:
+ *   useScrollReveal();
+ */
+export default function useScrollReveal() {
+  useEffect(() => {
+    const sel = [
+      '.scroll-reveal:not(.revealed)',
+      '.scroll-reveal-left:not(.revealed)',
+      '.scroll-reveal-right:not(.revealed)',
+      '.scroll-reveal-scale:not(.revealed)',
+    ].join(',');
+    const els = document.querySelectorAll(sel);
+    if (!els.length) return;
+
+    const obs = new IntersectionObserver(
+      entries =>
+        entries.forEach(e => {
+          if (e.isIntersecting) {
+            e.target.classList.add('revealed');
+            obs.unobserve(e.target);
+          }
+        }),
+      { threshold: 0.12, rootMargin: '0px 0px -60px 0px' },
+    );
+
+    els.forEach(el => obs.observe(el));
+    return () => obs.disconnect();
+  }, []);
+}