diff options
Diffstat (limited to 'src/pages/index.tsx')
| -rw-r--r-- | src/pages/index.tsx | 258 |
1 files changed, 199 insertions, 59 deletions
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 48fa46e..7b66f5d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,92 +1,232 @@ import { Link } from "waku"; +import { getContextData } from "waku/middleware/context"; +import { ArrowRightIcon, BookOpenIcon, BrainIcon, LanguagesIcon, GraduationCapIcon } from "lucide-react"; import { Progress } from "@/components/ui/progress"; -import { getContextData } from "waku/middleware/context"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; +import Navbar from "@/components/Navbar"; type LanguageChoice = "th" | "en" | "zh" | "ja" | "es" | "fr"; -type LangMeta = { flag: string; name: string }; +type LangMeta = { flag: string; name: string; level?: string; progress?: number; totalCards?: number; dueCards?: number }; + const langs: Record<LanguageChoice, LangMeta> = { - th: { flag: "🇹ðŸ‡", name: "Thai" }, - en: { flag: "🇬🇧", name: "English" }, - zh: { flag: "🇨🇳", name: "Chinese" }, - ja: { flag: "🇯🇵", name: "Japanese" }, - es: { flag: "🇪🇸", name: "Spanish" }, - fr: { flag: "🇫🇷", name: "French" }, + th: { flag: "🇹ðŸ‡", name: "Thai", level: "Beginner", progress: 32, totalCards: 245, dueCards: 12 }, + en: { flag: "🇬🇧", name: "English", level: "Advanced", progress: 87, totalCards: 542, dueCards: 5 }, + zh: { flag: "🇨🇳", name: "Chinese", level: "Intermediate", progress: 59, totalCards: 378, dueCards: 8 }, + ja: { flag: "🇯🇵", name: "Japanese", level: "Beginner", progress: 23, totalCards: 198, dueCards: 15 }, + es: { flag: "🇪🇸", name: "Spanish", level: "Not Started", progress: 0, totalCards: 312, dueCards: 0 }, + fr: { flag: "🇫🇷", name: "French", level: "Not Started", progress: 0, totalCards: 289, dueCards: 0 }, }; export default async function HomePage() { - const { user } = getContextData(); + const { user } = getContextData() as any; + + // Get due cards count for the progress badge + const totalDueCards = Object.values(langs) + .reduce((sum, lang) => sum + (lang.dueCards || 0), 0); return ( <div className="min-h-screen bg-gray-50"> - <header className="bg-white shadow-sm sticky top-0 z-50"> + <Navbar user={user} /> + + {/* Hero section */} + <section className="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white py-16"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> - <div className="flex justify-between items-center h-16"> - <div className="flex items-center"> - <h1 className="text-2xl font-bold text-indigo-600">Prosody</h1> + <div className="flex flex-col md:flex-row items-center"> + <div className="md:w-1/2 mb-8 md:mb-0"> + <h1 className="text-4xl md:text-5xl font-bold leading-tight mb-4"> + Master Languages with Sorlang + </h1> + <p className="text-lg md:text-xl mb-6 text-indigo-100"> + Boost your language learning with our scientifically proven spaced repetition system. Track progress, analyze text, and learn efficiently. + </p> + <div className="flex flex-wrap gap-4"> + <Link to="/study"> + <Button size="lg" className="bg-white text-indigo-700 hover:bg-indigo-50"> + Start Learning + <ArrowRightIcon className="ml-2 h-4 w-4" /> + </Button> + </Link> + <Link to="/parse"> + <Button size="lg" variant="outline" className="border-white text-white hover:bg-indigo-600"> + Analyze Text + </Button> + </Link> + </div> + </div> + <div className="md:w-1/2"> + <div className="flex justify-center"> + <div className="relative"> + <div className="absolute -top-4 -left-4 bg-indigo-500 text-white p-3 rounded-lg shadow-lg"> + 🇹🇠+ </div> + <div className="absolute top-8 -right-4 bg-indigo-500 text-white p-3 rounded-lg shadow-lg"> + 🇨🇳 + </div> + <div className="absolute -bottom-4 -left-4 bg-indigo-500 text-white p-3 rounded-lg shadow-lg"> + 🇯🇵 + </div> + <div className="absolute -bottom-4 right-4 bg-indigo-500 text-white p-3 rounded-lg shadow-lg"> + 🇬🇧 + </div> + <div className="bg-white rounded-xl p-8 shadow-xl"> + <div className="text-indigo-700 text-6xl font-bold mb-2"> + SRS + </div> + <div className="text-gray-600"> + Spaced Repetition System + </div> + </div> + </div> + </div> </div> - - {/* Desktop Navigation */} - <nav className="hidden md:flex space-x-8"> - <Link to="/"> - <button - className={`py-2 font-medium text-indigo-600 border-b-2 border-indigo-600`} - > - Home - </button> - </Link> - <Link to="/parse"> - <button - className={`py-2 font-medium text-gray-600 hover:text-indigo-600`} - > - Analyze Text - </button> - </Link> - </nav> </div> </div> - - {/* Mobile Navigation */} - </header> - <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> - <h2 className="text-lg"> Your Languages</h2> - <LanguageItem lang="en" /> - <LanguageItem lang="th" /> - <LanguageItem lang="zh" /> - <LanguageItem lang="ja" /> + </section> + + {/* Feature highlights */} + <section className="py-12 bg-white"> + <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> + <div className="text-center mb-12"> + <h2 className="text-3xl font-bold text-gray-900 mb-4">Learning Features</h2> + <p className="text-lg text-gray-600 max-w-3xl mx-auto"> + Tools designed to accelerate your language learning journey + </p> + </div> + + <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> + <Card> + <CardHeader> + <div className="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-2"> + <BrainIcon className="h-6 w-6 text-indigo-600" /> + </div> + <CardTitle>Spaced Repetition</CardTitle> + <CardDescription> + Optimized review schedule based on your performance + </CardDescription> + </CardHeader> + <CardContent> + <p className="text-gray-600"> + Our SRS algorithm determines the optimal time for you to review each card, helping you memorize efficiently. + </p> + </CardContent> + </Card> + + <Card> + <CardHeader> + <div className="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-2"> + <LanguagesIcon className="h-6 w-6 text-indigo-600" /> + </div> + <CardTitle>Text Analysis</CardTitle> + <CardDescription> + Break down complex text into manageable pieces + </CardDescription> + </CardHeader> + <CardContent> + <p className="text-gray-600"> + Parse any text to analyze grammar, vocabulary, and patterns to enhance your understanding. + </p> + </CardContent> + </Card> + + <Card> + <CardHeader> + <div className="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-2"> + <GraduationCapIcon className="h-6 w-6 text-indigo-600" /> + </div> + <CardTitle>Progress Tracking</CardTitle> + <CardDescription> + Monitor your learning journey with detailed statistics + </CardDescription> + </CardHeader> + <CardContent> + <p className="text-gray-600"> + Track your progress across different languages, see your mastery level, and identify areas for improvement. + </p> + </CardContent> + </Card> + </div> + </div> + </section> + + {/* Languages section */} + <section className="py-12 bg-gray-50"> + <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> + <div className="flex justify-between items-center mb-8"> + <h2 className="text-2xl font-bold text-gray-900">Your Languages</h2> + {totalDueCards > 0 && ( + <div className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium"> + {totalDueCards} cards due for review + </div> + )} + </div> + + <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> + {Object.entries(langs).map(([langCode, langData]) => ( + <LanguageItem + key={langCode} + lang={langCode as LanguageChoice} + langData={langData} + /> + ))} + </div> + + <div className="text-center mt-8"> + <Link to="/study"> + <Button size="lg" className="bg-indigo-600 hover:bg-indigo-700"> + <BookOpenIcon className="mr-2 h-4 w-4" /> + Go to Study Dashboard + </Button> + </Link> + </div> + </div> </section> </div> ); } -const getData = async () => { - const data = { - title: "Waku", - headline: "Waku", - body: "Hello world!", - }; - - return data; -}; - export const getConfig = async () => { return { render: "dynamic", } as const; }; -async function LanguageItem({ lang }: { lang: LanguageChoice }) { +function LanguageItem({ lang, langData }: { lang: LanguageChoice, langData: LangMeta }) { return ( <Link to={`/lang/${lang}`}> - <div className="bg-white rounded-xl h-32 shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"> - <div className="p-6"> - <div className="flex"> - <div className="text-lg">{langs[lang].flag}</div> - <div className="text-lg">{langs[lang].name}</div> + <Card className="hover:shadow-md transition-shadow duration-300 h-full"> + <CardHeader className="pb-2"> + <div className="flex items-center justify-between"> + <div className="flex items-center gap-3"> + <div className="text-3xl">{langData.flag}</div> + <div> + <CardTitle>{langData.name}</CardTitle> + <CardDescription>{langData.level}</CardDescription> + </div> + </div> + {langData.dueCards > 0 && ( + <div className="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium"> + {langData.dueCards} due + </div> + )} </div> - <Progress value={50} className="w-[60%]" /> - </div> - </div> + </CardHeader> + <CardContent> + <div className="mb-2"> + <Progress value={langData.progress} className="h-2" /> + <div className="flex justify-between mt-1 text-xs text-gray-500"> + <span>{langData.progress}% complete</span> + <span>{langData.totalCards} cards</span> + </div> + </div> + </CardContent> + <CardFooter className="pt-0"> + <Button variant="outline" className="w-full"> + {langData.progress > 0 ? "Continue Learning" : "Start Learning"} + </Button> + </CardFooter> + </Card> </Link> ); } |