Spaces:
Sleeping
Sleeping
File size: 4,235 Bytes
3ecd1bf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import { useState } from 'react';
const WelcomeScreen = ({ onGetStarted }) => {
return (
<div className="h-full flex flex-col items-center justify-center p-8 bg-gradient-to-br from-blue-50 to-indigo-100">
<div className="max-w-lg text-center space-y-6">
<div className="space-y-4">
<h1 className="text-4xl font-bold text-gray-900">
Welcome to SokratesAI
</h1>
<p className="text-lg text-gray-600 leading-relaxed">
Master complex documents without the overwhelm.
Your document becomes your tutor, questioning you to deepen understanding.
</p>
</div>
<div className="space-y-6">
<div className="text-sm text-gray-700">
<h3 className="font-semibold text-gray-900 mb-3">How it works:</h3>
<div className="space-y-2">
<div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-blue-500 rounded-full mt-1.5"></div>
<span>Document appears highlighted in digestible sections</span>
</div>
<div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-green-500 rounded-full mt-1.5"></div>
<span>AI tutor questions <em>you</em> about each chunk</span>
</div>
<div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-purple-500 rounded-full mt-1.5"></div>
<span>Progress only when you truly understand</span>
</div>
</div>
</div>
<div className="text-sm text-gray-600 bg-gray-50 p-4 rounded-lg">
<div className="grid grid-cols-2 gap-4">
<div className="flex items-center space-x-2">
<div className="p-1.5 rounded-full bg-green-100">
<svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
</div>
<span>Master current topic</span>
</div>
<div className="flex items-center space-x-2">
<div className="p-1.5 rounded-full bg-gray-100">
<svg className="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
<path fillRule="evenodd" d="M12.293 14.707a1 1 0 010-1.414L15.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
</div>
<span>Focus elsewhere</span>
</div>
<div className="flex items-center space-x-2">
<div className="p-1.5 rounded-full bg-gray-100">
<svg className="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
</div>
<span>Review previous sections</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-6 h-2 bg-blue-200 rounded-full overflow-hidden">
<div className="w-2/3 h-full bg-blue-500 rounded-full"></div>
</div>
<span>Track your journey</span>
</div>
</div>
</div>
</div>
<button
onClick={onGetStarted}
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-8 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl"
>
Let's Start
</button>
</div>
</div>
);
};
export default WelcomeScreen; |