87 lines
3.7 KiB
TypeScript
87 lines
3.7 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { Smartphone, Sparkles, Clock } from 'lucide-react';
|
|
import { animate, stagger } from 'animejs';
|
|
|
|
const Features: React.FC = () => {
|
|
const gridRef = useRef<HTMLDivElement>(null);
|
|
const [hasAnimated, setHasAnimated] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting && !hasAnimated && gridRef.current) {
|
|
animate(gridRef.current.children, {
|
|
translateY: [50, 0],
|
|
opacity: [0, 1],
|
|
delay: stagger(200),
|
|
easing: 'outElastic(1, .6)',
|
|
duration: 800
|
|
});
|
|
setHasAnimated(true);
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
if (gridRef.current) {
|
|
observer.observe(gridRef.current);
|
|
}
|
|
|
|
return () => observer.disconnect();
|
|
}, [hasAnimated]);
|
|
|
|
return (
|
|
<section id="features" className="py-24 bg-background-dark">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<h2 className="text-3xl lg:text-4xl font-display font-bold mb-4 text-white">
|
|
Designed for Radical Retention
|
|
</h2>
|
|
<p className="text-gray-400 text-lg">
|
|
We combine the science of Spaced Repetition with the psychology of habit formation.
|
|
</p>
|
|
</div>
|
|
|
|
<div ref={gridRef} className="grid md:grid-cols-3 gap-8">
|
|
{/* Feature 1 */}
|
|
<div className="opacity-0 bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
|
|
<div className="w-14 h-14 bg-indigo-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<Smartphone className="text-indigo-400" size={30} />
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3 text-white">Focus Mode (Android)</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
Blocks social media and games when cards are due. Complete your daily goal to unlock them automatically.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature 2 */}
|
|
<div className="opacity-0 bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
|
|
<div className="w-14 h-14 bg-primary/20 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<Sparkles className="text-emerald-400" size={30} />
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3 text-white">AI Generation</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
Generate decks using ChatGPT, Claude, or Gemini. Copy custom prompts and import JSON cards instantly.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature 3 */}
|
|
<div className="opacity-0 bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
|
|
<div className="w-14 h-14 bg-pink-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<Clock className="text-pink-400" size={30} />
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3 text-white">Cloud Sync & Offline</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
Study anywhere. Your decks and progress sync across devices automatically with full offline support.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Features; |