[V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import Image from "next/image" import { ArrowRight, Check } from "lucide-react" import { Button } from "@/components/ui/button" export default function LandingPage() { return (

VisionAI

AI-Powered Lens Adjustment for Perfect Vision

Our innovative technology helps you adjust your spectacles lens power based on your eye condition, all from the comfort of your home.

Features

Why Choose Our AI Assistant

Experience the future of vision care with our cutting-edge technology

{[ { title: "Accurate Power Adjustment", description: "Our AI analyzes your vision needs and recommends precise lens power adjustments.", icon: "🔍", }, { title: "Home-Based Solution", description: "No need to visit an optician. Adjust your lens power from the comfort of your home.", icon: "🏠", }, { title: "Quick & Easy Process", description: "Complete the entire process in minutes with our user-friendly interface.", icon: "⚡", }, ].map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

Process

How It Works

A simple step-by-step process to adjust your lens power

{[ { step: "1", title: "Create an Account", description: "Sign up with your personal details to get started.", }, { step: "2", title: "Answer Vision Questions", description: "Complete our questionnaire about your current vision and eye health.", }, { step: "3", title: "Place Spectacles in Device", description: "Follow the instructions to place your spectacles in the adjustment device.", }, { step: "4", title: "Receive Adjusted Spectacles", description: "Your spectacles will be automatically adjusted to the optimal power for your vision.", }, ].map((step, index) => (

{step.step}

{step.title}

{step.description}

))}

Testimonials

What Our Users Say

Hear from people who have transformed their vision experience

{[ { quote: "I was skeptical at first, but the results were amazing. My vision has never been clearer!", name: "Sarah Johnson", title: "Teacher", }, { quote: "The process was so simple and quick. I love that I don't need to visit an optician for adjustments anymore.", name: "Michael Chen", title: "Software Engineer", }, { quote: "As someone who's always busy, this technology has been a game-changer for maintaining my eye health.", name: "Priya Patel", title: "Business Owner", }, ].map((testimonial, index) => (

"{testimonial.quote}"

{testimonial.name}

{testimonial.title}

))}

Ready to Experience Perfect Vision?

Join thousands of satisfied users who have transformed their vision experience with our AI-powered solution.

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { ArrowLeft, Check, Eye, EyeOff } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useRouter } from "next/navigation" export default function LoginPage() { const router = useRouter() const [step, setStep] = useState(1) const [showPassword, setShowPassword] = useState(false) const [formData, setFormData] = useState({ name: "", phone: "", age: "", code: "", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (step === 1) { setStep(2) } else { // In a real app, you would validate the verification code here router.push("/home") } } return (

{step === 1 ? "Welcome to VisionAI" : "Verify Your Account"}

{step === 1 ? "Enter your details to get started with our AI-powered lens adjustment" : "We've sent a verification code to your phone number"}

{step === 1 ? ( <>

Full Name

Phone Number

Age

Password

) : (

Verification Code

Didn't receive a code?{" "}

)}

{step === 2 && ( )}

{step === 1 ? (

Already have an account?{" "} Sign in

) : null}

) } [V0_FILE]typescriptreact:file="app/home/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { ArrowRight, Check, Home, LogOut, Menu, Settings, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { useRouter } from "next/navigation" export default function HomePage() { const router = useRouter() const [isMenuOpen, setIsMenuOpen] = useState(false) return (

VisionAI

setIsMenuOpen(false)} > Home setIsMenuOpen(false)} > Profile setIsMenuOpen(false)} > Settings setIsMenuOpen(false)} > Logout

Current Status

Welcome Back, John

Current Sight Reading

Left Eye

-2.25

Right Eye

-2.50

Last updated: 3 months ago

Device Information

Model

VisionAI Pro

Status

Connected

) } [V0_FILE]typescriptreact:file="app/questions/page.tsx" "use client" import type React from "react" import { useState } from "react" import { ArrowLeft, ArrowRight, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { useRouter } from "next/navigation" interface Question { id: number text: string type: "radio" | "text" | "number" options?: string[] conditionalNext?: { [key: string]: number } } export default function QuestionsPage() { const router = useRouter() const [currentStep, setCurrentStep] = useState(0) const [answers, setAnswers] = useState>({}) const [surgeryType, setSurgeryType] = useState("") const questions: Question[] = [ { id: 1, text: "Did you check your sight with previous power lenses?", type: "radio", options: ["Yes", "No"], }, { id: 2, text: "Did you have any surgery (eye/body)?", type: "radio", options: ["Yes", "No"], conditionalNext: { Yes: 2.5, No: 3, }, }, { id: 2.5, text: "Which part of your body had surgery?", type: "text", }, { id: 3, text: "How many months or days since the last check-up?", type: "number", }, { id: 4, text: "From which line can't you read the letters clearly?", type: "number", }, { id: 5, text: "Do you have an eye infection?", type: "radio", options: ["Yes", "No"], conditionalNext: { Yes: 5.5, No: 6, }, }, { id: 5.5, text: "You can change your lens power after your infection decreases.", type: "radio", options: ["Go back to home"], }, { id: 6, text: "Ready to calculate your lens power?", type: "radio", options: ["Yes, proceed"], }, ] const handleAnswer = (answer: string) => { const currentQuestion = questions[currentStep] setAnswers({ ...answers, [currentQuestion.id]: answer }) // Handle conditional navigation if (currentQuestion.conditionalNext && currentQuestion.conditionalNext[answer]) { const nextQuestionId = currentQuestion.conditionalNext[answer] const nextQuestionIndex = questions.findIndex((q) => q.id === nextQuestionId) if (currentQuestion.id === 2 && answer === "Yes") { // If they had surgery, we need to ask which part setCurrentStep(currentStep + 1) } else if (currentQuestion.id === 5 && answer === "Yes") { // If they have an infection, show the message and then allow going back setCurrentStep(currentStep + 1) } else if (currentQuestion.id === 5.5) { // Go back to home if they have an infection router.push("/home") } else if (currentQuestion.id === 6) { // Proceed to processing page router.push("/processing") } else if (nextQuestionIndex !== -1) { setCurrentStep(nextQuestionIndex) } else { setCurrentStep(currentStep + 1) } } else { // Normal navigation to next question if (currentStep < questions.length - 1) { setCurrentStep(currentStep + 1) } else { router.push("/processing") } } } const handleTextInput = (e: React.ChangeEvent) => { const currentQuestion = questions[currentStep] if (currentQuestion.id === 2.5) { setSurgeryType(e.target.value) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const currentQuestion = questions[currentStep] if (currentQuestion.type === "text") { setAnswers({ ...answers, [currentQuestion.id]: surgeryType }) setCurrentStep(currentStep + 1) } else if (currentQuestion.type === "number") { const inputValue = (e.target as HTMLFormElement).answer.value setAnswers({ ...answers, [currentQuestion.id]: inputValue }) setCurrentStep(currentStep + 1) } } const currentQuestion = questions[currentStep] return (

VisionAI

Step {currentStep + 1} of {questions.length}

Power Adjustment Process

{currentQuestion.text}

{currentQuestion.type === "radio" && ( {currentQuestion.options?.map((option, index) => (

handleAnswer(option)} className="border-blue-300 text-blue-700" /> {option}

))} )} {(currentQuestion.type === "text" || currentQuestion.type === "number") && ( )}

{currentStep > 0 && ( )}

) } [V0_FILE]typescriptreact:file="app/processing/page.tsx" "use client" import { useState, useEffect } from "react" import { Check, Loader2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { useRouter } from "next/navigation" export default function ProcessingPage() { const router = useRouter() const [step, setStep] = useState(1) const [progress, setProgress] = useState(0) const [message, setMessage] = useState("Calculating the power of your lens...") useEffect(() => { const timer = setTimeout(() => { if (progress < 100) { setProgress((prev) => { const newProgress = prev + 1 // Change messages at certain progress points if (newProgress === 40) { setMessage("Now you can proceed to place the spectacles in the box.") } else if (newProgress === 70) { setMessage("Now close the top of the box and press OK.") setStep(2) } else if (newProgress === 100) { setMessage("Process is complete! You can now take your spectacles.") setStep(3) } return newProgress }) } }, 100) return () => clearTimeout(timer) }, [progress]) const handleComplete = () => { router.push("/home") } return (

VisionAI

{step < 3 ? (

) : (

)}

{message}

{progress}% Complete

{step === 2 && progress >= 70 && progress < 100 && ( )} {step === 3 && ( )}

) } [V0_FILE]css:file="app/globals.css" @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; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDelayed { 0% { opacity: 0; transform: translateY(10px); } 50% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } .animate-fade-in-delayed { animation: fadeInDelayed 1s ease-out forwards; } [V0_FILE]typescriptreact:file="tailwind.config.ts" 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))", }, blue: { 50: "#EFF6FF", 100: "#DBEAFE", 200: "#BFDBFE", 300: "#93C5FD", 400: "#60A5FA", 500: "#3B82F6", 600: "#2563EB", 700: "#1D4ED8", 800: "#1E40AF", 900: "#1E3A8A", }, }, 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