[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import Hero from "@/components/hero" import Concepts from "@/components/concepts" import Applications from "@/components/applications" import Calculator from "@/components/calculator" import Exercises from "@/components/exercises" import Navigation from "@/components/navigation" export default function Home() { const [activeSection, setActiveSection] = useState("home") return (

{activeSection === "home" && } {activeSection === "concepts" && } {activeSection === "applications" && } {activeSection === "calculator" && } {activeSection === "exercises" && }

) } [V0_FILE]typescriptreact:file="components/navigation.tsx" "use client" interface NavigationProps { activeSection: string setActiveSection: (section: string) => void } export default function Navigation({ activeSection, setActiveSection }: NavigationProps) { const sections = [ { id: "home", label: "Inicio" }, { id: "concepts", label: "Conceptos" }, { id: "applications", label: "Aplicaciones" }, { id: "calculator", label: "Calculadora" }, { id: "exercises", label: "Ejercicios" }, ] return (

setActiveSection("home")} > 🔬 Razones & Tasas

{sections.map((section) => ( ))}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" "use client" interface HeroProps { setActiveSection: (section: string) => void } export default function Hero({ setActiveSection }: HeroProps) { return (

Razones, Tasas y{" "} Proporciones

Descubre cómo estos conceptos matemáticos fundamentales se aplican en química y medicina para mezclas, dosis y análisis científicos.

🧪

Química

Mezclas y reacciones

💊

Medicina

Dosis y análisis

📊

Proporciones

Comparaciones

⚙️

Aplicaciones

Vida real

) } [V0_FILE]typescriptreact:file="components/concepts.tsx" "use client" export default function Concepts() { const concepts = [ { title: "Razón", emoji: "📐", definition: "Una razón es una comparación entre dos cantidades usando división.", example: "En el agua (H₂O), por cada 2 átomos de hidrógeno hay 1 de oxígeno.", notation: "Se escribe como 2:1 o como fracción 2/1", color: "from-blue-500 to-indigo-600", }, { title: "Tasa", emoji: "📈", definition: "Una tasa es una razón especial que compara dos cantidades con diferentes unidades.", example: "En medicina: Un pulso normal es de 60-100 latidos por minuto.", notation: 'Se escribe como "60 latidos/minuto" o "60 bpm"', color: "from-purple-500 to-pink-600", }, { title: "Proporción", emoji: "⚖️", definition: "Una proporción es una ecuación que establece que dos razones son iguales.", example: "Si 2 partes de ácido se mezclan con 5 de agua, ¿cuánto ácido se necesita para 25 de agua?", notation: "2/5 = x/25, entonces x = 10", color: "from-indigo-500 to-blue-600", }, ] return (

Conceptos Fundamentales

Entiende las bases de razones, tasas y proporciones con ejemplos simples

{concepts.map((concept, index) => (

{concept.emoji}

{concept.title}

Definición:

{concept.definition}

Ejemplo:

{concept.example}

{concept.notation}

))}

¿Cuál es la diferencia?

Razón

Compara dos cantidades (pueden tener las mismas unidades)

Tasa

Compara cantidades con DIFERENTES unidades (siempre)

Proporción

Iguala dos razones para resolver un valor desconocido

) } [V0_FILE]typescriptreact:file="components/applications.tsx" "use client" export default function Applications() { const chemistryApps = [ { title: "Mezclas y Soluciones", icon: "🧪", description: "Proporción de soluto y disolvente", example: "Una solución salina es 1 parte de sal en 10 partes de agua (1:10)", practical: "Si necesitas 50 ml de solución, usa 5 ml de sal y 45 ml de agua", }, { title: "Reacciones Químicas", icon: "⚗️", description: "Proporciones estequiométricas", example: "En la combustión: 1 C + 2 H = 1 CH₂", practical: "Para 3 moléculas de H, necesitas 1.5 de C", }, { title: "Concentraciones", icon: "📊", description: "Medida de soluto por volumen", example: "Una solución al 5% tiene 5g de soluto en 100ml", practical: "Para 50ml de solución al 5%, necesitas 2.5g de soluto", }, ] const medicineApps = [ { title: "Dosis por Peso", icon: "⚖️", description: "Cálculo de medicamentos según peso", example: "Un antibiótico: 25 mg por kilogramo de peso", practical: "Para un paciente de 60kg: 60 × 25 = 1500 mg", }, { title: "Frecuencia Cardíaca", icon: "❤️", description: "Medición de latidos por minuto", example: "Normal en adultos: 60-100 latidos/minuto", practical: "Si contas 20 latidos en 15 segundos: (20 × 60) ÷ 15 = 80 bpm", }, { title: "Diluciones", icon: "💧", description: "Reducción de concentración de medicamentos", example: "Diluir 1 parte de medicina en 5 partes de solución", practical: "10ml de medicina + 50ml de solución = 60ml diluido", }, ] const ApplicationCard = ({ app, index }: any) => (

{app.icon}

{app.title}

{app.description}

Ejemplo:

{app.example}

Aplicación Práctica:

{app.practical}

) return (

Aplicaciones Prácticas

Cómo se usan razones, tasas y proporciones en situaciones reales

🧪 En la Química

{chemistryApps.map((app, index) => ( ))}

💊 En la Medicina

{medicineApps.map((app, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/calculator.tsx" "use client" import { useState } from "react" export default function Calculator() { const [calcType, setCalcType] = useState("proportion") const [result, setResult] = useState(null) // Proportion Calculator: a/b = c/d, solve for x const [propA, setPropA] = useState("") const [propB, setPropB] = useState("") const [propC, setPropC] = useState("") const [propD, setPropD] = useState("") // Mixture Calculator const [mixPart1, setMixPart1] = useState("") const [mixPart2, setMixPart2] = useState("") const [mixTotal, setMixTotal] = useState("") // Dose Calculator const [dosePerKg, setDosePerKg] = useState("") const [patientWeight, setPatientWeight] = useState("") // Rate Calculator const [rateValue, setRateValue] = useState("") const [rateTime, setRateTime] = useState("") const calculateProportion = () => { const a = Number.parseFloat(propA) const b = Number.parseFloat(propB) const c = Number.parseFloat(propC) const d = Number.parseFloat(propD) if (a && b && c) { const x = (b * c) / a setResult(Math.round(x * 100) / 100) } else if (a && b && d) { const x = (a * d) / b setResult(Math.round(x * 100) / 100) } } const calculateMixture = () => { const p1 = Number.parseFloat(mixPart1) const p2 = Number.parseFloat(mixPart2) const total = Number.parseFloat(mixTotal) if (p1 && p2 && total) { const ratio = p1 + p2 const part1Amount = (p1 / ratio) * total const part2Amount = (p2 / ratio) * total setResult(part1Amount) } } const calculateDose = () => { const perKg = Number.parseFloat(dosePerKg) const weight = Number.parseFloat(patientWeight) if (perKg && weight) { const totalDose = perKg * weight setResult(Math.round(totalDose * 100) / 100) } } const calculateRate = () => { const value = Number.parseFloat(rateValue) const time = Number.parseFloat(rateTime) if (value && time) { const rate = value / time setResult(Math.round(rate * 100) / 100) } } return (

Calculadora Interactiva

Resuelve problemas de química y medicina al instante

{[ { id: "proportion", label: "Proporción", emoji: "⚖️" }, { id: "mixture", label: "Mezclas", emoji: "🧪" }, { id: "dose", label: "Dosis", emoji: "💊" }, { id: "rate", label: "Tasas", emoji: "📊" }, ].map((type) => ( ))}

{calcType === "proportion" && (

Calculadora de Proporciones

Si a/b = c/d, encuentra el valor faltante

a setPropA(e.target.value)} placeholder="Ej: 2" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

b setPropB(e.target.value)} placeholder="Ej: 5" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

c setPropC(e.target.value)} placeholder="Ej: 4" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

d (o x) setPropD(e.target.value)} placeholder="¿Cuánto?" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

)} {calcType === "mixture" && (

Calculadora de Mezclas

¿Cuánto de cada sustancia necesitas?

Partes de sustancia 1 setMixPart1(e.target.value)} placeholder="Ej: 1" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

Partes de sustancia 2 setMixPart2(e.target.value)} placeholder="Ej: 10" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

Total de mezcla (ml, g, etc) setMixTotal(e.target.value)} placeholder="Ej: 110" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

)} {calcType === "dose" && (

Calculadora de Dosis

Calcula la dosis según el peso del paciente

Dosis por kilogramo (mg/kg) setDosePerKg(e.target.value)} placeholder="Ej: 25" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

Peso del paciente (kg) setPatientWeight(e.target.value)} placeholder="Ej: 60" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

)} {calcType === "rate" && (

Calculadora de Tasas

Convierte valores a tasas (por minuto, segundo, etc)

Valor total setRateValue(e.target.value)} placeholder="Ej: 80 (latidos)" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

Tiempo (minutos/segundos) setRateTime(e.target.value)} placeholder="Ej: 1" className="w-full px-4 py-2 rounded bg-background border border-primary/30 focus:border-primary outline-none" />

)} {result !== null && (

Resultado:

{result}

{calcType === "dose" && "mg de medicamento"} {calcType === "mixture" && "ml/g de sustancia 1"} {calcType === "rate" && "unidades por minuto"} {calcType === "proportion" && "valor de x"}

)}

) } [V0_FILE]typescriptreact:file="components/exercises.tsx" "use client" import { useState } from "react" export default function Exercises() { const [selectedAnswers, setSelectedAnswers] = useState>({}) const [showResults, setShowResults] = useState(false) const exercises = [ { id: 1, type: "chemistry", question: "¿Cuál es la razón de hidrógeno a oxígeno en el agua (H₂O)?", options: ["1:2", "2:1", "3:1", "1:3"], correct: "2:1", explanation: "En el agua hay 2 átomos de hidrógeno por cada 1 de oxígeno, por lo que la razón es 2:1", }, { id: 2, type: "medicine", question: "Si un medicamento requiere 25 mg/kg y el paciente pesa 40 kg, ¿cuál es la dosis total?", options: ["600 mg", "1000 mg", "1200 mg", "800 mg"], correct: "1000 mg", explanation: "25 mg/kg × 40 kg = 1000 mg", }, { id: 3, type: "chemistry", question: "Una solución requiere 1 parte de sal en 9 partes de agua. Si necesitas 100 ml total, ¿cuánto necesitas de sal?", options: ["5 ml", "10 ml", "15 ml", "20 ml"], correct: "10 ml", explanation: "1/(1+9) × 100 = 1/10 × 100 = 10 ml de sal", }, { id: 4, type: "medicine", question: "¿Cuál es la frecuencia cardíaca normal en adultos en reposo (latidos por minuto)?", options: ["40-60 bpm", "60-100 bpm", "100-140 bpm", "140-180 bpm"], correct: "60-100 bpm", explanation: "La frecuencia cardíaca normal en adultos está entre 60 y 100 latidos por minuto", }, { id: 5, type: "chemistry", question: "Si a/b = 3/4 y a = 9, ¿cuál es el valor de b?", options: ["12", "6.75", "9", "16"], correct: "12", explanation: "9/b = 3/4 → b = (9 × 4) / 3 = 36 / 3 = 12", }, { id: 6, type: "medicine", question: "Un antibiótico debe diluirse 1:5. Si tienes 30 ml de medicamento puro, ¿cuántos ml de solución total obtendrás?", options: ["150 ml", "180 ml", "120 ml", "90 ml"], correct: "180 ml", explanation: "Si la dilución es 1:5, el medicamento es 1 parte y el disolvente 5 partes. Total = 30 × (5+1) / 1 = 180 ml", }, ] const handleAnswer = (id: number, answer: string) => { setSelectedAnswers((prev) => ({ ...prev, [id]: answer, })) } const correctCount = exercises.filter((ex) => selectedAnswers[ex.id] === ex.correct).length return (

Ejercicios Prácticos

Prueba tus conocimientos con estos problemas reales de química y medicina

{exercises.map((exercise, index) => { const isCorrect = selectedAnswers[exercise.id] === exercise.correct const answered = selectedAnswers[exercise.id] !== undefined return (

{exercise.type === "chemistry" ? "🧪" : "💊"}

{exercise.type === "chemistry" ? "QUÍMICA" : "MEDICINA"}

{exercise.question}

{exercise.options.map((option, optIndex) => ( ))}

{showResults && answered && (

{isCorrect ? "✓ ¡Correcto!" : "✗ Incorrecto"}

{exercise.explanation}

)}

) })}

{showResults && (

Tu puntuación:

{correctCount}/{exercises.length}

{correctCount === exercises.length ? "¡Perfecto! ¡Eres un experto!" : correctCount >= 4 ? "¡Muy bien! Necesitas poco más de práctica" : correctCount >= 2 ? "Buen inicio, repasa los conceptos" : "Repasa los conceptos y lo intentas de nuevo"}

)}

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.98 0 0); --foreground: oklch(0.2 0 0); --card: oklch(0.95 0 0); --card-foreground: oklch(0.2 0 0); --popover: oklch(0.98 0 0); --popover-foreground: oklch(0.2 0 0); --primary: oklch(0.45 0.25 276); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.55 0.28 286); --secondary-foreground: oklch(0.98 0 0); --accent: oklch(0.5 0.24 310); --accent-foreground: oklch(0.98 0 0); --muted: oklch(0.92 0 0); --muted-foreground: oklch(0.5 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.9 0 0); --input: oklch(0.95 0 0); --ring: oklch(0.5 0.2 276); --chart-1: oklch(0.45 0.25 276); --chart-2: oklch(0.55 0.28 286); --chart-3: oklch(0.5 0.24 310); --chart-4: oklch(0.4 0.22 240); --chart-5: oklch(0.6 0.26 300); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.15 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.2 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.15 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.25 276); --primary-foreground: oklch(0.15 0 0); --secondary: oklch(0.7 0.25 286); --secondary-foreground: oklch(0.15 0 0); --accent: oklch(0.68 0.22 310); --accent-foreground: oklch(0.15 0 0); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.7 0 0); --destructive: oklch(0.635 0.237 25.331); --destructive-foreground: oklch(0.396 0.141 25.723); --border: oklch(0.3 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.65 0.2 276); --chart-1: oklch(0.65 0.25 276); --chart-2: oklch(0.7 0.25 286); --chart-3: oklch(0.68 0.22 310); --chart-4: oklch(0.6 0.2 240); --chart-5: oklch(0.75 0.24 300); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Razones, Tasas y Proporciones - Química y Medicina", description: "Aprende sobre razones, tasas y proporciones con ejemplos prácticos de química y medicina. Incluye calculadora interactiva y ejercicios.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }