first commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitattributes copy

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,50 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+.Python
+env/
+venv/
+.env
+node_modules

Dockerfile

@@ -0,0 +1,57 @@
+FROM node:20-alpine AS base
+
+# Frontend build
+FROM base AS frontend-deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base AS frontend-builder
+WORKDIR /app
+COPY --from=frontend-deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+# Backend build
+FROM python:3.9-slim AS backend
+WORKDIR /backend
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY backend .
+
+# Final image
+FROM python:3.9-slim AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# Install Node.js and wget
+RUN apt-get update && apt-get install -y curl wget && \
+    curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
+    apt-get install -y nodejs && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+COPY --from=frontend-builder /app/public ./frontend/public
+COPY --from=frontend-builder --chown=nextjs:nodejs /app/.next/standalone ./frontend
+COPY --from=frontend-builder --chown=nextjs:nodejs /app/.next/static ./frontend/.next/static
+COPY --from=frontend-builder --chown=nextjs:nodejs /app/.next/cache ./frontend/.next/cache
+
+COPY --from=backend /backend ./backend
+COPY --from=backend /usr/local/lib/python3.9/site-packages /usr/local/lib/python3.9/site-packages
+
+COPY start.sh .
+RUN chmod +x start.sh
+
+EXPOSE 3000 8000
+
+CMD ["./start.sh"]

README copy.md

@@ -0,0 +1,9 @@
+---
+title: Playgo Next
+emoji: 🐢
+colorFrom: pink
+colorTo: yellow
+sdk: docker
+app_port: 3000
+pinned: false
+---

app/components/ChatBot.tsx

@@ -0,0 +1,234 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { useChat } from 'ai/react'
+
+type MessageWithLoading = {
+  content: string;
+  role: string;
+  isStreaming?: boolean;
+}
+
+const EXAMPLE_PROMPTS = [
+  {
+    title: "Personalized Learning",
+    description: "Get tailored explanations",
+    prompt: "Can you help me understand photosynthesis in a simple way?"
+  },
+  {
+    title: "24/7 Availability",
+    description: "Learn at your own pace",
+    prompt: "I need help solving this quadratic equation: x² + 5x + 6 = 0"
+  },
+  {
+    title: "Multiple Subjects",
+    description: "From math to literature",
+    prompt: "What are the main themes in Shakespeare's Macbeth?"
+  }
+]
+
+export default function LandingPageChatBot() {
+  const { messages: rawMessages, input, handleInputChange, handleSubmit, isLoading, append } = useChat({
+    api: '/api/landing_page_chat',
+    streamProtocol: 'data',
+    onError: (error) => {
+      console.error('Chat error:', error);
+    },
+    onFinish: (message) => {
+      console.log('Chat finished:', message);
+      setMessages(prev => prev.map(msg => ({...msg, isStreaming: false})))
+    },
+    keepLastMessageOnError: true,
+  })
+
+  const chatContainerRef = useRef<HTMLDivElement>(null)
+  const [hasInteracted, setHasInteracted] = useState(false)
+  const [messages, setMessages] = useState<MessageWithLoading[]>([])
+
+  useEffect(() => {
+    setMessages(rawMessages.map((msg, index) => ({
+      ...msg,
+      isStreaming: isLoading && index === rawMessages.length - 1 && msg.role === 'assistant'
+    })))
+  }, [rawMessages, isLoading])
+
+  const scrollToBottom = () => {
+    if (chatContainerRef.current) {
+      const { scrollHeight, clientHeight } = chatContainerRef.current
+      chatContainerRef.current.scrollTop = scrollHeight - clientHeight
+    }
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const sendMessage = async (text: string) => {
+    setHasInteracted(true)
+    await append({
+      content: text,
+      role: 'user',
+    })
+  }
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    setHasInteracted(true)
+    handleSubmit(e)
+  }
+
+  return (
+    <section className="w-full h-[800px] bg-gradient-to-b from-background-secondary to-background-primary flex items-center justify-center px-4">
+      <div className="w-full max-w-5xl mx-auto h-full flex items-center">
+        {!hasInteracted && messages.length === 0 ? (
+          <div className="text-center space-y-8 w-full">
+            <div className="space-y-4">
+              <h2 className="text-5xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                AI Learning Assistant
+              </h2>
+              <p className="text-text-secondary text-xl max-w-2xl mx-auto leading-relaxed">
+                Explore new topics, get homework help, or discover learning resources
+              </p>
+            </div>
+
+            <form onSubmit={onSubmit} className="max-w-3xl mx-auto">
+              <div className="relative flex items-center">
+                <input
+                  type="text"
+                  value={input}
+                  onChange={handleInputChange}
+                  placeholder="Ask anything about learning..."
+                  className="w-full p-6 pr-36 rounded-2xl border border-border/50 bg-background-primary/50 
+                           backdrop-blur-sm shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50 
+                           text-lg transition-all duration-200 placeholder:text-text-secondary/50"
+                />
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="absolute right-2 p-3 bg-primary text-white rounded-full
+                           hover:bg-primary/90 transition-all duration-200
+                           shadow-md hover:shadow-lg active:scale-95 disabled:opacity-50
+                           disabled:hover:bg-primary disabled:cursor-not-allowed"
+                >
+                  <svg 
+                    xmlns="http://www.w3.org/2000/svg" 
+                    fill="none" 
+                    viewBox="0 0 24 24" 
+                    strokeWidth="1.5" 
+                    stroke="currentColor" 
+                    className={`size-6 ${isLoading ? 'animate-pulse' : ''}`}
+                  >
+                    <path 
+                      strokeLinecap="round" 
+                      strokeLinejoin="round" 
+                      d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" 
+                    />
+                  </svg>
+                </button>
+              </div>
+            </form>
+
+            <div className="mt-12">
+              <h3 className="text-xl font-semibold text-text-primary mb-6">Try these examples:</h3>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {EXAMPLE_PROMPTS.map((prompt, index) => (
+                  <button
+                    key={index}
+                    onClick={() => sendMessage(prompt.prompt)}
+                    className="group p-6 rounded-2xl border border-border/50 bg-background-primary/30 
+                             hover:bg-background-primary/50 backdrop-blur-sm transition-all duration-200
+                             hover:border-primary/50 hover:shadow-lg text-left"
+                  >
+                    <div className="flex items-center justify-between mb-2">
+                      <h4 className="font-semibold text-text-primary">{prompt.title}</h4>
+                      <svg
+                        className="w-5 h-5 text-primary opacity-0 group-hover:opacity-100 transition-opacity duration-200" 
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </div>
+                    <p className="text-text-secondary text-sm mb-2">{prompt.description}</p>
+                    <p className="text-primary text-sm font-medium truncate">{prompt.prompt}</p>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="bg-background-primary/50 backdrop-blur-sm rounded-2xl shadow-lg border border-border/50 overflow-hidden w-full h-[700px] flex flex-col">
+            <div className="p-6 border-b border-border/50 bg-background-secondary/30">
+              <h2 className="text-xl font-semibold text-text-primary">AI Learning Assistant</h2>
+            </div>
+
+            <div
+              ref={chatContainerRef}
+              className="flex-1 overflow-y-auto p-6 space-y-6"
+            >
+              {messages.map((message, index) => (
+                <div
+                  key={index}
+                  className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+                >
+                  <div
+                    className={`max-w-[80%] p-4 rounded-2xl shadow-sm ${
+                      message.role === 'user'
+                        ? 'bg-primary text-white rounded-br-none'
+                        : 'bg-background-secondary/50 text-text-primary rounded-bl-none'
+                    }`}
+                  >
+                    {message.content}
+                    {message.isStreaming && (
+                      <span className="inline-block w-2.5 h-2.5 ml-1.5 bg-primary rounded-full animate-pulse" />
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="p-6 border-t border-border/50 bg-background-secondary/30">
+              <form onSubmit={onSubmit}>
+                <div className="relative flex items-center">
+                  <input
+                    type="text"
+                    value={input}
+                    onChange={handleInputChange}
+                    placeholder={isLoading ? "AI is thinking..." : "Type your message..."}
+                    disabled={isLoading}
+                    className="w-full p-4 pr-32 rounded-xl border border-border/50 bg-background-primary/50 
+                             backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-primary/50
+                             text-base transition-all duration-200 disabled:opacity-50"
+                  />
+                  <button
+                    type="submit"
+                    disabled={isLoading}
+                    className="absolute right-2 p-2 bg-primary text-white rounded-full
+                             hover:bg-primary/90 transition-all duration-200
+                             shadow-md hover:shadow-lg active:scale-95 disabled:opacity-50
+                             disabled:hover:bg-primary disabled:cursor-not-allowed"
+                  >
+                    <svg 
+                      xmlns="http://www.w3.org/2000/svg" 
+                      fill="none" 
+                      viewBox="0 0 24 24" 
+                      strokeWidth="1.5" 
+                      stroke="currentColor" 
+                      className={`size-5 ${isLoading ? 'animate-pulse' : ''}`}
+                    >
+                      <path 
+                        strokeLinecap="round" 
+                        strokeLinejoin="round" 
+                        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" 
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

app/components/ThemeProvider.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type Theme = 'light' | 'dark'
+
+type ThemeContextType = {
+  theme: Theme
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('light')
+
+  useEffect(() => {
+    // On mount, read theme from localStorage or default to light
+    const savedTheme = localStorage.getItem('theme') as Theme
+    if (savedTheme) {
+      setTheme(savedTheme)
+      document.documentElement.setAttribute('data-theme', savedTheme)
+    }
+  }, [])
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light'
+    setTheme(newTheme)
+    localStorage.setItem('theme', newTheme)
+    document.documentElement.setAttribute('data-theme', newTheme)
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+} 

app/globals.css

@@ -0,0 +1,49 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Light mode */
+  --background-primary: #ffffff;
+  --background-secondary: #f8f9fa;
+  --background-tertiary: #f1f3f5;
+
+  --text-primary: #171717;
+  --text-secondary: #4b5563;
+  --text-tertiary: #6b7280;
+
+  --border: #e5e7eb;
+  --border-secondary: #d1d5db;
+
+  --card-background: rgba(255, 255, 255, 0.8);
+  --card-border: rgba(229, 231, 235, 0.5);
+  --glass-background: rgba(255, 255, 255, 0.7);
+}
+
+[data-theme='dark'] {
+  /* Dark mode - updated for better contrast and aesthetics */
+  --background-primary: #0f172a;    /* Darker blue-gray */
+  --background-secondary: #1e293b;  /* Rich blue-gray */
+  --background-tertiary: #334155;   /* Medium blue-gray */
+
+  --text-primary: #f8fafc;         /* Very light blue-gray */
+  --text-secondary: #cbd5e1;       /* Light blue-gray */
+  --text-tertiary: #94a3b8;        /* Medium blue-gray */
+
+  --border: #334155;               /* Medium blue-gray */
+  --border-secondary: #475569;     /* Light blue-gray */
+
+  --card-background: rgba(30, 41, 59, 0.8);     /* Transparent blue-gray */
+  --card-border: rgba(51, 65, 85, 0.5);         /* Transparent border */
+  --glass-background: rgba(15, 23, 42, 0.7);    /* Transparent dark blue-gray */
+}
+
+body {
+  color: var(--text-primary);
+  background: var(--background-primary);
+}
+
+/* Add smooth transitions for theme switching */
+body * {
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}

app/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+import { ThemeProvider } from './components/ThemeProvider'
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "PlayGo AI - AI-Powered Learning Platform",
+  description: "Transform education with AI-powered interactive learning experiences",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={`${geistSans.variable}`}>
+      <body className="antialiased">
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,216 @@
+'use client'
+
+import Link from "next/link"
+import { useTheme } from './components/ThemeProvider'
+import { useEffect, useState } from 'react'
+import ChatBot from './components/ChatBot'
+
+export default function LandingPage() {
+  const { theme, toggleTheme } = useTheme()
+  const [message, setMessage] = useState('')
+
+  useEffect(() => {
+    // Call FastAPI endpoint
+    fetch('/api/hello')
+      .then(res => res.json())
+      .then(data => {setMessage(data.message); console.log('Fetched message:', data.message);})
+      .catch(err => console.error('Error fetching:', err))
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-background-primary">
+      {/* Modern Header */}
+      <header className="fixed w-full bg-background-secondary/80 backdrop-blur-sm border-b border-border z-50">
+        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
+          <Link href="/" className="text-3xl font-bold">
+            <span className="text-[#FF6B6B]">P</span>
+            <span className="text-[#4ECDC4]">l</span>
+            <span className="text-[#45B7D1]">a</span>
+            <span className="text-[#FDCB6E]">y</span>
+            <span className="text-[#FF6B6B]">G</span>
+            <span className="text-[#4ECDC4]">o</span>
+            <span className="ml-2 text-[#45B7D1]">A</span>
+            <span className="text-[#FDCB6E]">I</span>
+          </Link>
+          <nav className="flex items-center space-x-8">
+            <Link href="/for-teachers" className="text-text-secondary hover:text-primary">
+              For Teachers
+            </Link>
+            <Link href="/for-students" className="text-text-secondary hover:text-primary">
+              For Students
+            </Link>
+            <Link href="/community" className="text-text-secondary hover:text-primary">
+              Community
+            </Link>
+            <button 
+              onClick={toggleTheme}
+              className="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90"
+            >
+              {theme === 'light' ? '🌙' : '☀️'}
+            </button>
+          </nav>
+        </div>
+      </header>
+
+      {/* Add ChatBot right after header */}
+      <div className="pt-20">
+        <ChatBot />
+      </div>
+
+      <main className="pt-4">
+        {/* Hero Section */}
+        <section className="container mx-auto px-4 py-20 text-center">
+          <h1 className="text-6xl font-bold mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+            Turn learning into an AI-powered adventure
+          </h1>
+          <p className="text-text-secondary text-xl mb-12 max-w-2xl mx-auto">
+            PlayGo AI is the leading educational platform for building engaging AI-powered learning experiences
+          </p>
+          <div className="flex justify-center gap-4">
+            <Link 
+              href="/get-started" 
+              className="px-6 py-3 rounded-lg bg-primary text-white hover:bg-primary/90 font-medium"
+            >
+              Get Started
+            </Link>
+            <Link 
+              href="/demo" 
+              className="px-6 py-3 rounded-lg border border-border hover:border-primary text-text-primary font-medium"
+            >
+              View Demo
+            </Link>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="bg-background-secondary py-20">
+          <div className="container mx-auto px-4">
+            <h2 className="text-3xl font-bold text-center mb-16">Build with our powerful learning tools</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+              <div className="p-6 rounded-xl bg-background-primary">
+                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Interactive Learning</h3>
+                <p className="text-text-secondary">Engage with AI-powered quizzes, projects, and virtual labs</p>
+              </div>
+              
+              <div className="p-6 rounded-xl bg-background-primary">
+                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Diverse Subjects</h3>
+                <p className="text-text-secondary">Explore topics from STEM to humanities with expert AI guidance</p>
+              </div>
+
+              <div className="p-6 rounded-xl bg-background-primary">
+                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Personalized Path</h3>
+                <p className="text-text-secondary">Adaptive learning tailored to your unique pace and style</p>
+              </div>
+
+              <div className="p-6 rounded-xl bg-background-primary">
+                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Progress Tracking</h3>
+                <p className="text-text-secondary">Monitor learning outcomes with detailed analytics</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Stats Section */}
+        <section className="container mx-auto px-4 py-20">
+          <h2 className="text-3xl font-bold text-center mb-16">Trusted by educators worldwide</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+            <div>
+              <p className="text-4xl font-bold text-primary mb-2">500K+</p>
+              <p className="text-text-secondary">Active Students</p>
+            </div>
+            <div>
+              <p className="text-4xl font-bold text-primary mb-2">10K+</p>
+              <p className="text-text-secondary">Teachers</p>
+            </div>
+            <div>
+              <p className="text-4xl font-bold text-primary mb-2">1M+</p>
+              <p className="text-text-secondary">Learning Sessions</p>
+            </div>
+            <div>
+              <p className="text-4xl font-bold text-primary mb-2">50+</p>
+              <p className="text-text-secondary">Countries</p>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* Updated Educational Footer */}
+      <footer className="bg-background-secondary border-t border-border py-12">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="text-center md:text-left">
+              <h3 className="text-2xl font-bold mb-4">
+                <span className="text-[#FF6B6B]">P</span>
+                <span className="text-[#4ECDC4]">l</span>
+                <span className="text-[#45B7D1]">a</span>
+                <span className="text-[#FDCB6E]">y</span>
+                <span className="text-[#FF6B6B]">G</span>
+                <span className="text-[#4ECDC4]">o</span>
+                <span className="ml-2 text-[#45B7D1]">A</span>
+                <span className="text-[#FDCB6E]">I</span>
+              </h3>
+              <p className="text-text-secondary">Making learning fun and accessible for everyone</p>
+            </div>
+            
+            <div className="text-center">
+              <h3 className="font-semibold mb-4">Learning Resources</h3>
+              <ul className="space-y-2">
+                <li><Link href="/library" className="text-text-secondary hover:text-primary">Learning Library</Link></li>
+                <li><Link href="/tutorials" className="text-text-secondary hover:text-primary">Tutorials</Link></li>
+                <li><Link href="/blog" className="text-text-secondary hover:text-primary">Educational Blog</Link></li>
+              </ul>
+            </div>
+            
+            <div className="text-center md:text-right">
+              <h3 className="font-semibold mb-4">Connect With Us</h3>
+              <div className="flex justify-center md:justify-end space-x-4">
+                <a href="#" className="text-text-secondary hover:text-primary" aria-label="Discord">
+                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
+                  </svg>
+                </a>
+                <a href="#" className="text-text-secondary hover:text-primary" aria-label="Twitter">
+                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                  </svg>
+                </a>
+                <a href="#" className="text-text-secondary hover:text-primary" aria-label="YouTube">
+                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+                  </svg>
+                </a>
+              </div>
+              <p className="mt-4 text-text-secondary">
+                Contact us: <a href="mailto:[email protected]" className="hover:text-primary">[email protected]</a>
+              </p>
+            </div>
+          </div>
+          <div className="mt-12 pt-8 border-t border-border/50 text-center text-text-secondary">
+            <p>PlayGo AI - A non-profit organization dedicated to making education accessible through AI</p>
+            <p className="mt-2">&copy; {new Date().getFullYear()} PlayGo AI. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}

backend/main.py

@@ -0,0 +1,83 @@
+import os
+import json
+
+from fastapi import FastAPI, HTTPException, Query
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+import openai
+from dotenv import load_dotenv
+from typing import List
+import asyncio
+
+# Load environment variables
+load_dotenv()
+
+# Initialize OpenAI client
+client = openai.OpenAI(api_key=os.getenv('OPENAI_API_KEY'))
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:3000"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class Message(BaseModel):
+    content: str
+    role: str
+
+class ChatRequest(BaseModel):
+    messages: List[Message]
+
+async def stream_text(messages: List[Message]):
+    try:
+        formatted_messages = [
+            {"role": "system", "content": """You are an AI learning assistant for PlayGo AI, 
+             an educational platform. Your goal is to help students learn and understand various 
+             subjects. Provide clear, concise, and accurate explanations."""},
+        ] + [{"role": msg.role, "content": msg.content} for msg in messages]
+
+        stream = client.chat.completions.create(
+            model="gpt-3.5-turbo",
+            messages=formatted_messages,
+            temperature=0.7,
+            stream=True
+        )
+
+        for chunk in stream:
+            for choice in chunk.choices:
+                if choice.finish_reason == "stop":
+                    continue
+
+                else:
+                    yield '0:{text}\n'.format(text=json.dumps(choice.delta.content))
+
+            if chunk.choices == []:
+                usage = chunk.usage
+                prompt_tokens = usage.prompt_tokens
+                completion_tokens = usage.completion_tokens
+                yield 'd:{{"finishReason":"{reason}","usage":{{"promptTokens":{prompt},"completionTokens":{completion}}}}}\n'.format(
+                    reason="stop",
+                    prompt=prompt_tokens,
+                    completion=completion_tokens
+                )
+
+    except Exception as e:
+        print(f"Error in stream_text: {str(e)}")
+        yield f"Error: {str(e)}".encode('utf-8')
+
+@app.post("/api/landing_page_chat")
+async def landing_page_chat(request: ChatRequest,):
+    response = StreamingResponse(
+        stream_text(request.messages),
+    )
+    response.headers['x-vercel-ai-data-stream'] = 'v1'
+    return response
+
+@app.get("/api/hello")
+async def root():
+    return {"message": "Hello, World!"}

backend/requirements.txt

@@ -0,0 +1,6 @@
+fastapi[standard]
+uvicorn>=0.15.0
+pydantic>=1.8.0
+python-dotenv>=0.19.0
+openai>=1.0.0
+python-dotenv>=0.19.0

next.config.ts

@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'http://localhost:8000/api/:path*' // FastAPI backend
+      }
+    ]
+  }
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "playgo_next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "ai": "^3.4.31",
+    "next": "15.0.2",
+    "react": "19.0.0-rc-02c0e824-20241028",
+    "react-dom": "19.0.0-rc-02c0e824-20241028"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/tailwindcss": "^3.0.11",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.2",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,61 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: 'class',
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Brand colors - slightly adjusted for dark mode compatibility
+        primary: {
+          DEFAULT: '#4ECDC4',
+          dark: '#3DAA9D',
+          light: '#7EDCD6',
+        },
+        secondary: {
+          DEFAULT: '#FF6B6B',
+          dark: '#E65555',
+          light: '#FF8F8F',
+        },
+        accent: {
+          blue: '#45B7D1',
+          yellow: '#FDCB6E',
+          dark: {
+            blue: '#3A9BB2',
+            yellow: '#D4A85D',
+          },
+        },
+        // Semantic colors
+        background: {
+          primary: 'var(--background-primary)',
+          secondary: 'var(--background-secondary)',
+          tertiary: 'var(--background-tertiary)',
+          card: 'var(--card-background)',
+          glass: 'var(--glass-background)',
+        },
+        text: {
+          primary: 'var(--text-primary)',
+          secondary: 'var(--text-secondary)',
+          tertiary: 'var(--text-tertiary)',
+        },
+        border: {
+          DEFAULT: 'var(--border)',
+          secondary: 'var(--border-secondary)',
+          card: 'var(--card-border)',
+        },
+      },
+      backdropBlur: {
+        xs: '2px',
+      },
+      boxShadow: {
+        'dark': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.24)',
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}