[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDownIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Accordion({ ...props }: React.ComponentProps) { return } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180', className, )} {...props} > {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogContent({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( ) } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const alertVariants = cva( 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', { variants: { variant: { default: 'bg-card text-card-foreground', destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90', }, }, defaultVariants: { variant: 'default', }, }, ) function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

) } function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" 'use client' import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' function AspectRatio({ ...props }: React.ComponentProps) { return } export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cn } from '@/lib/utils' function Avatar({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarImage({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarFallback({ className, ...props }: React.ComponentProps) { return ( ) } export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import { cn } from '@/lib/utils' function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { return

} function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { return (

) } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'a' return ( ) } function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { return ( ) } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) { return (
svg]:size-3.5', className)} {...props} > {children ?? }

) { return (

) } function ButtonGroupText({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'div' return ( ) } function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }: React.ComponentProps) { return ( ) } export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months, ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next, ), month_caption: cn( 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption, ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns, ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root, ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown, ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label, ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday, ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-(--cell-size)', defaultClassNames.week_number_header, ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number, ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day, ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start, ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today, ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside, ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled, ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (

) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (

{children}

) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) } function CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" 'use client' import * as React from 'react' import * as RechartsPrimitive from 'recharts' import { cn } from '@/lib/utils' // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: '', dark: '.dark' } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error('useChart must be used within a ') } return context } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >['children'] }) { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, '')}` return (

{children}

) } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme || config.color, ) if (!colorConfig.length) { return null } return ( ) } [V0_FILE]typescriptreact:file="components/ui/before-after-slider.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import Image from "next/image" import { cn } from "@/lib/utils" interface BeforeAfterSliderProps { beforeImage: string afterImage: string beforeAlt?: string afterAlt?: string className?: string } export default function BeforeAfterSlider({ beforeImage, afterImage, beforeAlt = "Antes", afterAlt = "Después", className, }: BeforeAfterSliderProps) { const [sliderPosition, setSliderPosition] = useState(50) const [isDragging, setIsDragging] = useState(false) const containerRef = useRef(null) const handleMove = (clientX: number) => { if (!containerRef.current) return const rect = containerRef.current.getBoundingClientRect() const x = clientX - rect.left const percentage = (x / rect.width) * 100 setSliderPosition(Math.max(0, Math.min(100, percentage))) } const handleMouseMove = (e: MouseEvent) => { if (!isDragging) return handleMove(e.clientX) } const handleTouchMove = (e: TouchEvent) => { if (!isDragging) return handleMove(e.touches[0].clientX) } const handleStart = () => { setIsDragging(true) } const handleEnd = () => { setIsDragging(false) } useEffect(() => { if (isDragging) { document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleEnd) document.addEventListener("touchmove", handleTouchMove) document.addEventListener("touchend", handleEnd) } return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleEnd) document.removeEventListener("touchmove", handleTouchMove) document.removeEventListener("touchend", handleEnd) } }, [isDragging]) return (

{/* After Image (Background) */}

{/* Before Image (Clipped) */}

{/* Slider Handle */} {/* Labels */}

) } [V0_FILE]typescriptreact:file="components/sections/diet-options.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Utensils, Leaf, Sprout, Milk, Wheat, Sparkles } from "lucide-react" const dietData = { general: { title: "Dieta General", icon: Utensils, description: "Una dieta completa y balanceada que incluye todos los grupos alimenticios. Perfecta para quienes buscan mantener un estilo de vida saludable sin restricciones específicas.", benefits: [ "Balance perfecto de macronutrientes", "Variedad de alimentos de todos los grupos", "Flexible y adaptable a tu estilo de vida", "Rica en vitaminas y minerales esenciales", "Sostenible a largo plazo", ], gif: "/images/nutrition/dieta-general.jpg", }, vegetariana: { title: "Dieta Vegetariana", icon: Leaf, description: "Plan alimenticio basado en vegetales, lácteos y huevos. Excluye carnes pero mantiene proteínas de alta calidad de fuentes no cárnicas.", benefits: [ "Rica en fibra y antioxidantes", "Proteínas de fuentes vegetales y lácteos", "Baja en grasas saturadas", "Ideal para salud cardiovascular", "Variedad de opciones deliciosas", ], gif: "/images/nutrition/desayuno-proteico.jpg", }, vegana: { title: "Dieta Vegana", icon: Sprout, description: "Alimentación 100% basada en plantas. Sin productos de origen animal, perfecta para quienes buscan un estilo de vida completamente plant-based.", benefits: [ "Libre de productos animales", "Alta en fibra y fitonutrientes", "Proteínas de legumbres y cereales", "Amigable con el medio ambiente", "Rica en vitaminas del complejo B", ], gif: "/images/nutrition/dieta-vegana.jpg", }, lactosa: { title: "Dieta Libre de Lactosa", icon: Milk, description: "Plan especialmente diseñado para personas con intolerancia a la lactosa. Incluye alternativas deliciosas y nutritivas sin lácteos.", benefits: [ "Sin lácteos ni derivados", "Alternativas vegetales de calcio", "Digestión más cómoda", "Rica en nutrientes esenciales", "Variedad de sustitutos deliciosos", ], gif: "/images/nutrition/libre-lactosa.jpg", }, gluten: { title: "Dieta Libre de Gluten", icon: Wheat, description: "Alimentación sin trigo, cebada ni centeno. Ideal para celíacos o personas sensibles al gluten que buscan opciones saludables y sabrosas.", benefits: [ "Sin trigo, cebada ni centeno", "Cereales alternativos nutritivos", "Mejora la digestión", "Reduce inflamación intestinal", "Amplia variedad de opciones", ], gif: "/images/nutrition/sin-gluten.jpg", }, mas: { title: "¡Y Muchas Más Opciones!", icon: Sparkles, description: "Ofrecemos planes personalizados para múltiples necesidades: dietas cetogénicas, paleo, mediterránea, baja en sodio, para deportistas y muchas más. ¡Contáctanos para crear tu plan ideal!", benefits: [ "Planes 100% personalizados", "Adaptados a tus necesidades específicas", "Asesoría nutricional profesional", "Seguimiento continuo", "Flexibilidad total en tu alimentación", ], gif: "/images/nutrition/mucho-mas-variedad.jpg", }, } type DietType = keyof typeof dietData export default function DietOptions() { const [selectedDiet, setSelectedDiet] = useState(null) const [isOpen, setIsOpen] = useState(false) const videoRef = useRef(null) useEffect(() => { const video = videoRef.current if (!video) return const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { video.play().catch(() => {}) } else { video.pause() } }) }, { threshold: 0.5 }, ) observer.observe(video) return () => { observer.disconnect() } }, []) const handleDietClick = (diet: DietType) => { setSelectedDiet(diet) setIsOpen(true) } return (

{/* Video Background */}

NUESTRAS OPCIONES DE DIETAS

{Object.entries(dietData).map(([key, value]) => { const Icon = value.icon return ( ) })}

{/* Dialog for Diet Details */}

) } [V0_FILE]typescriptreact:file="components/sections/training-showcase.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { Dumbbell, Trophy, Apple } from "lucide-react" export default function TrainingShowcase() { const [currentVideo, setCurrentVideo] = useState(0) const [isPlaying, setIsPlaying] = useState(false) const videoRef = useRef(null) const videos = ["/images/mma.mp4", "/images/mma2.mp4", "/images/fuegofondo.mp4"] useEffect(() => { const video = videoRef.current if (!video) return const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { video.play().catch(() => { // Manejar silenciosamente restricciones de autoplay }) } else { video.pause() } }) }, { threshold: 0.5 }, ) observer.observe(video) const handleInteraction = () => { if (video.paused) { video.play().catch(() => {}) } } document.addEventListener("click", handleInteraction, { once: true }) return () => { observer.disconnect() document.removeEventListener("click", handleInteraction) } }, []) useEffect(() => { const activeVideo = videoRef.current if (!activeVideo) return const playVideo = async () => { try { // Intentar reproducir el video await activeVideo.play() setIsPlaying(true) } catch (error) { // Si falla, intentar de nuevo después de un delay console.log("[v0] Video autoplay blocked, will retry on user interaction") setIsPlaying(false) // Intentar reproducir de nuevo después de 100ms setTimeout(async () => { try { await activeVideo.play() setIsPlaying(true) } catch (retryError) { // Si aún falla, esperar interacción del usuario console.log("[v0] Video autoplay requires user interaction") } }, 100) } } const handleVideoEnd = () => { setCurrentVideo((prev) => (prev + 1) % videos.length) } // Reproducir el video activo playVideo() // Agregar listener para cuando el video termine activeVideo.addEventListener("ended", handleVideoEnd) return () => { activeVideo.removeEventListener("ended", handleVideoEnd) } }, [videos.length]) return (

{/* Video Background */}

QUIENES LOGRAN CAMBIOS

{/* Card 1 */}

SEGUIR UN PROCESO

Mantenerse fiel a tus objetivos y propósitos es la primera gran virtud de logro, la consistencia de lo que haces bien, de los detalles a tener en cuenta y el esfuerzo en la mesa, serán los detalles que marcan la gran diferencia.

{/* Card 2 */}

ES TU PROPÓSITO

Quieres realmente un cambio que está dentro de tu propósito de vida, que tu cambio sea fuente de transformación para ti, en todas tus áreas. Social, familiar, profesional, amorosa y financiera. "Dar más de ti"

{/* Card 3 */}

MEJOR PARA TI

El amor propio empieza por elegir lo mejor para nosotros, y lo mejor para nosotros empieza por lo que podemos darnos nosotros mismos. Vida, salud, estabilidad, paz y evolución consciente.

) } [V0_FILE]typescriptreact:file="components/sections/unique-routine-section.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import { Dumbbell, Calendar, Target, Clock } from "lucide-react" const features = [ { icon: Dumbbell, title: "OPCIONES DE ENTRENAR SÓLO TIPO GYM O COMBINACIÓN GYM-CALISTENIA", description: "Logra tus metas físicas mientras te vuelves fuerte y ágil con las modalidades.", }, { icon: Target, title: "PERIODIZACIÓN DE CARDIO (AVANZADOS)", description: "Esto es un plan de entrenamiento individual para ti desde tus condiciones y capacidades. Tu cuerpo siempre será un reflejo de tu disciplina, de tus hábitos y de la energía que posees.", }, { icon: Calendar, title: "PLANIFICACIÓN SEMANAL A SEMANAL", description: "¡Mantente al tanto llevando tu progreso con nuestros chequeos semanales!", }, ] const videos = ["/images/mma.mp4", "/images/mma2.mp4"] export default function UniqueRoutineSection() { const [hoveredIndex, setHoveredIndex] = useState(null) const [currentVideo, setCurrentVideo] = useState(0) const [currentMealImage, setCurrentMealImage] = useState(0) const video1Ref = useRef(null) const video2Ref = useRef(null) const mealImages = [ "/images/nutrition/desayuno-proteico.jpg", "/images/nutrition/dieta-vegana.jpg", "/images/nutrition/libre-lactosa.jpg", "/images/nutrition/sin-gluten.jpg", "/images/nutrition/mucho-mas-variedad.jpg", ] useEffect(() => { const video1 = video1Ref.current const video2 = video2Ref.current if (!video1 || !video2) return const handleVideoEnd = () => { if (currentVideo === 0) { video2.classList.add("active") video1.classList.remove("active") video2.play() setCurrentVideo(1) } else { video1.classList.add("active") video2.classList.remove("active") video1.play() setCurrentVideo(0) } } video1.addEventListener("ended", handleVideoEnd) video2.addEventListener("ended", handleVideoEnd) return () => { video1.removeEventListener("ended", handleVideoEnd) video2.removeEventListener("ended", handleVideoEnd) } }, [currentVideo]) useEffect(() => { const imageInterval = setInterval(() => { setCurrentMealImage((prev) => (prev + 1) % mealImages.length) }, 3000) return () => clearInterval(imageInterval) }, [mealImages.length]) return (

{/* Phone 1 - Training App */}

{/* Phone bezel */}

{/* Screen */}

{/* Status bar */}

9:41

{/* App header */}

Rutina de Ejercicios

{/* Exercise list */}

{["Press de banca", "Sentadillas", "Dominadas", "Peso muerto"].map((exercise, idx) => (

{exercise}

3x12

))}

{/* Bottom button */}

Registrar Mi Recordatorio

{/* Notch */}

{/* Phone 2 - Nutrition App */}

{/* Phone bezel */}

{/* Screen */}

{/* Status bar */}

9:41

{/* App header */}

Plan Nutricional

{mealImages.map((img, idx) => ( Comida saludable

))}

{/* Stats cards */}

Calorías

2,400

Proteína

180g

{/* Meal list */}

{[ { meal: "Desayuno", icon: "🍳", time: "8:00 AM" }, { meal: "Almuerzo", icon: "🥗", time: "1:00 PM" }, { meal: "Cena", icon: "🍖", time: "7:00 PM" }, ].map((item, idx) => (

{item.icon}

{item.meal}

{item.time}

))}

{/* Notch */}

¡UNA RUTINA DE UNA EN
UN MILLÓN!

Esto es una rutina de entrenamiento creada solo para ti. Tu cuerpo es diferente a el de la persona a tu lado, entonces ¿por qué tus rutinas deben ser las mismas?

Ten un plan en base a tus necesidades y metas que tengas en mente!

{features.map((feature, index) => { const Icon = feature.icon return (

setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} >

{feature.title}

{feature.description}

) })}

) } [V0_FILE]typescriptreact:file="components/sections/pricing-section.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import Link from "next/link" import Image from "next/image" import { useEffect, useRef, useState } from "react" const plans = [ { id: "basic", name: "Asesoria Standard 1 - 1", price: 360, period: "3 Meses", features: [ "Plan de Comidas Personalizado", "MENÚS de comidas Reales", "YOGA Y MOVILIDAD", "RUTINA DE CARDIO PARA RENDIMIENTO (TRAINING PEAKS)", "VÍDEOS de paso a paso", "Lista de compras con Lista descargable", "APRENDER A CONTAR MACROS EN MI ASESORÍA 1 A 1", "RUTINAS HÍBRIDAS GYM-CALISTENIA", "Registro de Progreso", 'ACCESO A DESCARGAR todos mis E-BOOKs "ESTILO DE VIDA"', "Conexión con la comunidad", "Soporte Online via whatsapp", "30 Días de Garantía (Mentoría)", ], cta: "PAGAR AHORA", link: "https://api.whatsapp.com/send?phone=573015936783&text=Hola%20Cristian%20me%20gustar%C3%ADa%20recibir%20informaci%C3%B3n%20sobre%20el%20Plan%20Standard.", featured: false, shield: true, }, { id: "diamond", name: "Asesoría VIP", price: 600, period: "3 Meses", subtitle: "EL PROGRAMA MÁS EXCLUSIVO", features: [ "Todo lo Oro", "Acceso 24/7", "Coach personal dedicado", "Suplementación personalizada", "Análisis de composición corporal mensual", "Plan de recuperación avanzado", "Acceso a eventos exclusivos", "Prioridad en todas las consultas", ], cta: "PAGAR AHORA", link: "https://api.whatsapp.com/send?phone=573015936783&text=Hola%20Cristian%20me%20gustar%C3%ADa%20recibir%20informaci%C3%B3n%20sobre%20el%20plan%20VIP.", featured: true, diamond: true, }, ] export default function PricingSection() { const [currentVideo, setCurrentVideo] = useState(0) const videos = ["/images/mma.mp4", "/images/mma2.mp4", "/images/fuegofondo.mp4"] const videoRefs = useRef<(HTMLVideoElement | null)[]>([]) useEffect(() => { const currentVideoElement = videoRefs.current[currentVideo] if (!currentVideoElement) return const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { currentVideoElement.play().catch(() => { // Silently handle autoplay restrictions }) } else { currentVideoElement.pause() } }) }, { threshold: 0.5 }, ) observer.observe(currentVideoElement) const handleVideoEnd = () => { setCurrentVideo((prev) => (prev + 1) % videos.length) } currentVideoElement.addEventListener("ended", handleVideoEnd) // Try to play the video currentVideoElement.play().catch(() => { // Silently handle autoplay restrictions }) return () => { observer.disconnect() currentVideoElement.removeEventListener("ended", handleVideoEnd) } }, [currentVideo, videos.length]) return (

{videos.map((video, index) => (

))}

PLANES Y PRECIOS

{plans.map((plan, index) => (

{plan.featured && !plan.diamond && ( RECOMENDADO )} {plan.shield && (

)} {plan.diamond && (

)} {plan.name} {plan.subtitle && ( {plan.subtitle} )}

${plan.price} USD / {plan.period}

{/* Features will be added here */}

))}

) }

NUESTRAS OPCIONES DE DIETAS

{value.title}

Beneficios: