Precios

import React, { useState, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Search, Monitor, Video, Package, Camera, Music, PenTool, Filter, DollarSign, ChevronRight, Share2, Megaphone, Instagram } from 'lucide-react'; // --- DATA UPDATE BASED ON NEW IMAGES --- const servicesData = [ // --- COMMUNITY MANAGER --- { id: 34, category: 'COMMUNITY MANAGER', name: 'Social Media Plan', description: 'Planteo de estrategia de marketing y comunicación en redes sociales.', priceA: 95040, priceB: 70400, priceC: 45760 }, { id: 35, category: 'COMMUNITY MANAGER', name: 'Creación de perfil / fanpage', description: 'Incluye avatar, portada, carga de datos y configuración general.', priceA: 47520, priceB: 35200, priceC: 22880 }, { id: 38, category: 'COMMUNITY MANAGER', name: 'Gestión básica de RRSS (mensual)', description: 'Entre 2 y 5 posteos mensuales. Incluye diseño/armado de piezas.', priceA: 127710, priceB: 94600, priceC: 61490 }, { id: 39, category: 'COMMUNITY MANAGER', name: 'Gestión estándar de RRSS (mensual)', description: 'Entre 5 y 10 posteos mensuales. Incluye diseño/armado de piezas.', priceA: 190080, priceB: 140800, priceC: 91520 }, { id: 40, category: 'COMMUNITY MANAGER', name: 'Gestión intensiva de RRSS (mensual)', description: 'Entre 10 y 20 posteos mensuales. Incluye diseño/armado de piezas.', priceA: 253935, priceB: 188100, priceC: 122265 }, { id: 41, category: 'COMMUNITY MANAGER', name: 'Flyers para IG', description: 'Precio por unidad. Descuento estimado del 40% si es dentro de un plan.', priceA: 10395, priceB: 7700, priceC: 5005 }, // --- PUBLICIDAD --- { id: 25, category: 'PUBLICIDAD', name: 'Volante/Flyer sólo frente', description: 'No incluye costo de fotografías.', priceA: 60885, priceB: 45100, priceC: 29315 }, { id: 26, category: 'PUBLICIDAD', name: 'Volante/Flyer frente y dorso', description: 'No incluye costo de fotografías.', priceA: 95040, priceB: 70400, priceC: 45760 }, { id: 27, category: 'PUBLICIDAD', name: 'Folleto díptico', description: 'Frente y dorso, 1 pliegue. No incluye costo de fotografías.', priceA: 135135, priceB: 100100, priceC: 65065 }, { id: 28, category: 'PUBLICIDAD', name: 'Folleto tríptico', description: 'Frente y dorso, 2 pliegues. No incluye costo de fotografías.', priceA: 179685, priceB: 133100, priceC: 86515 }, { id: 29, category: 'PUBLICIDAD', name: 'Brochure', description: 'Alta complejidad. Hasta 10 páginas/pliegos.', priceA: 362340, priceB: 268400, priceC: 174460 }, { id: 123, category: 'PUBLICIDAD', name: 'Diseño de Pendón (Desde Cero)', description: 'Roller (80 x 200 cm).', priceA: 100980, priceB: 74800, priceC: 48620 }, // --- SERVICIOS DE VIDEO (REELS) --- // Nota: Precios únicos asignados a todas las columnas por defecto { id: 'R4', category: 'VIDEO REELS', name: 'Grabación y edición de 4 reels', description: 'Pack mensual de contenido vertical.', priceA: 205000, priceB: 205000, priceC: 205000 }, { id: 'R8', category: 'VIDEO REELS', name: 'Grabación y edición de 8 reels', description: 'Pack mensual de contenido vertical.', priceA: 266000, priceB: 266000, priceC: 266000 }, { id: 'R12', category: 'VIDEO REELS', name: 'Grabación y edición de 12 reels', description: 'Pack mensual de contenido vertical.', priceA: 387000, priceB: 387000, priceC: 387000 }, // --- AUDIOVISUAL (Mantenidos y actualizados) --- { id: 108, category: 'AUDIOVISUAL', name: 'Placa animada 2D', description: 'Texto, fondo y animación. Hasta 10 segundos.', priceA: 68310, priceB: 50600, priceC: 32890 }, { id: 109, category: 'AUDIOVISUAL', name: 'Spot publicitario complejidad baja', description: 'Placas estáticas. Hasta 10 seg. No incluye audio.', priceA: 114345, priceB: 84700, priceC: 55055 }, { id: 110, category: 'AUDIOVISUAL', name: 'Spot publicitario complejidad media', description: 'Placas animadas. Hasta 10 seg. No incluye audio.', priceA: 188595, priceB: 139700, priceC: 90805 }, { id: 111, category: 'AUDIOVISUAL', name: 'Spot publicitario complejidad alta', description: 'Placas animadas + 3D básicos. Hasta 10 seg.', priceA: 302940, priceB: 224400, priceC: 145860 }, { id: 113, category: 'AUDIOVISUAL', name: 'Zócalo (TV, YouTube)', description: 'Texto, fondo y animación. Hasta 10 segundos.', priceA: 51975, priceB: 38500, priceC: 25025 }, // --- FOTOGRAFÍA (Actualizados) --- { id: 117, category: 'FOTOGRAFÍA', name: 'En estudio: armado de set', description: 'Sesión hasta 2 horas.', priceA: 81675, priceB: 60500, priceC: 39325 }, { id: 118, category: 'FOTOGRAFÍA', name: 'En locación: sesión fotográfica', description: 'Hasta 2 horas, 1 cámara.', priceA: 81675, priceB: 60500, priceC: 39325 }, { id: 120, category: 'FOTOGRAFÍA', name: 'Filmación (costo x hora)', description: 'Incluye 1 cámara FullHD + micrófono + 1 luz.', priceA: 89100, priceB: 66000, priceC: 42900 }, { id: 122, category: 'FOTOGRAFÍA', name: 'Retoque digital x hora', description: 'Fotomontajes, retoque de personas, restauración.', priceA: 14850, priceB: 11000, priceC: 7150 }, // --- WEB (Mantenidos) --- { id: 83, category: 'WEB', name: 'Modificaciones a sitio WEB HTML/CSS', description: 'Actualización básica. No incluye cambios de diseño.', priceA: 348975, priceB: 258500, priceC: 168025 }, { id: 84, category: 'WEB', name: 'Diseño sitio WEB Landing Page', description: 'Página de aterrizaje para captación eficaz.', priceA: 103950, priceB: 77000, priceC: 50050 }, // --- PACKAGING --- { id: 76, category: 'PACKAGING', name: 'Pack digital presentation', description: 'Tapas, USB/CD y booklet hasta 3 pliegos.', priceA: 418770, priceB: 310200, priceC: 201630 }, { id: 77, category: 'PACKAGING', name: 'Etiqueta simple', description: 'Etiqueta única aplicada, envoltura simple.', priceA: 201960, priceB: 149600, priceC: 97240 }, // --- SONIDO --- { id: 114, category: 'SONIDO', name: 'Spot radial', description: 'Edición/mezcla, hasta 10 segundos.', priceA: 49005, priceB: 36300, priceC: 23595 } ]; const categories = [ { id: 'ALL', label: 'Todos', icon: Filter }, { id: 'PUBLICIDAD', label: 'Publicidad', icon: Megaphone }, { id: 'COMMUNITY MANAGER', label: 'Social Media', icon: Share2 }, { id: 'VIDEO REELS', label: 'Reels', icon: Instagram }, { id: 'AUDIOVISUAL', label: 'Audiovisual', icon: Video }, { id: 'FOTOGRAFÍA', label: 'Fotografía', icon: Camera }, { id: 'WEB', label: 'Web', icon: Monitor }, { id: 'PACKAGING', label: 'Packaging', icon: Package }, { id: 'SONIDO', label: 'Sonido', icon: Music }, ]; const formatPrice = (price) => { return new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(price); }; export default function PricingApp() { const [activeCategory, setActiveCategory] = useState('ALL'); const [clientType, setClientType] = useState('A'); // A, B, C const [searchTerm, setSearchTerm] = useState(''); const filteredServices = useMemo(() => { return servicesData.filter(service => { const matchesCategory = activeCategory === 'ALL' || service.category === activeCategory; const matchesSearch = service.name.toLowerCase().includes(searchTerm.toLowerCase()) || service.description.toLowerCase().includes(searchTerm.toLowerCase()); return matchesCategory && matchesSearch; }); }, [activeCategory, searchTerm]); const getPrice = (service) => { switch(clientType) { case 'B': return service.priceB; case 'C': return service.priceC; default: return service.priceA; } }; return (
{/* Header */}
{/* Logo / Brand */}
L

Tarifario Digital

Lampo Agencia

{/* Controls */}
{/* Client Type Selector */}
{['A', 'B', 'C'].map((type) => ( ))}
{/* Search */}
setSearchTerm(e.target.value)} />
{/* Category Tabs */}
{categories.map((cat) => { const Icon = cat.icon; const isActive = activeCategory === cat.id; return ( ); })}
{/* Main Content */}
{/* Results Info */}

Mostrando {filteredServices.length} servicios

Precios actualizados
{/* Grid */} {filteredServices.map((service) => ( {/* Card Header */}
#{service.id} • {service.category}

{service.name}

{service.description}

{/* Card Footer / Price */}
Precio Cliente {clientType} {formatPrice(getPrice(service))}
{/* Decorative side accent */}
))} {filteredServices.length === 0 && (

No se encontraron servicios

Prueba ajustando los filtros o la búsqueda

 )}
); }
¡Te ayudamos! ⚡️