Matiss/Nemia-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

product

Browse Source
This commit is contained in:
Matiss Jurevics
2026-01-07 18:22:50 +00:00
commit abab9c2673
23 changed files with 2724 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
components/HowItWorks.tsx Normal file
View File

@@ -0,0 +1,116 @@
import React from 'react';
import { MoreHorizontal, ChevronRight, Plus, Globe, Book } from 'lucide-react';
const HowItWorks: React.FC = () => {
return (
<section id="how-it-works" className="py-24 bg-[#0A0C12] overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center">
{/* Text Content */}
<div className="order-2 lg:order-1">
<h2 className="text-3xl lg:text-4xl font-display font-bold mb-6 text-white">
Your Pocket Tutor. <br />
<span className="text-primary">Always Ready.</span>
</h2>
<div className="space-y-8 mt-10">
<div className="flex gap-4">
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 font-bold">
1
</div>
<div>
<h4 className="text-lg font-bold text-white mb-2">Build Your Library</h4>
<p className="text-gray-400">Create decks manually, use AI prompts, or import shared decks from friends via unique codes.</p>
</div>
</div>
<div className="flex gap-4">
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-emerald-400 font-bold">
2
</div>
<div>
<h4 className="text-lg font-bold text-white mb-2">Configure Focus Mode</h4>
<p className="text-gray-400">On Android, select distracting apps to block. They'll stay locked until you complete your daily reviews.</p>
</div>
</div>
<div className="flex gap-4">
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-purple-900/30 flex items-center justify-center text-purple-400 font-bold">
3
</div>
<div>
<h4 className="text-lg font-bold text-white mb-2">Study & Sync</h4>
<p className="text-gray-400">Review cards using SRS. Your progress syncs to the cloud automatically, even after studying offline.</p>
</div>
</div>
</div>
</div>
{/* Visual Mockups */}
<div className="order-1 lg:order-2 relative">
<div className="relative w-full aspect-square max-w-md mx-auto">
{/* Back Card Ghost */}
<div className="absolute top-0 right-0 w-3/4 bg-surface-dark opacity-30 rounded-2xl h-64 transform rotate-6 translate-x-4 border border-gray-700"></div>
{/* Main Flashcard */}
<div className="absolute top-8 right-8 w-3/4 bg-surface-dark rounded-2xl shadow-2xl p-6 border border-gray-700 transform -rotate-3 z-10">
<div className="flex justify-between items-center mb-6">
<span className="text-gray-400 text-xs uppercase tracking-widest">Korean Vocab</span>
<MoreHorizontal size={20} className="text-gray-400" />
</div>
<div className="h-24 flex items-center justify-center text-center">
<h3 className="text-2xl font-bold text-white">억울하다</h3>
</div>
<div className="border-t border-gray-700 my-4"></div>
<p className="text-gray-300 text-center mb-6">To feel wronged / To feel unfair</p>
<div className="grid grid-cols-2 gap-3">
<button className="bg-red-500/20 text-red-400 py-2 rounded-lg text-sm font-medium hover:bg-red-500/30 transition-colors">Again</button>
<button className="bg-orange-500/20 text-orange-400 py-2 rounded-lg text-sm font-medium hover:bg-orange-500/30 transition-colors">Hard</button>
<button className="bg-green-500/20 text-green-400 py-2 rounded-lg text-sm font-medium hover:bg-green-500/30 transition-colors">Good</button>
<button className="bg-primary/20 text-primary py-2 rounded-lg text-sm font-medium hover:bg-primary/30 transition-colors">Easy</button>
</div>
</div>
{/* My Decks List Card (Overlapping) */}
<div className="absolute bottom-0 left-0 w-3/4 bg-surface-dark rounded-2xl shadow-2xl p-5 border border-gray-700 z-20">
<h4 className="font-bold text-lg mb-4 text-white">My Decks</h4>
<div className="space-y-3">
<div className="bg-gradient-to-r from-purple-500/10 to-blue-500/10 p-3 rounded-lg border border-purple-500/20 flex items-center justify-between">
<div className="flex items-center gap-3">
<Book size={20} className="text-purple-400" />
<div>
<p className="font-bold text-sm text-white">Maths</p>
<p className="text-xs text-gray-500">4 cards • <span className="text-primary">2 due</span></p>
</div>
</div>
<ChevronRight size={16} className="text-gray-400" />
</div>
<div className="bg-gradient-to-r from-emerald-500/10 to-teal-500/10 p-3 rounded-lg border border-emerald-500/20 flex items-center justify-between">
<div className="flex items-center gap-3">
<Globe size={20} className="text-emerald-400" />
<div>
<p className="font-bold text-sm text-white">Geography</p>
<p className="text-xs text-gray-500">2 cards • <span className="text-primary">2 due</span></p>
</div>
</div>
<ChevronRight size={16} className="text-gray-400" />
</div>
</div>
<div className="absolute -bottom-5 -right-5">
<button className="w-12 h-12 bg-primary rounded-full shadow-lg flex items-center justify-center text-gray-900 hover:scale-110 transition-transform">
<Plus size={24} />
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default HowItWorks;