product

components/Features.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Smartphone, Sparkles, Clock } from 'lucide-react';
+
+const Features: React.FC = () => {
+  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 className="grid md:grid-cols-3 gap-8">
+          {/* Feature 1 */}
+          <div className="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="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="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;