Spaces:
Running
Running
File size: 5,012 Bytes
deb090d |
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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
import React from 'react';
import { motion } from 'framer-motion';
import FileUploader from './FileUploader';
import {
DocumentTextIcon,
ChatBubbleBottomCenterTextIcon,
LightBulbIcon,
AcademicCapIcon
} from '@heroicons/react/24/outline';
const WelcomeScreen = ({ onStartChat, onNewChat, darkMode }) => {
const suggestions = [
"What is depreciation in accounting?",
"Explain the concept of working capital",
"What are the different types of financial statements?",
"How do you calculate return on investment?"
];
const features = [
{
icon: DocumentTextIcon,
title: "Upload Documents",
description: "Upload PDFs, Word docs, and text files for instant analysis"
},
{
icon: ChatBubbleBottomCenterTextIcon,
title: "Ask Questions",
description: "Get detailed answers based on your uploaded study materials"
},
{
icon: LightBulbIcon,
title: "Smart Insights",
description: "AI-powered explanations tailored for CA exam preparation"
}
];
return (
<div className="min-h-screen flex flex-col items-center justify-center p-4">
<div className="max-w-4xl w-full">
{/* Hero Section */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-center mb-12"
>
<div className="mb-6">
<AcademicCapIcon className={`w-16 h-16 mx-auto mb-4 ${
darkMode ? 'text-primary-400' : 'text-primary-600'
}`} />
</div>
<h1 className="text-4xl md:text-6xl font-bold mb-6 gradient-text">
CA Study Assistant
</h1>
<p className={`text-xl md:text-2xl mb-8 ${
darkMode ? 'text-gray-300' : 'text-gray-600'
}`}>
Upload your study materials and get instant, intelligent answers
</p>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={onNewChat}
className="btn-primary px-8 py-4 rounded-xl text-lg font-semibold text-white shadow-lg"
>
Start New Conversation
</motion.button>
</motion.div>
{/* Features */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="grid md:grid-cols-3 gap-6 mb-12"
>
{features.map((feature, index) => (
<motion.div
key={index}
whileHover={{ y: -5 }}
className={`p-6 rounded-2xl ${
darkMode
? 'bg-gray-800 border-gray-700'
: 'bg-white border-gray-200'
} border shadow-lg`}
>
<feature.icon className={`w-8 h-8 mb-4 ${
darkMode ? 'text-primary-400' : 'text-primary-600'
}`} />
<h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
<p className={`${
darkMode ? 'text-gray-400' : 'text-gray-600'
}`}>
{feature.description}
</p>
</motion.div>
))}
</motion.div>
{/* File Upload Section */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.4 }}
className="mb-12"
>
<h2 className="text-2xl font-semibold text-center mb-6">
Upload Your Study Materials
</h2>
<FileUploader darkMode={darkMode} />
</motion.div>
{/* Suggestion Pills */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.6 }}
className="text-center"
>
<h3 className={`text-lg font-semibold mb-4 ${
darkMode ? 'text-gray-300' : 'text-gray-700'
}`}>
Try asking:
</h3>
<div className="flex flex-wrap justify-center gap-3">
{suggestions.map((suggestion, index) => (
<motion.button
key={index}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => onStartChat(suggestion)}
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
darkMode
? 'bg-gray-800 hover:bg-gray-700 text-gray-300 border-gray-700'
: 'bg-gray-100 hover:bg-gray-200 text-gray-700 border-gray-300'
} border`}
>
{suggestion}
</motion.button>
))}
</div>
</motion.div>
</div>
</div>
);
};
export default WelcomeScreen; |