[V0_FILE]xml:file="public/logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo-text%20copy-2cy5Ym8eC4uFvaXlWFydfoGXmJ6YpP.svg" isMerged="true" [V0_FILE]plaintext:file="public/turkish-teacher-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-teacher-headshot-6jPbG2lqQRTFuTUWhXOp8x6A4sjGpl.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Turkish Language Course", description: "Learn Turkish online with our comprehensive course", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/about.tsx" isEdit="true" isMerged="true" export default function About() { return (

About Our Turkish Course

Our comprehensive Turkish language course is designed to take you from beginner to confident speaker through immersive, structured learning experiences.

Comprehensive Curriculum

Carefully structured lessons that build upon each other, ensuring a solid foundation in Turkish.

Cultural Immersion

Learn not just the language, but also the rich cultural context that gives Turkish its unique character.

Interactive Practice

Engage with the language through interactive exercises, quizzes, and conversation practice.

Expert Support

Get guidance from our native Turkish instructors whenever you need help with your learning journey.

) } [V0_FILE]typescriptreact:file="components/curriculum.tsx" isEdit="true" isMerged="true" export default function Curriculum() { return (

Course Curriculum

Our structured curriculum takes you from basic greetings to complex conversations through six comprehensive modules.

Module 1: Turkish Foundations

Turkish alphabet and pronunciation
Basic greetings and introductions
Numbers and basic vocabulary

Module 2: Daily Conversations

Common phrases for everyday situations
Shopping and ordering food
Basic grammar structures

Module 3: Turkish Grammar

Verb conjugations and tenses
Noun cases and possessives
Sentence structure and word order

And much more! Our full curriculum includes 6 comprehensive modules with over 100 lessons.

) } [V0_FILE]typescriptreact:file="components/teacher.tsx" isEdit="true" isMerged="true" export default function Teacher() { return (

Meet Your Teacher

Ayşe Yılmaz

Native Turkish Language Instructor

With over 10 years of experience teaching Turkish to international students, Ayşe brings a perfect blend of traditional and modern teaching methods. She's certified in Turkish language instruction and has helped hundreds of students achieve fluency.

6 months of structured learning

Native speaker video lessons

Interactive exercises & quizzes

Mobile-friendly platform

Enroll Now

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true" export default function Footer() { return ( ) } [V0_FILE]plaintext:file="public/learning-turkish.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/learning-turkish-6hMwJXYDHN0BnIURTt0R6ur8UO8omq.png" isMerged="true" [V0_FILE]plaintext:file="public/passionate-turkish-educator.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/passionate-turkish-educator-n9YV6ILrosjRPjsIOskOltz8GxM8yx.png" isMerged="true" [V0_FILE]typescriptreact:file="hooks/use-payment-status.tsx" isMerged="true" "use client" import { useState } from "react" export function usePaymentStatus(email: string, paymentLinkId: string) { const [status, setStatus] = useState<"idle" | "pending" | "success" | "error">("idle") const [isLoading, setIsLoading] = useState(false) const checkPayment = async () => { try { const response = await fetch("/api/check-payment", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, paymentLinkId, }), }) const data = await response.json() return data.success } catch (error) { console.error("Error checking payment:", error) return false } } const startPaymentProcess = async () => { setIsLoading(true) setStatus("pending") // Return the functions needed for the payment flow return { checkPayment, setStatus, setIsLoading, } } return { status, isLoading, startPaymentProcess, } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import Hero from "@/components/hero" import About from "@/components/about" import Curriculum from "@/components/curriculum" import Teacher from "@/components/teacher" import Footer from "@/components/footer" import EnrollButton from "@/components/enroll-button" export const metadata: Metadata = { title: "Turkish Language Course | Learn Turkish Online", description: "Master Turkish Language from Anywhere with our comprehensive online course. Perfect for beginners and intermediate learners.", } export default function Home() { return (

) } [V0_FILE]javascript:file="useEffectEvent-polyfill.js" isMerged="true" "use client" // This is a simple polyfill for useEffectEvent // It just uses useCallback which is close enough for most use cases import { useCallback } from "react" export function useEffectEvent(callback) { return useCallback(callback, []) } // Default export for compatibility export default useEffectEvent [V0_FILE]javascript:file="next.config.js" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, transpilePackages: [ "@radix-ui/react-use-effect-event", "@radix-ui/react-use-controllable-state", "@radix-ui/react-dialog", ], webpack: (config, { isServer, dev }) => { // This is a more aggressive approach to fix the useEffectEvent issue config.module.rules.push({ test: /node_modules\/@radix-ui\/react-use-effect-event\/dist\/index\.mjs$/, use: [ { loader: "string-replace-loader", options: { search: "import { useEffectEvent as useEffectEvent } from 'react';", replace: "const useEffectEvent = (fn) => React.useCallback(fn, []);", flags: "g", }, }, ], }) return config }, } module.exports = nextConfig [V0_FILE]plaintext:file=".npmrc" isMerged="true" # Force React 18 instead of React 19 react@18.2.0 react-dom@18.2.0 @types/react@18.2.45 @types/react-dom@18.2.18 [V0_FILE]javascript:file="patches/radix-ui-fix.js" isMerged="true" "use client" // This is a custom implementation of useEffectEvent // It's used to patch the @radix-ui/react-use-effect-event module import React from "react" // Simple polyfill for useEffectEvent export const useEffectEvent = (fn) => React.useCallback(fn, []) // Export as both named and default export for maximum compatibility export default useEffectEvent [V0_FILE]javascript:file="scripts/apply-patches.js" isMerged="true" "use client" const fs = require("fs") const path = require("path") // Path to the problematic module const modulePath = path.resolve(__dirname, "../node_modules/@radix-ui/react-use-effect-event/dist/index.mjs") // Our patch content const patchContent = ` // Patched version that doesn't rely on useEffectEvent from React import * as React from 'react'; // Simple polyfill for useEffectEvent export const useEffectEvent = (fn) => React.useCallback(fn, []); // Export as both named and default export for maximum compatibility export default useEffectEvent; ` // Check if the module exists if (fs.existsSync(modulePath)) { console.log("Patching @radix-ui/react-use-effect-event...") // Backup the original file const originalContent = fs.readFileSync(modulePath, "utf8") fs.writeFileSync(`${modulePath}.backup`, originalContent) // Write our patched version fs.writeFileSync(modulePath, patchContent) console.log("Patch applied successfully!") } else { console.error("Module not found:", modulePath) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "turkish-course", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "prebuild": "node scripts/apply-patches.js", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "18.2.0", "react-dom": "18.2.0", "next": "14.0.4", "string-replace-loader": "^3.1.0" }, "devDependencies": { "@types/node": "20.10.5", "@types/react": "18.2.45", "@types/react-dom": "18.2.18", "typescript": "5.3.3", "autoprefixer": "10.4.16", "postcss": "8.4.32", "tailwindcss": "3.4.0" }, "resolutions": { "react": "18.2.0", "react-dom": "18.2.0", "@types/react": "18.2.45", "@types/react-dom": "18.2.18" }, "overrides": { "react": "18.2.0", "react-dom": "18.2.0" } } [V0_FILE]typescriptreact:file="components/ui/dialog-simple.tsx" isMerged="true" "use client" import type * as React from "react" interface DialogProps { open: boolean onOpenChange: (open: boolean) => void children: React.ReactNode } export function Dialog({ open, onOpenChange, children }: DialogProps) { if (!open) return null return (

{children}

) } export function DialogContent({ children }: { children: React.ReactNode }) { return

{children}

} export function DialogHeader({ children }: { children: React.ReactNode }) { return

{children}

} export function DialogTitle({ children }: { children: React.ReactNode }) { return

{children}

} export function DialogDescription({ children }: { children: React.ReactNode }) { return

{children}

} export function DialogFooter({ children }: { children: React.ReactNode }) { return

{children}

} [V0_FILE]typescriptreact:file="components/enroll-button.tsx" isEdit="true" isMerged="true" "use client" import { useState, type FormEvent, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" interface EnrollButtonProps { className?: string } export default function EnrollButton({ className }: EnrollButtonProps) { const [open, setOpen] = useState(false) const [email, setEmail] = useState("") const [isLoading, setIsLoading] = useState(false) const [paymentStatus, setPaymentStatus] = useState<"idle" | "pending" | "success" | "error">("idle") const [showPaymentFrame, setShowPaymentFrame] = useState(false) const iframeRef = useRef(null) const { toast } = useToast() // Reset state when dialog is closed useEffect(() => { if (!open) { setShowPaymentFrame(false) setPaymentStatus("idle") setIsLoading(false) } }, [open]) const handleSubmit = async (e: FormEvent) => { e.preventDefault() if (!email || !email.includes("@")) { toast({ title: "Invalid email", description: "Please enter a valid email address", variant: "destructive", }) return } setIsLoading(true) setPaymentStatus("pending") setShowPaymentFrame(true) try { // Start polling for payment status const checkPaymentStatus = async () => { try { const response = await fetch("/api/check-payment", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, paymentLinkId: process.env.NEXT_PUBLIC_PAYMENT_LINK_ID, }), }) const data = await response.json() if (data.success) { setPaymentStatus("success") setIsLoading(false) setShowPaymentFrame(false) toast({ title: "Payment successful!", description: "Thank you for enrolling in our Turkish course!", variant: "default", }) return true } return false } catch (error) { console.error("Error checking payment status:", error) return false } } // Poll for payment status every 3 seconds const pollInterval = setInterval(async () => { const success = await checkPaymentStatus() if (success) { clearInterval(pollInterval) } }, 3000) // Stop polling after 5 minutes (300000ms) setTimeout(() => { clearInterval(pollInterval) if (paymentStatus !== "success") { setPaymentStatus("idle") setIsLoading(false) toast({ title: "Payment timeout", description: "We haven't received your payment yet. Please try again.", variant: "destructive", }) } }, 300000) } catch (error) { console.error("Payment error:", error) setPaymentStatus("error") setIsLoading(false) toast({ title: "Payment error", description: "There was an error processing your payment. Please try again.", variant: "destructive", }) } } return ( <> {open && (

Enroll in Turkish Language Course

{showPaymentFrame ? "Complete your payment to enroll in the course." : "Enter your email to start the enrollment process."}

{paymentStatus !== "success" ? ( <> {!showPaymentFrame ? (

Email setEmail(e.target.value)} required />

Course Details

Turkish Language Course: $49.00

Total: $49.00

) : (

Payment Information

Email: {email}

Turkish Language Course: $49.00

Total: $49.00

Please complete the payment in the form to the right.

)} ) : (

Payment Successful!

Thank you for enrolling in our Turkish Language Course. You'll receive a confirmation email shortly.

)}

{showPaymentFrame && (