[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { Suspense } from "react" import HeroSection from "@/components/hero-section" import ProcessingSteps from "@/components/processing-steps" import UploadSection from "@/components/upload-section" import TutorialSection from "@/components/tutorial-section" import FeaturesSection from "@/components/features-section" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import ModelViewer from "@/components/model-viewer" import { useLanguage } from "@/contexts/language-context" export default function Home() { const { t } = useLanguage() return (

{/* Hero Section */} {/* Processing Steps */} {/* Upload and Results Section */}

{t("upload.title")}

{t("results.image")} {t("results.model")}

Loading image preview...

{t("results.imagePreview")}

{t("results.uploadPrompt")}

Loading 3D model...

} >

{/* Features Section */} {/* Tutorial Section */} {/* Footer */}

) } [V0_FILE]typescriptreact:file="components/upload-section.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import { Upload, Image, X, Loader2, Check, AlertTriangle } from "lucide-react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Card, CardContent } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { useLanguage } from "@/contexts/language-context" export default function UploadSection() { const { t } = useLanguage() const [file, setFile] = useState(null) const [preview, setPreview] = useState(null) const [isDragging, setIsDragging] = useState(false) const [isProcessing, setIsProcessing] = useState(false) const [progress, setProgress] = useState(0) const [error, setError] = useState(null) const [success, setSuccess] = useState(false) const fileInputRef = useRef(null) const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) if (e.dataTransfer.files && e.dataTransfer.files[0]) { handleFile(e.dataTransfer.files[0]) } } const handleFileInput = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { handleFile(e.target.files[0]) } } const handleFile = (file: File) => { // Check if file is an image if (!file.type.match("image.*")) { setError("Please upload an image file (PNG, JPG, JPEG, etc.)") return } // Check file size (max 5MB) if (file.size > 5 * 1024 * 1024) { setError("File size should not exceed 5MB") return } setError(null) setFile(file) setSuccess(false) // Create preview const reader = new FileReader() reader.onload = (e) => { setPreview(e.target?.result as string) } reader.readAsDataURL(file) } const clearFile = () => { setFile(null) setPreview(null) setSuccess(false) if (fileInputRef.current) { fileInputRef.current.value = "" } } const processSketch = () => { if (!file) return setIsProcessing(true) setProgress(0) setSuccess(false) // Simulate processing with progress updates const interval = setInterval(() => { setProgress((prev) => { const newProgress = prev + 5 if (newProgress >= 100) { clearInterval(interval) setTimeout(() => { setIsProcessing(false) setSuccess(true) // Here you would normally handle the actual result }, 500) return 100 } return newProgress }) }, 300) } return (

{preview ? (

Preview

{success && (

Processing Complete!

View results in the tabs

)}

{file?.name} ({(file?.size / 1024).toFixed(1)} KB)

) : (

Drag and drop your sketch here or{" "}

PNG, JPG, JPEG up to 5MB

)} {error && ( {error} )} {isProcessing ? (

{progress < 30 ? "Analyzing sketch..." : progress < 60 ? "Generating realistic image..." : "Creating 3D model..."}

) : ( )}

Privacy Note: Your sketches are processed securely and not stored permanently.

) } [V0_FILE]typescriptreact:file="components/processing-steps.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Brush, Image, CuboidIcon as Cube } from "lucide-react" import { useLanguage } from "@/contexts/language-context" export default function ProcessingSteps() { const { t } = useLanguage() const steps = [ { icon: , title: t("how.step1.title"), description: t("how.step1.desc"), }, { icon: , title: t("how.step2.title"), description: t("how.step2.desc"), }, { icon: , title: t("how.step3.title"), description: t("how.step3.desc"), }, ] return (

{t("how.title")}

{steps.map((step, index) => (

{index === 0 ? "✏️" : index === 1 ? "🖼️" : "🧊"}

{step.icon}

{step.title}

{step.description}

{index < steps.length - 1 && (

)} ))}

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" isMerged="true" import { Zap, Shield, Smartphone, Eye, RotateCw, Download } from "lucide-react" export default function FeaturesSection() { const features = [ { icon: , title: "Fast Processing", description: "Advanced AI models optimized for speed with cloud-based GPUs.", }, { icon: , title: "Secure & Private", description: "Your sketches and generated content are processed securely.", }, { icon: , title: "Responsive Design", description: "Works seamlessly on desktop, tablet, and mobile devices.", }, { icon: , title: "High Quality Results", description: "Photorealistic images and detailed 3D models with fine details.", }, { icon: , title: "Interactive 3D", description: "Rotate, zoom, and inspect your 3D models from any angle.", }, { icon: , title: "Easy Export", description: "Download your images and 3D models in various formats.", }, ] return (

Key Features

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/tutorial-section.tsx" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { PencilRuler, Upload, Settings, Download, HelpCircle } from "lucide-react" export default function TutorialSection() { const [activeTab, setActiveTab] = useState("basics") const tutorials = { basics: [ { title: "Creating Effective Sketches", icon: , description: "Learn how to create sketches that work best with our AI system. Clear lines and good contrast will yield the best results.", }, { title: "Uploading Your Sketch", icon: , description: "Drag and drop your sketch or use the file browser. We accept PNG, JPG, and JPEG formats up to 5MB.", }, { title: "Adjusting Settings", icon: , description: "Fine-tune the AI processing parameters to get the exact style and detail level you want.", }, { title: "Downloading Results", icon: , description: "Save your generated images and 3D models in various formats for use in other applications.", }, ], advanced: [ { title: "Understanding the AI Process", icon: , description: "Dive deeper into how our AI transforms sketches into realistic images using deep learning models.", }, { title: "3D Model Manipulation", icon: , description: "Learn advanced techniques for interacting with and modifying your 3D models.", }, { title: "Optimizing Your Sketches", icon: , description: "Advanced tips for preparing sketches that will generate the most detailed and accurate results.", }, { title: "Batch Processing", icon: , description: "Process multiple sketches at once to create collections of related images and models.", }, ], tips: [ { title: "Use Clear Outlines", icon: , description: "Sketches with clear, defined outlines work best with our AI system.", }, { title: "Add Shading Hints", icon: , description: "Simple shading in your sketch helps the AI understand depth and form.", }, { title: "Include Details", icon: , description: "The more details in your sketch, the more realistic the final image and 3D model will be.", }, { title: "Experiment with Styles", icon: , description: "Try different sketch styles to see how they affect the AI-generated results.", }, ], } return (

How to Use Our Platform

Basics Advanced Tips & Tricks {Object.entries(tutorials).map(([key, items]) => (

{items.map((item, index) => (

{item.icon}

{item.title}

{item.description} ))}

))}

) } [V0_FILE]typescriptreact:file="components/model-viewer.tsx" isEdit="true" isMerged="true" "use client" import { Suspense, useRef, useState } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls, Environment, PerspectiveCamera, Html } from "@react-three/drei" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { ZoomIn, ZoomOut, RefreshCw, Pause, Play } from "lucide-react" import type * as THREE from "three" function Model({ autoRotate, rotationSpeed, }: { autoRotate: boolean rotationSpeed: number }) { const group = useRef(null) useFrame(() => { if (autoRotate && group.current) { group.current.rotation.y += rotationSpeed * 0.01 } }) return ( ) } export default function ModelViewer() { const [autoRotate, setAutoRotate] = useState(true) const [rotationSpeed, setRotationSpeed] = useState(1) const [cameraPosition, setCameraPosition] = useState([0, 0, 5]) const handleZoomIn = () => { setCameraPosition((prev) => [prev[0], prev[1], Math.max(prev[2] - 1, 2)]) } const handleZoomOut = () => { setCameraPosition((prev) => [prev[0], prev[1], Math.min(prev[2] + 1, 10)]) } const handleRotationSpeedChange = (value: number[]) => { setRotationSpeed(value[0]) } const handleReset = () => { setCameraPosition([0, 0, 5]) setRotationSpeed(1) } return (

Drag to rotate • Scroll to zoom • Right-click to pan

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { motion } from "framer-motion" import { useRouter } from "next/navigation" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { Eye, EyeOff, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { useToast } from "@/hooks/use-toast" // Form schema with validation const formSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address" }), password: z.string().min(8, { message: "Password must be at least 8 characters" }), rememberMe: z.boolean().optional(), }) export default function LoginPage() { const [showPassword, setShowPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const { toast } = useToast() // Initialize form with react-hook-form const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { email: "", password: "", rememberMe: false, }, }) // Handle form submission const onSubmit = async (values: z.infer) => { setIsLoading(true) // Simulate API call setTimeout(() => { setIsLoading(false) // Show success toast toast({ title: "Login successful", description: "Welcome back to Sketch-to-3D!", }) // Redirect to home page router.push("/") }, 1500) } // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5 }, }, } return (

Back to Home

Welcome back

( Email )} /> ( Password

)} /> (

Remember me

)} /> Forgot password?

Don't have an account?{" "} Sign up

Or continue with

{/* Accessibility features */}

This page is optimized for screen readers and keyboard navigation. Use tab to navigate through interactive elements.

) } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { motion } from "framer-motion" import { useRouter } from "next/navigation" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { Eye, EyeOff, ArrowLeft, Info } from "lucide-react" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { useToast } from "@/hooks/use-toast" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" // Form schema with validation const formSchema = z .object({ name: z.string().min(2, { message: "Name must be at least 2 characters" }), email: z.string().email({ message: "Please enter a valid email address" }), password: z .string() .min(8, { message: "Password must be at least 8 characters" }) .regex(/[A-Z]/, { message: "Password must contain at least one uppercase letter" }) .regex(/[a-z]/, { message: "Password must contain at least one lowercase letter" }) .regex(/[0-9]/, { message: "Password must contain at least one number" }), confirmPassword: z.string(), terms: z.boolean().refine((val) => val === true, { message: "You must agree to the terms and conditions", }), }) .refine((data) => data.password === data.confirmPassword, { message: "Passwords do not match", path: ["confirmPassword"], }) export default function SignupPage() { const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const { toast } = useToast() // Initialize form with react-hook-form const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { name: "", email: "", password: "", confirmPassword: "", terms: false, }, }) // Handle form submission const onSubmit = async (values: z.infer) => { setIsLoading(true) // Simulate API call setTimeout(() => { setIsLoading(false) // Show success toast toast({ title: "Account created successfully", description: "Welcome to Sketch-to-3D!", }) // Redirect to home page router.push("/") }, 1500) } // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5 }, }, } return (

Back to Home

Create an account

( Full Name )} /> ( Email )} /> (

Password

Password must:

Be at least 8 characters
Include at least one uppercase letter
Include at least one lowercase letter
Include at least one number

)} /> ( Confirm Password

)} /> (

I agree to the{" "} terms of service {" "} and{" "} privacy policy You must agree to our terms to create an account.

)} />

Already have an account?{" "} Sign in

Or continue with

{/* Accessibility features */}

This page is optimized for screen readers and keyboard navigation. Use tab to navigate through interactive elements.

) } [V0_FILE]typescriptreact:file="components/language-switcher.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Globe } from "lucide-react" import { useLanguage, languages, type LanguageCode } from "@/contexts/language-context" export default function LanguageSwitcher() { const { currentLanguage, changeLanguage } = useLanguage() return ( {Object.values(languages).map((language) => ( changeLanguage(language.code as LanguageCode)} className={currentLanguage.code === language.code ? "bg-accent" : ""} > {language.nativeName} {language.code ? language.code.toUpperCase() : ""} ))} ) } [V0_FILE]typescriptreact:file="components/accessibility-menu.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Accessibility, ZoomIn, ZoomOut, Sun, Moon } from "lucide-react" import { useTheme } from "next-themes" export default function AccessibilityMenu() { const [mounted, setMounted] = useState(false) const [fontSize, setFontSize] = useState(16) const { setTheme, theme } = useTheme() const [highContrast, setHighContrast] = useState(false) // After mounting, we can safely access the window object useEffect(() => { setMounted(true) // Get the stored font size or use default const storedFontSize = localStorage.getItem("fontSize") if (storedFontSize) { setFontSize(Number.parseInt(storedFontSize)) document.documentElement.style.fontSize = `${storedFontSize}px` } // Get the stored high contrast setting const storedHighContrast = localStorage.getItem("highContrast") if (storedHighContrast === "true") { setHighContrast(true) document.documentElement.classList.add("high-contrast") } }, []) const increaseFontSize = () => { const newSize = Math.min(fontSize + 2, 24) setFontSize(newSize) document.documentElement.style.fontSize = `${newSize}px` localStorage.setItem("fontSize", newSize.toString()) } const decreaseFontSize = () => { const newSize = Math.max(fontSize - 2, 12) setFontSize(newSize) document.documentElement.style.fontSize = `${newSize}px` localStorage.setItem("fontSize", newSize.toString()) } const resetFontSize = () => { setFontSize(16) document.documentElement.style.fontSize = "16px" localStorage.setItem("fontSize", "16") } const toggleHighContrast = () => { setHighContrast(!highContrast) if (!highContrast) { document.documentElement.classList.add("high-contrast") localStorage.setItem("highContrast", "true") } else { document.documentElement.classList.remove("high-contrast") localStorage.setItem("highContrast", "false") } } if (!mounted) { return null } return ( Accessibility setTheme("light")}> Light Mode setTheme("dark")}> Dark Mode 🔳 {highContrast ? "Disable" : "Enable"} High Contrast Increase Font Size Decrease Font Size ↩️ Reset Font Size ) } [V0_FILE]css: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%; } /* High contrast mode */ .high-contrast { --background: 0 0% 100%; --foreground: 0 0% 0%; --card: 0 0% 100%; --card-foreground: 0 0% 0%; --popover: 0 0% 100%; --popover-foreground: 0 0% 0%; --primary: 226 100% 50%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 90%; --secondary-foreground: 0 0% 0%; --muted: 0 0% 85%; --muted-foreground: 0 0% 0%; --accent: 0 0% 90%; --accent-foreground: 0 0% 0%; --destructive: 0 100% 50%; --destructive-foreground: 0 0% 100%; --border: 0 0% 0%; --input: 0 0% 0%; --ring: 226 100% 50%; } .dark.high-contrast { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 0%; --card-foreground: 0 0% 100%; --popover: 0 0% 0%; --popover-foreground: 0 0% 100%; --primary: 226 100% 60%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 15%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 15%; --muted-foreground: 0 0% 80%; --accent: 0 0% 15%; --accent-foreground: 0 0% 100%; --destructive: 0 100% 60%; --destructive-foreground: 0 0% 0%; --border: 0 0% 100%; --input: 0 0% 100%; --ring: 226 100% 60%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Accessibility improvements */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Skip link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary); color: white; padding: 8px; z-index: 100; } .skip-link:focus { top: 0; } /* RTL Support */ [dir="rtl"] .flip-in-rtl { transform: scaleX(-1); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } [V0_FILE]typescriptreact:file="contexts/language-context.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" // Define available languages export type LanguageCode = "en" | "ar" export type Direction = "ltr" | "rtl" export interface Language { code: LanguageCode name: string nativeName: string direction: Direction } export const languages: Record = { en: { code: "en", name: "English", nativeName: "English", direction: "ltr" }, ar: { code: "ar", name: "Arabic", nativeName: "العربية", direction: "rtl" }, } // Translation dictionaries export const translations: Record> = { en: { // Navigation "nav.tryIt": "Try It", "nav.tutorial": "Tutorial", "nav.login": "Login", "nav.signup": "Sign Up", // Hero section "hero.title": "Transform Sketches into Realistic 3D Models", "hero.subtitle": "Using advanced AI and computer vision to convert your simple sketches into stunning realistic images and interactive 3D models for judicial purposes.", "hero.tryButton": "Try It Now", "hero.learnButton": "Learn How It Works", // How it works "how.title": "How It Works", "how.step1.title": "Upload Sketch", "how.step1.desc": "Upload your hand-drawn or digital sketch to our platform.", "how.step2.title": "AI Image Generation", "how.step2.desc": "Our AI transforms your sketch into a photorealistic image using advanced deep learning.", "how.step3.title": "3D Model Creation", "how.step3.desc": "The realistic image is converted into an interactive 3D model you can view from any angle.", // Upload section "upload.title": "Transform Your Sketches", "upload.dropzone": "Drag and drop your sketch here or browse", "upload.formats": "PNG, JPG, JPEG up to 5MB", "upload.preview": "Preview", "upload.process": "Process Sketch", "upload.privacy": "Privacy Note: Your sketches are processed securely and not stored permanently.", "upload.analyzing": "Analyzing sketch...", "upload.generating": "Generating realistic image...", "upload.creating": "Creating 3D model...", // Results tabs "results.image": "Realistic Image", "results.model": "3D Model", "results.imagePreview": "Your generated image will appear here", "results.modelPreview": "Your 3D model will appear here", "results.uploadPrompt": "Upload a sketch to get started", // Features "features.title": "Key Features", "features.fast.title": "Fast Processing", "features.fast.desc": "Advanced AI models optimized for speed with cloud-based GPUs.", "features.secure.title": "Secure & Private", "features.secure.desc": "Your sketches and generated content are processed securely.", "features.responsive.title": "Responsive Design", "features.responsive.desc": "Works seamlessly on desktop, tablet, and mobile devices.", "features.quality.title": "High Quality Results", "features.quality.desc": "Photorealistic images and detailed 3D models with fine details.", "features.interactive.title": "Interactive 3D", "features.interactive.desc": "Rotate, zoom, and inspect your 3D models from any angle.", "features.export.title": "Easy Export", "features.export.desc": "Download your images and 3D models in various formats.", // Tutorial "tutorial.title": "How to Use Our Platform", "tutorial.basics": "Basics", "tutorial.advanced": "Advanced", "tutorial.tips": "Tips & Tricks", // Login/Signup "auth.login": "Sign in", "auth.signup": "Sign up", "auth.email": "Email", "auth.password": "Password", "auth.forgotPassword": "Forgot password?", "auth.noAccount": "Don't have an account?", "auth.hasAccount": "Already have an account?", "auth.rememberMe": "Remember me", "auth.name": "Full Name", "auth.confirmPassword": "Confirm Password", "auth.terms": "I agree to the terms of service and privacy policy", "auth.createAccount": "Create account", "auth.continueWith": "Or continue with", // Footer "footer.description": "Transform your sketches into realistic images and 3D models using advanced AI technology for judicial purposes.", "footer.quickLinks": "Quick Links", "footer.resources": "Resources", "footer.contact": "Contact", "footer.rights": "© 2023 Judicial Sketch-to-3D. All rights reserved.", // Accessibility "a11y.skipToContent": "Skip to main content", "a11y.skipToFooter": "Skip to footer", "a11y.darkMode": "Dark Mode", "a11y.lightMode": "Light Mode", "a11y.highContrast": "High Contrast", "a11y.increaseFontSize": "Increase Font Size", "a11y.decreaseFontSize": "Decrease Font Size", "a11y.resetFontSize": "Reset Font Size", }, ar: { // Navigation "nav.tryIt": "جربها الآن", "nav.tutorial": "الدليل التعليمي", "nav.login": "تسجيل الدخول", "nav.signup": "إنشاء حساب", // Hero section "hero.title": "حوّل الرسومات إلى نماذج ثلاثية الأبعاد واقعية", "hero.subtitle": "باستخدام الذكاء الاصطناعي المتقدم ورؤية الكمبيوتر لتحويل رسوماتك البسيطة إلى صور واقعية مذهلة ونماذج ثلاثية الأبعاد تفاعلية للأغراض القضائية.", "hero.tryButton": "جربها الآن", "hero.learnButton": "تعرف على كيفية عملها", // How it works "how.title": "كيف تعمل", "how.step1.title": "رفع الرسم", "how.step1.desc": "قم برفع رسمك المرسوم يدويًا أو الرقمي إلى منصتنا.", "how.step2.title": "توليد الصورة بالذكاء الاصطناعي", "how.step2.desc": "يقوم الذكاء الاصطناعي لدينا بتحويل رسمك إلى صورة واقعية باستخدام التعلم العميق المتقدم.", "how.step3.title": "إنشاء نموذج ثلاثي الأبعاد", "how.step3.desc": "يتم تحويل الصورة الواقعية إلى نموذج ثلاثي الأبعاد تفاعلي يمكنك مشاهدته من أي زاوية.", // Upload section "upload.title": "حوّل رسوماتك", "upload.dropzone": "اسحب وأفلت رسمك هنا أو تصفح", "upload.formats": "PNG، JPG، JPEG حتى 5 ميجابايت", "upload.preview": "معاينة", "upload.process": "معالجة الرسم", "upload.privacy": "ملاحظة الخصوصية: تتم معالجة رسوماتك بشكل آمن ولا يتم تخزينها بشكل دائم.", "upload.analyzing": "جاري تحليل الرسم...", "upload.generating": "جاري إنشاء صورة واقعية...", "upload.creating": "جاري إنشاء نموذج ثلاثي الأبعاد...", // Results tabs "results.image": "صورة واقعية", "results.model": "نموذج ثلاثي الأبعاد", "results.imagePreview": "ستظهر صورتك المولدة هنا", "results.modelPreview": "سيظهر نموذجك ثلاثي الأبعاد هنا", "results.uploadPrompt": "قم برفع رسم للبدء", // Features "features.title": "الميزات الرئيسية", "features.fast.title": "معالجة سريعة", "features.fast.desc": "نماذج ذكاء اصطناعي متقدمة محسنة للسرعة مع وحدات معالجة رسومات سحابية.", "features.secure.title": "آمن وخاص", "features.secure.desc": "تتم معالجة رسوماتك والمحتوى المولد بشكل آمن.", "features.responsive.title": "تصميم متجاوب", "features.responsive.desc": "يعمل بسلاسة على أجهزة سطح المكتب والأجهزة اللوحية والهواتف المحمولة.", "features.quality.title": "نتائج عالية الجودة", "features.quality.desc": "صور واقعية ونماذج ثلاثية الأبعاد مفصلة مع تفاصيل دقيقة.", "features.interactive.title": "ثلاثي الأبعاد تفاعلي", "features.interactive.desc": "قم بالتدوير والتكبير وفحص نماذجك ثلاثية الأبعاد من أي زاوية.", "features.export.title": "تصدير سهل", "features.export.desc": "قم بتنزيل صورك ونماذجك ثلاثية الأبعاد بتنسيقات مختلفة.", // Tutorial "tutorial.title": "كيفية استخدام منصتنا", "tutorial.basics": "أساسيات", "tutorial.advanced": "متقدم", "tutorial.tips": "نصائح وحيل", // Login/Signup "auth.login": "تسجيل الدخول", "auth.signup": "إنشاء حساب", "auth.email": "البريد الإلكتروني", "auth.password": "كلمة المرور", "auth.forgotPassword": "نسيت كلمة المرور؟", "auth.noAccount": "ليس لديك حساب؟", "auth.hasAccount": "لديك حساب بالفعل؟", "auth.rememberMe": "تذكرني", "auth.name": "الاسم الكامل", "auth.confirmPassword": "تأكيد كلمة المرور", "auth.terms": "أوافق على شروط الخدمة وسياسة الخصوصية", "auth.createAccount": "إنشاء حساب", "auth.continueWith": "أو المتابعة باستخدام", // Footer "footer.description": "حوّل رسوماتك إلى صور واقعية ونماذج ثلاثية الأبعاد باستخدام تقنية الذكاء الاصطناعي المتقدمة للأغراض القضائية.", "footer.quickLinks": "روابط سريعة", "footer.resources": "موارد", "footer.contact": "اتصل بنا", "footer.rights": "© 2023 رسم قضائي إلى ثلاثي الأبعاد. جميع الحقوق محفوظة.", // Accessibility "a11y.skipToContent": "انتقل إلى المحتوى الرئيسي", "a11y.skipToFooter": "انتقل إلى التذييل", "a11y.darkMode": "الوضع الداكن", "a11y.lightMode": "الوضع الفاتح", "a11y.highContrast": "تباين عالي", "a11y.increaseFontSize": "زيادة حجم الخط", "a11y.decreaseFontSize": "تقليل حجم الخط", "a11y.resetFontSize": "إعادة تعيين حجم الخط", }, } // Create the context interface LanguageContextType { currentLanguage: Language t: (key: string) => string changeLanguage: (code: LanguageCode) => void } const LanguageContext = createContext(undefined) // Provider component interface LanguageProviderProps { children: ReactNode } export function LanguageProvider({ children }: LanguageProviderProps) { const [currentLanguage, setCurrentLanguage] = useState(languages.en) // Initialize language from localStorage if available useEffect(() => { const savedLanguage = localStorage.getItem("language") if (savedLanguage && languages[savedLanguage as LanguageCode]) { setCurrentLanguage(languages[savedLanguage as LanguageCode]) } }, []) // Update document direction when language changes useEffect(() => { document.documentElement.lang = currentLanguage.code document.documentElement.dir = currentLanguage.direction localStorage.setItem("language", currentLanguage.code) }, [currentLanguage]) // Translation function const t = (key: string): string => { return translations[currentLanguage.code][key] || key } // Change language function const changeLanguage = (code: LanguageCode) => { if (languages[code]) { setCurrentLanguage(languages[code]) } } return {children} } // Custom hook to use the language context export function useLanguage() { const context = useContext(LanguageContext) if (context === undefined) { // Provide a default context instead of throwing an error return { currentLanguage: languages.en, t: (key: string) => translations.en[key] || key, changeLanguage: () => console.warn("LanguageProvider not found"), } } return context } [V0_FILE]plaintext:file="public/logo.png" url="true" https="true" hebbkx1anhila5yf="true" public="true" blob="true" vercel="true" storage="true" com="true" judicial="true" logo="true" Yd9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij9Ij="true" v0="true" no="true" op="true" code="true" block="true" terminated="true" isMerged="true" [V0_FILE]typescriptreact:file="components/logo.tsx" isEdit="true" "use client" import { cn } from "@/lib/utils" import { motion } from "framer-motion" import { Scale, Gavel } from "lucide-react" interface LogoProps { className?: string size?: "sm" | "md" | "lg" animated?: boolean } export default function Logo({ className, size = "md", animated = true }: LogoProps) { const sizes = { sm: { width: 32, height: 32, fontSize: "text-xs", titleSize: "text-base" }, md: { width: 48, height: 48, fontSize: "text-sm", titleSize: "text-xl" }, lg: { width: 64, height: 64, fontSize: "text-base", titleSize: "text-2xl" }, } const logoWidth = sizes[size].width const logoHeight = sizes[size].height const fontSize = sizes[size].fontSize const titleSize = sizes[size].titleSize return (

{animated ? (

) : null}

{/* Decorative elements */}

Judicial 3D Sketch to Reality

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" "use client" import { motion } from "framer-motion" import Link from "next/link" import { Button } from "@/components/ui/button" import { useLanguage } from "@/contexts/language-context" import { ChevronRight, Scale, Gavel, FileText } from "lucide-react" import Logo from "./logo" export default function HeroSection() { const { t } = useLanguage() // Animation variants const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } const staggerContainer = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } return (

{/* Background with judicial theme */}

{/* Floating elements */}

{t("hero.title").split(" ").slice(0, 1).join(" ")}{" "} {t("hero.title").split(" ").slice(1).join(" ")} {t("hero.subtitle")} {/* Scroll indicator */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { LanguageProvider } from "@/contexts/language-context" import LanguageSwitcher from "@/components/language-switcher" import AccessibilityMenu from "@/components/accessibility-menu" import Logo from "@/components/logo" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Judicial Sketch to 3D - AI-Powered Sketch Transformation", description: "Transform your sketches into realistic images and 3D models using advanced AI technology for judicial purposes", keywords: "judicial, sketch, 3D model, AI, artificial intelligence, computer vision, image processing", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Skip to main content

{children}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This